Ошибки, влияющие на доступность сайта

Речь пойдет о некоторых распространенных ошибках разработчиков сайта. Это недоработки, которые могут показаться незначительными, безобидными. Но из этих мелочей складывается доступность (accessibility) сайта. Не только для здоровых людей, пользующихся современными браузерами и Интернетом с высокой скоростью соединения, неограниченных какими-либо политиками безопасности, но и для пользователей:

• использующих мобильные устройства;
• отключающих javascript или графику;
• с низкой скоростью соединения или ограниченным трафиком;
• с физическими ограничениями (слепые пользователи).

Шрифты в абсолютных единицах (px)

Пользователи не смогут увеличить шрифт с помощью настройки браузера. Правильнее использовать относительные единицы (em, %).

Общие таблицы стилей для всех типов устройств

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

Недоступный javascript

Часто, если у пользователя отключен JavaScript, он теряет часть функций:

• ссылки, открывавшиеся с помощью JavaScript перестают работать;
• не работают выпадающие меню;
• блоки, сформированные с помощью скрипта, не отображаются;
• становится недоступной информация, подгружаемая с помощью ajax.

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

Не указаны размеры (width, height) и альтернативные тексты (alt) для изображений

• Параметр alt используется поисковыми роботами. Его отсутствие может плохо сказаться на продвижении сайта.
• Alt-текст должен облегчать слепым пользователям (или тем, кто по какой-либо причине не может видеть изображения) навигацию по сайту и работу с информацией.
• Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением.
• Указание размеров ускоряет загрузку страницы, поскольку браузер не вычисляет размер каждого рисунка после его получения. Кроме того, браузер сможет загружать текст вокруг графики, без ожидания полной загрузки изображения.

Неинформативные всплывающие подсказки (title) и альтернативные тексты (alt)

Alt и title не просто должны присутствовать, а содержать полезную информацию, способствуя повышению доступности и удобства сайта. Alt кратко описывает содержание картинки. Title описывает назначение ссылки.

Например, для ссылки «подробнее» всплывающая подсказка может содержать название статьи, на которую попадёт пользователь. Обычно это подсказывает контекст. Но если слепой пользователь будет переключаться по ссылкам, используя голосовой браузер, он не отличит одну ссылку от другой.

Автор:
Ольга Завьялова

Метки:

• accessibility
• качество
• статьи