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

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

Вторая рекомендация. Веб-страница должна быть размечена корректно с точки зрения семантики, т. е. каждая из основных областей страницы сайта (шапка, меню навигации, основное содержимое и подвал), а также дополнительные области (сайтбары) должны иметь свои роли из стандарта WAI-ARIA (banner, navigation, main, contentinfo и т. д.).

При этом стоит отметить две вещи.

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

Стоит избегать использования специальных семантических тегов HTML (<header>, <footer>, <nav> и т. д.), так как при использовании вложенности одного тега в другой в некоторых браузерах и программах экранного доступа перестаёт читаться вложенная область. Скринридер не видит нужный ориентир. Стоит либо избегать таких вложенных областей, либо использовать роли из стандарта WAI-ARIA (role=»banner», role=»contentinfo», role=»navigation» и т. д.).

Третья рекомендация. Визуальные элементы, не несущие смысловой нагрузки в текстовой форме, будь то слайдеры, презентации, анимированные баннеры, должны быть скрыты при помощи обёртывания в контейнер с атрибутом aria-hidden=»true». Тут стоит отметить: данное требование не распространяется на графические изображения, которые выведены через тег <img/>.

Четвёртая рекомендация. Любое изображение, выводимое через тег, должно иметь либо атрибут alt=»текст», либо aria-label=»текст», но не содержать title=»текст» в случае использования одного из предыдущих атрибутов. Использование последнего атрибута вместо любого из первых двух не допускается, так как они не являются равноценными.

Пятая рекомендация. В случае, если графическое изображение выводится через background-image или любой подобный атрибут, но не через сам тег, сам тег с этим атрибутом должен иметь атрибуты role=»image» для указания скринридеру на тип «изображение» и aria-label=»название ссылки/кнопки».

Шестая рекомендация. Основная область, кроме роли основного контента, должна начинаться с заголовка, как правило, первого уровня. Также любая область должна начинаться либо с заголовка, либо должна быть обёрнута в тег <section> с указанием атрибута aria-label=»Название области».

Важно отметить: нельзя допускать использования заголовка и секции с лейблом, потому что синтезатор речи озвучит это в таком виде: «Название, область “Заголовок первого уровня”, название».

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

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

Восьмая рекомендация. При использовании комбобоксов и комбинированных списков в формах стоит либо стараться максимально упростить вёрстку формы, либо использовать WAI-ARIA роли — атрибуты, управляющие фокусом скринридера. Последний путь требует написания отдельных скриптов для отслеживания статуса списка (открыт\закрыт, на каком элементе по счёту находится курсор, какой элемент сейчас выбран).

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