Доступность (WCAG / a11y)

Что это такое

Доступность — это работа над тем, чтобы страницей могли пользоваться те, кто перемещается по ней с клавиатуры, скринридера, лупы или голосом, и все, чья ситуация временно похожа на их: рука в гипсе, яркое солнце на экране, шумный вагон; гарантии, о которых идёт речь, измеряют по опубликованному стандарту WCAG. А «a11y» — то же слово, только средние буквы заменили их количеством.

Почему это важно

Веб — то, как люди устраиваются на работу, платят налоги и попадают к врачу, поэтому недоступная страница не мелкий дефект: она отсекает людей от того, куда у них нет другого пути. При этом доступность — ещё и требование, которое можно предъявить юридически: она обязательна для государственного сектора почти во всей Европе, а для частных сервисов — во всё большем числе стран. На практике самые крупные победы дают самые дешёвые привычки, поэтому этот трек и стоит рядом с HTML и CSS, а не в отдельной дисциплине. Однако прикрутить доступность в конце нельзя: её либо пишут по ходу, либо переписывают.

Что в этом треке

Семантика и ARIA (02-frontend/11-accessibility-wcag-a11y/01-semantics-and-aria) — дать каждому элементу управления имя, роль и состояние, которые ассистивные технологии смогут объявить.
Клавиатурный доступ и фокус (02-frontend/11-accessibility-wcag-a11y/02-keyboard-and-focus) — сделать каждое действие достижимым и видимым без мыши.

Предварительные требования

Язык гипертекстовой разметки (HTML) (02-frontend/03-html)
Каскадные таблицы стилей (CSS) (02-frontend/05-css)

Что читать дальше

Веб-безопасность (OWASP Top 10) (07-security/01-web-security-owasp-top-10) — вторая дисциплина, где самые дешёвые победы приходят от аккуратной работы с основами.
Юзабилити-тестирование (03-design-ux/33-usability-testing) — как найти барьеры, которых вы не представляли.
Figma (программа для дизайна) (03-design-ux/12-figma) — место, где решения о контрасте и фокусе часто уже приняты — к лучшему или к худшему.