1. В формах, размещенных на web-страницах сервиса, не должна использоваться капча с просьбой ввести код с картинки или перетащить графические элементы при помощи мыши без альтернативных методов прохождения капчи, как: - звуковая проверка
- текстовый вопрос
- текстовый математический пример
- флажок "я не робот"
- видимая или невидимая Recaptcha от Google, в которой совмещаются варианты А и Г
2. Web-страница должна быть размечена корректно с точки зрения семантики, то есть каждая из основных областей страницы сайта (шапка, меню навигации, основное содержимое и подвал), а также дополнительные области (сайтбары/etc) должны иметь свои роли из стандарта WAI-ARIA (banner, navigation, main, contentinfo and etc).
При этом стоит отметить две важные вещи: - Является достаточно важным не допускать вложенности таких областей на границе родительской области, потому что синтезатор речи, при заходе в новую область, прочитает о наличии родительской области и всех дочерних, начинающихся на том же месте.
- Стоит избегать использования специальных семантических тегов HTML (<header>, <footer>, <nav> и др.), так как при использовании вложенности одного тега в другой в некоторых браузерах и программах экранного доступа перестает читаться вложенная область. Скринридер не видит нужный ориентир. Стоит либо избегать таких вложенных областей, либо использовать роли из стандарта WAI-ARIA (role="banner", role="contentinfo", role="navigation" и др.).
3. Визуальные элементы, не несущие смысловой нагрузки в текстовой форме, будь то слайдеры, презентации, анимированные баннеры, должны быть скрыты при помощи обертывания в контейнер <div> с атрибутом aria-hidden="true". Важно! Данное требование не распространяется на графические изображения, выведенные через тег <img/>.
4. Любое изображение, выводимое через тег <img>, должно иметь либо атрибут alt="текст", либо aria-label="текст", но не содержать title="текст" в случае использования одного из предыдущих атрибутов. Использование последнего атрибута вместо любого из первых двух не допускается, так как они не являются равноценными.
5. В случае, если графическое изображение выводится через background-image или любой подобный атрибут, но не через тег <img/>, сам тег с этим атрибутом должен иметь атрибуты role="image" для указания скринридеру на тип "изображение" и aria-label="название ссылки/кнопки". 6. Основная область кроме роли основного контента должна начинаться с заголовка, как правило, первого уровня. Также, любая новая область должна начинаться либо с заголовка, либо должна быть обернута в тег <section> с указанием атрибута aria-label="Название области".
Важно! Нельзя допускать использования заголовка и секции с лейблом, потому что синтезатор речи озвучит это в таком виде: "Название" область заголовок уровня 1 "Название".
7. Создание отдельной текстовой версии сайта с отключенными изображениями и возможностью изменять параметры шрифта является крайне нежелательным, потому что настройки шрифтов сейчас присутствуют в каждом браузере и в каждой операционной системе (на глобальном уровне),
а для незрячих отключение картинок даже вредит, потому что нет возможности полноценно взаимодействовать с сайтом. Как показывает практика, такие специальные версии не обновлялись с момента создания и не включают даже десятой доли других требований по доступности, не говоря уже о новом функционале, появившемся в полных версиях сайтов.
8. При использовании комбобоксов и комбинированных списков в формах стоит либо стараться максимально упростить верстку формы, либо использовать WAI-ARIA роли, атрибуты, управляющие фокусом скринридера. Последний путь требует написания отдельных скриптов для отслеживания статуса списка (открыт/закрыт, на каком элементы по счету находится курсор, какой элемент выбран).
Важно! Не допускается использование голой верстки - ролей списков и комбобоксов без скриптов, управляющих курсором скринридера.