Добрый день. Я занимаюсь web-разработкой и почти всем, что с этим связано.

Основы доступного веб-содержимого

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

Альтернативный текст для изображений

  • Все изображения должны иметь атрибут alt.
  • Значение данного атрибута должно быть всегда заполненным и отражать содержимое изображения.
  • Если изображение носит чисто декоративный смысл, то можно атрибут оставить пустым, но быть он должен.
  • Не составляйте описание по шаблону «Изображение чего-то» или «Здесь изображено это и это». Обычно программы для чтения текста и так знают, что это изображение.
  • Данный атрибут также применим к SVG-рисункам и тегу picture.

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

Подписи к полям

Подписи к полям так же играют немаловажную роль в доступности веб-содержимого, и вот несколько простых рекомендаций:

  • Крайне желательно сопровождать все поля ввода (text, textarea, select, radio, checkbox) подписями, отражающими их назначение.
  • Связь между полем ввода и подписью осуществляется с помощью назначения полю ввода идентификатора и указания этого атрибута в специальном атрибуте подписи. Если всё сделано правильно, то при клике по подписи фокус ввода должен перейти на соответствующее поле ввода. Таким образом увеличивается область клика для выбора необходимого поля ввода.
  • Не надейтесь только на placeholder для описания назначения поля ввода, некоторые устаревшие браузеры не поддерживают этот атрибут поля ввода.
  • Кнопка (button) должна содержать текст, а если она содержит изображение, то сопроводите его альтернативным текстом (alt)
  • Несколько радиокнопок можно объединить в элементе fieldset. Первым элементом внутри fieldset является легенда.
  • Fieldset и Legend используются для группирования не только радиокнопок, но и других полей ввода.
  • Используйте специализированные поля ввода для ввода адреса электронной почты, URL, номера телефона и пр. Большинство мобильных устройств будет подстраивать клавиатуру под поле ввода, упрощающую ввод требуемой информации. Также проще делать проверку данных, например, адреса электронной почты. Если браузер, коих осталось мало, не поддерживает данные типы полей, то будет использован тип text.
  • Важно обеспечить навигацию по полям ввода с помощью клавиши Tab и Shift+Tab.
  • Для того, чтобы легче определить, какой элемент формы используется в данный момент, определите различные стили для элементов (фокус, пустое значение, неверное значение и пр.).

Структура документа

Заголовки

Использование заголовков делает документ более структурированным. Причём, важно использовать теги, предназначенные для создания заголовков: H1, H2, H3, H4, H5, H6, H7. Заголовок первого уровня должен быть один на страницу и принято, чтобы он содержал название документа. И далее по убыванию.

К сожалению, часто редакторы игнорируют иерархию, пропуская уровень,например, вместо H2 ставят сразу H3, аргументируя тем, что H2 «слишком крупный». Из-за такого недочёта в вёрстке страдает структура документа и комфорт для читателя.

Структурные элементы

В HTML5 есть достаточно семантических тегов, помогающих браузеру и сопутствующим программам правильно понять структуру документа. Такими структурными элементами являются: article, aside, footer, header, nav и main.

Списки

В HTML есть ненумерованный список и нумерованный список. Элементы списка могут быть вложенными и содержать другие списки, и всё это без проблем распознаётся браузером. Поэтому нет смысла делать списки помощью абзацев или строк, разделённых тегом br.

Прочее

Как известно, параграфы оформляются с помощью тега p. Но для длинных цитат лучше использовать blockquote, для коротких — q.

Таблицы

Первое, что стоит понять начинающим верстальщикам: таблицы — для табличных данных. Не нужно использовать их для того, чтобы организовать выравнивание блоков или вообще верстать сетку сайта. Таблицы нужны лишь для отображения каких-то упорядоченных данных: расписание, прейскурант, список характеристик товара, содержимое корзины в онлайн-магазине и пр.

  • Добавьте описание для таблицы с помощью caption.
  • Используйте th для заголовков колонок.
  • Если таблица получается громоздкой, не бойтесь разделить её на несколько.

В дополнение

Разделение понятий

HTML определяет структуру документа. Это то, что читают браузеры и программы для чтения текста с экрана.

CSS определяет визуальную часть: цвета, отступы, позиционирование. Всё это не имеет значения для программ для чтения с экрана (за некоторыми исключениями, например, скрытие элементов).

Кстати, текст в псевдоэлементах :before и :after также воспринимается программами для чтения текста с экрана, учтите это.

JavaScript ориентирован на динамическую функциональность, модифицирующую DOM.

Разделение этих вещей является хорошей практикой, влекущей лишь положительные моменты: лёгкость сопровождения, простота понимания структуры документа и снижение расходов.

  • Держите CSS в отдельных файлах и воздержитесь от использования атрибута style и устаревших атрибутов width, height, border и пр.
  • Разделяйте JS на модули и тоже держите всё в отдельных файлах, не нужно встраивать его в HTML.

Контраст и яркость

Важно позаботиться о том, чтобы текст был читабелен вне зависимости от условий, не лучшим образом предназначенных для чтения, и зрения читателя.

Версия для слабовидящих

Некоторые сайты, особенно государственные, имеют версию для слабовидящих. Это очень хорошее решение, так как можно не пытаться угодить всем одновременно и просто сделать несколько качественных версий оформления сайта. Единственное, что нужно предусмотреть — это простоту переключения между версиями, ведь нет смысла в версии для слабовидящих, если человек не найдёт, как на неё переключиться.

Увеличение содержимого

Не отключайте возможность приближения содержимого для мобильных браузеров. Даже если сайт адаптирован для мобильных устройств, есть небольшая доля пользователей, которым необходимо увеличить текст.

Виджеты

При использовании виджетов (вкладки, модальные окна и пр.) нужно предусмотреть различные ситуации, когда они не будут работать так, как предполагал. А вообще, если можно обойтись без них, то не используйте виджеты.

Семантика — наше всё

Как видите, HTML5 предлагает достаточно решений для структурирования веб-содержимого, делая его доступным более широкой публике.

Для слабовидящих

Если вдруг команда сайта не позаботилась о доступности своего сайта, то всегда можно использовать вспомогательные средства.

Расширения для браузера

В каталоге расширений популярных браузеров есть расширения, адаптирующие сайты для удобного чтения.

Режим чтения

В последних версиях Chrome для мобильных устройств есть «Режим чтения».

Режим чтения в Chrome
Режим чтения в Chrome

В заключение

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

Комментарии