О том, как адаптировать сайты для людей с нарушениями слуха, зрения и пр.
1 Альтернативный текст для изображений
- Все информативные изображения должны иметь заполненный атрибут alt.
- Значение данного атрибута должно отражать содержимое изображения.
- Не составляйте описание по шаблону «Изображение чего-то» или «Здесь изображено это и это». Обычно программы для чтения текста и так знают, что это изображение.
- Данный атрибут также применим к SVG-рисункам и тегу picture.
2 Подписи к полям
Подписи к полям также играют роль в доступности веб-содержимого, и вот несколько простых рекомендаций:
- Желательно сопровождать поля ввода (text, textarea, select, radio, checkbox) подписями (тег label), отражающими их назначение.
- Связь между полем ввода и подписью осуществляется с помощью назначения полю ввода идентификатора (атрибут id) и указания значения этого атрибута в атрибуте подписи (for). Если всё сделано правильно, то при клике по подписи фокус ввода должен перейти на соответствующее поле. Таким образом увеличивается область клика для выбора поля.
- Не надейтесь только на placeholder для описания назначения поля ввода, некоторые устаревшие браузеры не поддерживают этот атрибут поля ввода.
- Кнопка (button) должна содержать текст, а если она содержит изображение, то сопроводите его альтернативным текстом (title).
- Несколько радиокнопок можно объединить в элементе fieldset. Первым элементом внутри fieldset является легенда.
- Fieldset и Legend используются для группирования не только радиокнопок, но и других полей ввода.
- Используйте специализированные поля ввода для ввода адреса электронной почты, URL, номера телефона и пр. Смартфоны будут подстраивать клавиатуру под тип поля, упрощающая ввод. Также это упрощает проверку данных, например, адреса электронной почты. Если браузер не поддерживает данные типы полей, то будет использован тип text.
- Важно обеспечить навигацию по полям ввода с помощью клавиши Tab и Shift+Tab.
- Для того, чтобы было легче определять, какой элемент формы используется в данный момент, определите различные стили для элементов (фокус, пустое значение, неверное значение и пр.).
3 Структура документа
3.1 Заголовки
Использование заголовков делает документ более структурированным. Важно использовать теги, предназначенные для создания заголовков: H1, H2, H3, H4, H5, H6, H7. Заголовок первого уровня должен быть один на страницу и принято, чтобы он содержал название документа.
3.2 Структурные элементы
В HTML5 есть достаточно семантических тегов, помогающих браузеру и сопутствующим программам правильно понять структуру документа. Такими структурными элементами являются: article, aside, footer, header, nav и main.
3.3 Списки
В HTML есть ненумерованный список и нумерованный список. Элементы списка могут быть вложенными и содержать другие списки, и всё это без проблем распознаётся браузером. Поэтому нет смысла делать списки помощью абзацев или строк, разделённых тегом br.
3.4 Прочее
Параграфы оформляются с помощью тега p. Для длинных цитат лучше использовать blockquote, для коротких — q.
3.5 Таблицы
Важно: таблицы — для табличных данных. Не нужно использовать их для выравнивания блоков или вёрстки сетки сайта. Таблицы нужны лишь для отображения каких-то упорядоченных данных: расписание, прейскурант, список характеристик товара, содержимое корзины в онлайн-магазине и пр.
- Добавьте описание для таблицы с помощью caption.
- Используйте th для заголовков колонок.
- Если таблица получается громоздкой, не бойтесь разделить её на несколько.
4 В дополнение
4.1 Разделение понятий
HTML определяет структуру документа. Это то, что читают браузеры и скринридеры — программы для чтения с экрана.
CSS определяет визуальную часть: цвета, отступы, позиционирование. Всё это не имеет значения для программ для чтения с экрана (за некоторыми исключениями, например, скрытие элементов).
Текст в псевдоэлементах :before и :after также воспринимается программами для чтения текста с экрана.
JavaScript ориентирован на динамическую функциональность, модифицирующую DOM.
Разделение этих вещей является хорошей практикой, влекущей лишь положительные моменты: лёгкость сопровождения, простота понимания структуры документа и снижение расходов.
- Держите CSS в отдельных файлах и воздержитесь от использования атрибута style и устаревших атрибутов width, height, border и пр.
- Разделяйте JS на модули и тоже держите всё в отдельных файлах, не нужно встраивать его в HTML.
4.2 Контраст и яркость
Важно позаботиться о том, чтобы текст был читабелен вне зависимости от условий, не лучшим образом предназначенных для чтения, и зрения читателя.
4.3 Версия для слабовидящих
Некоторые сайты, особенно государственные, имеют отдельную версию для слабовидящих. Это хорошее решение, ведь можно не пытаться угодить всем одновременно, и просто сделать несколько качественных версий оформления сайта. Важно предусмотреть простоту переключения между версиями: нет смысла в версии для слабовидящих, если человек не сможет на неё переключиться.
4.4 Увеличение содержимого
Не отключайте возможность приближения содержимого для мобильных браузеров. Даже если сайт адаптирован для мобильных устройств, есть небольшая доля пользователей, которым необходимо увеличить текст.
5 Виджеты
При использовании виджетов (вкладки, модальные окна и пр.) нужно предусмотреть различные ситуации, когда они не будут работать так, как предполагал. Если можно обойтись без них, то не используйте виджеты.
6 Семантика — наше всё
HTML5 предлагает достаточно решений для структурирования веб-содержимого, делая его доступным более широкой публике.
7 Для слабовидящих
Если вдруг команда сайта не позаботилась о доступности своего сайта, то всегда можно использовать сторонние средства.
Расширения для браузера
В каталоге расширений популярных браузеров есть расширения, адаптирующие сайты для удобного чтения.
Режим чтения
В последних версиях Chrome для мобильных устройств есть «Режим чтения».
