Невизуальная доступность вашего сайта для незрячих пользователей
Интернет стал неотъемлемой частью жизни сотен миллионов людей по всему миру. Это же утверждение верно и для тех, кто обладает плохим зрением или не имеет его вовсе. Так каким образом такие пользователи взаимодействуют со всемирной сетью?
Незрячие люди используют скрин ридеры: программы со звуковым интерфейсом, которые озвучивают информацию на экране их устройств при помощи синтезированной речи. Роботоризированный голос для нас уже давно не новость, но всё-таки мы зачастую не задумываемся над тем, насколько тяжело бывает обладателям подобных программ экранного доступа взаимодействовать с недоступными веб-ресурсами. А ведь обеспечить эту самую невизуальную доступность со стороны разработчика довольно просто.
О повышении юзабилити для незрячих пользователей рассказывает Надежда Василенко, сертифицированный специалист по невизуальной доступности Интернет-ресурсов, дипломированный веб-программист и автор тематического YouTube канала.
© На фото Надежда Василенко
Содержание статьи:
1. Адекватная разметка html.
Правильная гипертекстовая разметка — залог успеха невизуальной доступности. Это фундамент, на котором строится здание «Интернет-инклюзии». Есть простые правила и их следует выполнять для собственной же выгоды. Чистый код ещё никому не навредил: установка тега <h1> позволит поисковым системам производить коректную ранжировку Вашего сайта, а программы экранного доступа смогут определить элемент, как «заголовок первого уровня». Просто большой чёрный текст над статьёй вместо правильной разметки не добавит Вам «крутости» и не сэкономит время, а лишь добавит проблем в дальнейшем. Помните про валидацию кода, не брезгуйте этичностью его написания!
2. Семантическая разметка того же html
В html есть такие теги, которые визуально практически не изменяют вид веб-страницы при использовании, но очень помогают незрячим осуществлять быструю навигацию по веб-странице. К таким тегам относятся:
- <header> — шапка сайта.
- <nav> — область навигационного меню
- <main> — основная область сайта
- <article> — область статьи
- <footer> — подвал сайта.
Добавление этих тегов ускоряет процесс мониторинга сайта незрячими пользователями.
3. Описание изображений: атрибуты alt и title.
Не путайте атрибут title с одноимённым тегом. Это словечко используется наравне с alt для того, чтобы назначать описание изображениям на сайте. Они различаются лишь по реакции на действия пользователя с картинкой. В нашем случае они представляют интерес именно потому, что скрин ридеры при перемещении фокуса на графику берут информацию об изображении именно из них. Тут есть несколько замечаний:
- Подписана должна быть именно та графика, которая несёт смысловую нагрузку: виджеты социальных сетей, фотография к статье и т. д.
- Подпись должна отображать содержание картинки и не состоять из бессмысленного набора символов и цифр.
- Описание графики должно быть лаконичным и понятным для незрячего пользователя. Не надо расписывать все оттенки вечернего неба, сравнивая его с чем-то привычным именно для Вас. Достаточно будет обозначить факт самого заката и общий тон цветов, присутствующий на изображении.
4. Технология wai-area
На Хабре можно почитать по этой теме здесь. Зачем нужны ещё какие-то стандарты доступности, если программы экранного доступа, опираясь на DOM, строят собственное представление об открытом интернет-ресурсе для своего незрячего пользователя? Всё дело в динамических элементах, которые часто фигурируют в современном дизайне веб-страниц. Чаще всего, они написаны на java script. Это и пресловутые слайд-шоу, карусели, контекстные формы, исчезающие кнопки и прочие радости синтаксическо-сахарной жизни.
Но для кого: стильный внешний вид интернет-портала, а для кого: совершенно неопознанный веб-элемент. Вот тут-то и приходит на помощь стандарт, указанный вв заголовке выше. Что-то вроде надстройки разметки html, простой и лаконичный, а избавляет от множества писем со стороны незрячей аудитории, осаждающей техническую поддержку сайта гневными письмами.
Вместо послесловия
Почитайте руководство по обеспечению веб-ресурсов, составленное на основе госта 52872-2012 .
Сам гост читать не имеет смысла: он большой, загружен умными словами и неопределёнными фразами, по которым трудно понять, что именно требуется сделать в каких-то локальных моментах для обеспечения пресловутой невизуальной доступности.
Проще всего обратиться к специалисту в этой области, которых в России, к сожалению, довольно мало и дать ему возможность протестировать Ваш сайт на эту самую доступность.
Надежда Василенко, как профильный специалист по невизуальной доступности Интернет-ресурсов, поможет вашему веб-сайту стать более дружелюбным ко всем своим посетителям. По вопросам сотрудничества или получения консультации пишите на godfreedom.nv@yandex.ru или в сообщения ВКонтакте.
Удачи в разработке крутых проектов!
