CSS, HTML и многое другое…

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

Обеспечивать доступность просто означает обеспечивать некоторую гибкость интерфейса, чтобы удовлетворять потребностям и предпочтениям каждого пользователя. В контексте интернета доступность делает и компьютерную технологию в принципе, и ресурсы интернета в частности, полезными для большего количества людей чем иначе могло бы быть. Мы нуждаемся в доступности интернета, потому что это ра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