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