Поскольку всемирная паутина cтремится к тому, чтобы стать универсальной информационной средой, необходимо учитывать ряд факторов, делающих веб доступным для каждого. На сегодняшний день большое количество телевизионных программ, в большей степени западных выходят с субтитрами, сооружения сделаны с учетом людей, передвигающихся с помощью инвалидных колясок, люди с ослабленным зрением имеют возможность прослушивать книги и журналы. Поэтому нужно использовать те же принципы в веб-разработке.
Существует много способов сделать сайт доступным и простым в использовании.
Табуляция
Пользователи с ограниченными возможностями могут перемещаться между ссылками с помощью табуляции (клавиша tab). Поэтому ссылки в табуляции должны быть в логически правильном порядке. С помощью атрибута tabindex можно установить порядок перемещения между ссылками, даже если страница имеет нелинейную структуру.
Горячие клавиши
Горячие клавиши обеспечивают более быстрый и легкий доступ к ссылкам, т.к. ссылки привязаны к конкретным клавишам на клавиатуре (обычно для этого необходимо нажать Alt или Ctrl + клавиша). Для пользователей с ограниченными возможностями этот метод является более предпочтительным чем перемещение между ссылками.
Не обязательно привязывать горячие клавиши ко всем ссылкам, но это необходимо сделать хотя бы для основного меню.
<a href="somepage.html" accesskey="s">Страница</a>
Проблема горячих клавиш в том что часто пользователь не предполагает наличие такой возможности. Наиболее распространенные устройства чтения с экрана будут читать эти ссылки вслух, но чтобы воспользоваться ими в полной мере необходимо показать пользователям, что данная возможность присутствует на сайте.
Можно применить метод «пропуск навигации» рассмотренный ниже, или создать отдельную страницу где будет описана возможность использования горячих клавиш. Еще один метод, набирающий популярность заключается в подсвечивании горячей клавиши при наведении на ссылку, так как это делается в большинстве Windows приложений. Для дополнительной информации прочитайте соответствующую статью на A List Apart.
Атрибут title
Атрибут title в ссылке показывает куда ведет ссылка.
Если ссылка используется для вызова сценария Javascript, необходимо объяснить что должно произойти тем пользователям у кого отключена поддержка скриптов.
<a href="#" onkeypress="opennastypopup()" onclick="opennastypopup()" title="Открыть всплывающее окно">Окно</a>
Всплывающие окна
Если вы решили использовать у себя на сайте всплывающие окна, то и их можно сделать более доступными используя onkeypress так же как и onclick. Кроме того если вы вставите адрес страницы в значение атрибута href и return false в функцию вызывающую всплывающее окно, пользователи без поддержки скриптов будут переходить на страницу в любом случае. Например:
<script type="text/javascript"> function opennastypopup() { window.open("monster.html", "", "toolbar=no,height=100,width=200"); return false; } </script> ... <a href="monster.html" onkeypress="return opennastypopup()" onclick="return opennastypopup()">Страница</a>
Смежные ссылки
Смежные ссылки должны быть разделены помимо пробелов чем то еще, для того чтобы устройства чтения с экрана могли их отличать. Для этого можно использовать специальные символы между ссылками (например – ссылка | ссылка) или обернуть ссылки (например – [ссылка] [ссылка]). Также можно поставить ссылки между элементами списка.
Пропуск навигации
Вы должны предоставить пользователям использующим специальные устройства чтения с экрана возможность пропустить навигацию и перейти непосредственно к содержимому. Это необходимо для того чтобы пользователь не проходил одно и тоже место несколько раз, в случае если навигационное меню повторяется на разных страницах. Для этого можно разместить перед меню ссылку на основное содержимое. Примерно вот так:
<a href="#content" accesskey="n">Ссылка на содержимое</a> <div id="navigation"> <!--Навигационное меню --> </div> <div id="content"> <!--Основное содержимое --> </div>
Скорее всего вы захотите скрыть эту ссылку от визуальных браузеров. Самый очевидный способ это использование display: none, но некоторые устройства чтения с экрана не прочитают такую ссылку. Выходом является придание ссылке нулевого значения ширины и высоты (width: 0; height: 0; overflow: hidden). Это придаст нужный визуальный эффект и устройства чтения с экрана будут нормально читать такую ссылку.
Источник: Accessible Links
