По статистике порядка 39 миллионов людей полностью слепы, а 246 миллионов имеют крайне плохое зрение. В сумме цифры не могут не впечатлять: порядка 285 миллионов людей с проблемами зрения по всему миру. Однако мы живем в век информационных технологий, когда интернет стал неотъемлимой частью жизни человека. Как же все эти люди им пользуются? Алеся Попкова, ведущий QA специалист, поделилась важными рекомендациями, как сделать веб доступным для незрячих и слабовидящих людей.
Инструменты взаимодействия
Безусловно, благодаря технологическому прогрессу у незрячих и слабовидящих людей появилось немало средств для использования интернета. Основными из них являются:
- Клавиатура. Люди с проблемами зрения не используют мышку – все взаимодействие происходит посредством клавиатуры;
- Устройства Брайля. Устройства, на которых информация вводится и отображается с помощью специального рельефно-точечного шрифта, разработанного Луи Брайлем;
- Программы экранного доступа (Screen Readers). Эти программы вначале считывают информацию на экране компьютера, а потом выводят ее на дисплей Брайля, либо преобразовывают в устную речь.
По сравнению с устройствами Брайля, скринридеры можно приобрести по более доступным ценам, чем и объясняется их популярность среди незрячих пользователей. Именно поэтому мы с вами сосредоточим наше внимание на них.
Виды скринридеров
Работа со скринридерами достаточно проста: нужно его скачать, запустить и он начнет читать то, что находится в данный момент в фокусе. Большинство скринридеров читают не только веб-страницы, но и «доступные» десктопные приложения. Самыми популярными из них являются:
- JAWS. Платный скринридер: одна его лицензия стоит порядка 1000$. Из-за его дороговизны, а также наступающих на пятки конкурентов, JAWS постепенно теряет свою популярность;
- NVDA. Бесплатный скринридер с открытым кодом. За последние годы эта программа сделала большой скачок в развитии и во многих вещах она совсем не уступает платному JAWS;
- VoiceOver. Один из самых популярных ридеров пользователей Mac OS, встроенный в систему.
Существуют устоявшиеся комбинации браузера и скринридера. К примеру, пользователи JAWS в своей работе чаще используют Internet Explorer, а пользователи NVDA – Firefox. В частности, Internet Explorer (версии 10 и выше) и Firefox очень популярны у незрячих людей. Остальные же браузеры большим спросом не пользуются.
Правила и стандарты обеспечения доступности
Так в чем же проблема использования веб-приложений, если уже существуют такие программы, считывающие информацию с экрана компьютера? Дело в том, что далеко не все веб-приложения построены в соответствии со стандартами в области обеспечения доступности – отсюда и корни всех проблем.
Одним из самых широкоиспользуемых руководств является Web Content Accessibility Guidelines 2.0. Данное руковоство подготовлено организацией World Wide Web Consortium, которая занимается разработкой стандартов в области интернет-технологий. Оно содержит рекомендации, как сделать интернет более доступным – и не только для незрячих пользователей, но и для любых людей с ограниченными возможностями.
Другой популярный стандарт – это WAI ARIA, также разработанный WWW Consortium. WAI ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) является широко используемой технологией для скринридеров. Он дает возможность вставить в код определенные атрибуты, которые в интерфейсе никак не отобразятся, но для скринридеров будут видны. Этот стандарт поддерживается большинством браузеров. Чаще всего его используют для динамического контента, написанного с помощью AJAX, динамического HTML и т.д.
Рекомендации по разработке доступных веб-страниц и приложений
«Доступное» приложение должно предоставлять своим пользователям следующие возможности:
- Быстрая и легкая навигация по контенту страницы;
Для этого необходимо:
- Задать веб-странице семантическую структуру;
Задается она либо посредством тегов в HTML5, либо с помощью WAI ARIA атрибутов. Семантическая структура позволяет незрячему пользователю нарисовать веб-страницу у себя в воображении и обеспечивает более легкую навигацию. Так, пользователь проходит по всем логическим блокам и, при необходимости, может быстро перейти к любому из них. - Добавить ссылки «skip to content link»;
В случае повторяющегося от страницы к странице контента (напр. Navigation Menu), для удобства пользователей лучше дать им возможность пропускать его через ссылку «skip to content link». - Сделать перемещение по странице логичным и последовательным;
Ситуация, когда пользователь хаотично перемещается по странице, с самого верха на самый низ, должна быть исключена. - Давать описательные названия страницам;
Звучит очевидно, однако это немаловажный момент. Первое, что слышит пользователь со скринридером – это page title, поэтому название страницы должно сразу его соориентировать.
2. Управление всей функциональностью посредством клавиатуры;
Очень важно, чтобы у незрячего пользователя была возможность выполнить любое действие посредством клавиатуры, т.к. она является для него основным источником ввода информации.
3. Одинаковый доступ как для зрячих, так и для незрячих пользователей;
Для этого задаются всевозможные описательные элементы, поясняющие характер того или иного контрола, с которым столкнулся пользователь. А именно:
- Лейблы, которые описывают определенный контрол;
Для доступности приложения у всех контролов формы обязательно должен присутствовать соответствующий лейбл, который описывает данный контрол. Это касается чек-боксов, радиокнопок, выпадающих списков, полей для ввода и т.д. - Field sets;
Группы чек-боксов и радиокнопок должны быть организованы как field sets с соответствующей легендой. - Заполненный атрибут alt;
Далее, обязательно заполняйте атрибут alt для каждой картинки и делайте его описательным. Атрибут alt – это описание того, что изображено на картинке. Исключение составляют картинки без особого смысла (напр., разделительные линии для декораций). Для них артибут alt можно оставлять пустым. - Заполненный атрибут href;
Атрибут href тоже необходимо не забыть заполнить для всех ссылок. Более того, названия ссылок должны быть «говорящими». “Click me”, “View more” и тому подобное не несет никакого смысла для незрячих пользователей. Такие названия лучше всего менять и подстраивать специально под скринридер.
4. Помощь пользователю в определении и исправлении ошибок;
У незрячего пользователя нет возможности увидеть, что произошла ошибка. Здесь на помощь приходят атрибуты WAI ARIA, которые могут не только сообщить об ошибке, но и определить ее вид.
- Атрибут aria-invalid для обнаружения контрола с ошибкой;
Благодаря этому атрибуту как только пользователь перейдет в контрол с ошибкой, скринридер ему сразу же сообщит, что в нем «невалидный ввод».
- Атрибут aria-describedby для озвучивания вида ошибки;
Также, необходимо ассоциировать текст ошибки с тем контролом, который к ней привел, с помощью aria-describedby. Тогда озвучится текст ошибки как только пользователь перейдет к контролу (напр. вы ввели некорректный символ).
- Атрибут aria-live для своевременного сообщения об ошибке;
Наконец, для того чтобы скринридер сообщал об ошибке как только она произошла, можно добавить атрибут aria-live в область с возникшей ошибкой.
Вышеизложенные рекомендации – это лишь часть способов, как сделать интернет более доступным для незрячих и слепых пользователей. Однако выполнение хотя бы их будет уже немалой помощью для людей с ограниченными возможностями.
Алеся Попкова, ведущий QA специалист ISsoft.
