#dailyUI #007 Settings panel

Доступность сайтов для самых маленьких

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

Тим Бернерс-Ли, Директор W3C и изобретатель Интернета

Ссылка на твит

Почему так важно помнить о доступности?

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

Уровни доступности

В спецификации выделяются три уровня требований к сайту: А (низший), АА (средний) и ААА (наивысший). При выполнении всех требований с маркером А вы сделаете сайт, доступный людям без отклонений и с легкими отклонениями. Выполнив все три уровня требований вы сделаете свой сайт доступным для абсолютно всех людей, за редким исключением.

Принципы

В основе идеи доступности веба лежат четыре принципа: воспринимаемость, управляемость, понятность и надежность.

Рекомендации

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

  1. Дайте возможность увеличить шрифт, если основным контентом сайта является текст. А вообще всегда давайте такую возможность.
  2. Скрывайте от читалок и навигации с клавиатуры оформительский контент. При перемещении по сайту Tab’ом я бы не хотела застрять на каком-нибудь вензеле вместо попадания на нужную кнопку.
  3. Контент должен оставаться логичным и понятным при его адаптации. Например, при упрощении макета страницы, отключении css-стилей и картинок. Восприятие не должно зависеть от формы, размера или оформления контента.
  4. Предоставьте возможность управления всеми функциями при помощи клавиатуры. При этом не должно мешать естественной навигации и взаимодействию при помощи мыши.
  5. Не используйте на сайте мигающих элементов. Или ограничьтесь тремя вспышками. Часто мигающие элементы могут вызвать эпилептический припадок или привести к нежелательным последствиям у людей с нарушениями психики.
  6. Помогайте пользователю понять где он находится. Используйте так называемые “хлебные крошки”, указывая на то, какой путь он проделал вглубь сайта начиная с главной страницы.
  7. Каждая страница имеет заголовок, из которого понятно ее содержание.
  8. Не пугайте пользователя непредсказуемым поведением страницы. Ярким примером могут послужить различные всплывающие окна с предложениями акций и т.д. Посетитель пришел читать статью, а не смотреть на внезапно возникающие всплывающие окна, закрывающие пол экрана.
  9. Помогайте пользователям с вводом информации и по возможности исправляйте ошибки. Если требуется ввести название города, то после ввода первой буквы предлагайте список вариантов. Или если название было введено английскими буквами предлагайте вариант названия города, но на русском языке.
  10. Следите за чистотой собственного кода. Всегда используйте закрывающие теги, даже там, где они не обязательны и их отсутствие не ведет к “поломке” верстки. Все теги используются согласно своей роли в спецификации, нет повторяющихся идентификаторов или атрибутов (в рамках одного тега).

Заключение

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

Полезные ссылки:

Две доступности, или почему accessibility и availability не одно и то же

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC