a11y

a11y = A[ccessibilit]y (доступность)

Очень характерно, что страница википедии посвященная вопросу “Как сделать компьютеры доступнее для людей с ограниченными возможностями” есть только на английском и некоторых других языках. И начисто отсутствует на русском. Российские слабослышащие, слабовидящие, люди с нарушениями двигательных функций никому кроме себя у нас не нужны. Переход через дорогу, магазин, или программное обеспечение, даже больницы – все у нас проектируется в расчете на здоровых и сильных, и пусть радуются что вообще хоть что-то делается. А по правде сказать – ничего у нас вообще не проектируется для удобства людей. Просто здоровым и сильным это не так заметно.

Рассмотрим, как же эта тема касается разработки расширений для браузера Chrome

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

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

Используйте элементы интерфейса с поддержкой a11y

Стандартные элементы HTML форм давно уже разрабатываются с учетом требований доступности. Они легко масштабируются, управляются с помощью клавиатуры и нормально распознаются специальными устройствами чтения. Не злоупотребляйте нестандартными элементами. Да, иногда можно сделать красиво и оригинально, но лучше сделать просто и удобно.

Если же вы разрабатываете что-то свое, нестандартное, то стоит познакомиться со спецификацией ARIA, это стандарт консорциума W3C. Самое простое что можно сделать, это добавить в свою разметку HTML указание о назначении ее элементов. Вот так:

<div role="toolbar" tabindex="0" aria-activedescendant="button1">
  <img src="buttoncut.png" role="button" alt="cut" id="button1">
  <img src="buttoncopy.png" role="button" alt="copy" id="button2">
  <img src="buttonpaste.png" role="button" alt="paste" id="button3">
</div>

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

Доступ с клавиатуры

Представьте что вы не можете использовать мышь или другое подобное устройство. Возможно ли использование вашего расширения, когда есть только клавиатура?

Фокус

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

Горячие клавиши

Они заданы? Вы используете стандартные, привычные пользователю сочетания? Есть подсказки, какие клавиши можно использовать?

Доступный контент

Хороший способ проверить гибкость вашего пользовательского интерфейса – увеличить размер  текста на 200%. Удобно? Все помещается, верстка не съехала? Если так, вам плюс в карму и есть шансы, что следующую жизнь вы проведете не баобабом.

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

Цвет

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

Звук, видео, картинки

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