Доступность: сайт для всех

Веб-доступность — свойство сайта, которым можно пользоваться разными способами: диктором, с клавиатуры, без звука. Её основа — стандарт WCAG и правильный HTML.

Кому это нужно

Доступность это не «специальная версия сайта для инвалидов». Это сайт, которым можно пользоваться разными способами. Вот кто на самом деле его читает:

• люди, которые не видят страницу и слушают её диктором (программой чтения с экрана) или читают пальцами на брайлевской строке;
• люди с плохим зрением, которые увеличивают текст в несколько раз, или с нарушением цветоощущения;
• люди, которые не могут пользоваться мышью: после травмы, с дрожью в руках, или просто пока у них в другой руке ребёнок;
• люди, которые не слышат, и всем, кто смотрит видео без звука в метро;
• люди с когнитивными особенностями, которым нужен понятный текст и спокойный порядок.

Каждый из нас бывал в этом списке: на ярком солнце экран телефона нечитаем, со сломанной рукой мышь недоступна. А поисковик устроен как самый терпеливый слепой читатель: он тоже не видит картинок и идёт по разметке. Поэтому доступные страницы почти всегда лучше находятся в поиске.

Каждый год исследование WebAIM Million проверяет автоматически главные страницы миллиона сайтов, и каждый год подавляющее большинство из них имеют ошибки. Самые частые: низкий контраст текста, картинки без alt, поля без подписи, пустые ссылки и кнопки. Их легко исправить, и вы умеете их исправлять: все они уже были в предыдущих уроках.

Четыре принципа

Стандарт WCAG (Web Content Accessibility Guidelines, «Руководство по доступности веб-содержимого»; сейчас версия 2.2) строится на четырёх принципах, которые по первым буквам английских слов называют POUR:

1. Воспринимаемость (Perceivable): информацию можно увидеть или услышать. Для картинки есть alt, для видео субтитры, для текста достаточный контраст.
2. Управляемость (Operable): всем можно пользоваться с клавиатуры, и никто не торопит.
3. Понятность (Understandable): язык страницы указан, текст ясен, поведение предсказуемо, ошибки в форме объяснены словами.
4. Надёжность (Robust): страница работает в разных браузерах и с разными программами. Лучший способ этого добиться: писать правильный HTML.

У каждого требования есть уровень: A (минимум), AA (то, что обычно требуют) и AAA (строже всего). Целиться стоит в AA. О законе вернёмся в части про качество и право: в России есть национальный стандарт на доступность сайтов для людей с нарушениями зрения, ГОСТ Р 52872-2019, и обязанности, которые зависят от вида организации.

Проверьте себя: что значит буква O в POUR?

Operable, управляемость: всем можно пользоваться с клавиатуры, никто не торопит.

Клавиатура: порядок и фокус

Многие пользуются сайтом без мыши, только клавишей Tab. Tab переносит фокус (выбранный элемент) на следующую ссылку, кнопку или поле; Shift+Tab назад; Enter нажимает ссылку, Enter или Пробел кнопку. Что важно:

• порядок фокуса идёт в порядке разметки. Поэтому элементы нужно ставить в HTML в том порядке, в котором их читают, а не двигать потом через CSS;
• элемент в фокусе должен быть виден: рамка фокуса показывает, где вы. Стандартную рамку нельзя убирать (outline: none), не заменив чем-то заметным;
• ссылки, кнопки и поля получают фокус сами. Положительный tabindex="5" не нужен: он ломает естественный порядок. Допустимы два значения: tabindex="0" (сделать фокусируемым то, что не было) и tabindex="-1" (убрать из порядка, но оставить доступным скрипту);
• в самом начале страницы стоит ссылка «Перейти к содержимому»: она ведёт к main и позволяет не нажимать Tab двадцать раз по меню на каждой странице. Её обычно прячут, пока она не получила фокус.

Попробуйте сами: на схеме три «кнопки» одного вида. Походите по ним Tab и нажмите Enter и Пробел.

Нажмите Tab несколько раз, пока фокус не пройдёт по трём кнопкам, и на каждой нажмите Enter или Пробел. Потом нажмите их мышью. Ниже таблица запишет, что получилось.

Записаться

Записаться

Записаться

Пока ничего не нажато.

Что это	Получил фокус	Сработал с клавиатуры	Сработал мышью	Что скажет диктор
Нативный button	не было	не было	не было	«кнопка»
div с обработчиком клика	не получит никогда	не было	не было	ничего: для диктора это не кнопка, а обычный текст
div с role="button" и tabindex="0"	не было	не было	не было	«кнопка», но руками ничего не делает с клавиатуры

Сбросить

Нативный button получает фокус от Tab, нажимается и Enter, и Пробелом, и диктор знает, что это кнопка. Всё это у него есть «из коробки». Остальные придётся доделывать вручную: добавить фокус, обработчик клавиш, роль. Поэтому первое правило ARIA: если есть подходящий нативный элемент, берите его.

Проверьте себя: чем нативный button лучше div с обработчиком клика?

Он сам получает фокус, нажимается Enter и Пробелом, и диктор знает, что это кнопка. Для div всё это пришлось бы дописывать.

ARIA: когда нужна и когда нет

ARIA (Accessible Rich Internet Applications) это набор дополнительных атрибутов, которые меняют то, что слышит диктор: role (роль), aria-label (имя), aria-describedby (подсказка), aria-current (текущий пункт), aria-expanded (раскрыто или нет). Она нужна для сложных интерфейсов, у которых нет нативного элемента.

Первое правило ARIA: если есть нативный элемент HTML с нужным смыслом и поведением, берите его. ARIA лишь меняет озвучивание, но не добавляет поведения: role="button" не сделает div нажимаемым с клавиатуры. И неверная ARIA хуже, чем никакой: она обещает диктору то, чего нет. «Нет ARIA лучше, чем плохая ARIA», говорят в W3C.

Есть и вторая половина: часть «сложных» интерфейсов теперь тоже нативна. Раскрывающийся блок делает <details> с <summary>, диалог <dialog>, выбор из списка <select>. Пользуйтесь ими.

Где ARIA уместна и на нашей странице: aria-label у nav, если на странице больше одной навигации; aria-describedby связывает поле с подсказкой; aria-current="page" отмечает текущий пункт меню.

Проверьте себя: помогает ли role="button" на div пользоваться им с клавиатуры?

Нет. Роль меняет только то, что слышит диктор. Фокус и нажатие по Enter и Пробелу пришлось бы писать скриптом. Проще взять нативный button.

Практика

Вы пройдёте по странице эпохи 2014 года как по чужой. Нужное сделать несложно, но каждое действие вы увидите в проверке. Дополнительно, уже вне нашего предпросмотра: откройте свою страницу в браузере, нажмите Tab и пройдите по ней, не трогая мышь. Видно ли, где фокус? Не застряли ли вы в меню? А потом запустите в инструментах разработчика проверку Lighthouse, раздел «Доступность», и посмотрите, что она найдёт.

Что было не так с 2014 годом

Тогда доступность называли «хорошим тоном». Скриптовые меню без клавиатуры, «кнопки» из div, полупрозрачный серый текст на белом были нормой. Многие сайты убирали рамку фокуса, потому что она «некрасива». Сегодня за недоступный сайт можно получить жалобу и штраф (в США и ЕС это уже происходит), а правила WCAG стали основой законов во многих странах.