Урок 7

Время прохождения: 10 минут

Проверка семантики доступности

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

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

Семантическая вёрстка играет ключевую роль в обеспечении доступности интерфейса. Использование правильных HTML-тегов помогает пользователям определить, как взаимодействовать с теми или иными элементами страницы и быстро ориентироваться по её содержимому. Например, скринридеры понимают, что тег <button> является кликабельным элементом, и сообщают пользователю о возможности активации при нажатии клавиш Enter и Space.

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

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

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

Существует множество инструментов для проверки и тестирования доступности. В инструментах для веб-разработки в браузерах, таких как Chrome и Firefox, есть инспекторы доступности, позволяющие просматривать дерево доступности (так называемое accessibility tree) с ролями, свойствами и состояниями HTML-элементов.

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

Кроме того, существуют специализированные инструменты для тестирования доступности, такие как WAVE, TAW и Accessibility Valet. Они позволяют проводить более глубокую проверку доступности и выявлять сложные проблемы. 

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

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

Домашнее задание

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

Вы все поняли в уроке?