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

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

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

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

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

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

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

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

Заголовки

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

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

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

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

Списки

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

Прочее

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

Таблицы

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

В дополнение

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

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

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

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

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

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

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

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

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

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

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

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

Виджеты

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

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

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

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

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

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

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

Режим чтения

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

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

В заключение

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

Комментарии