|
В этой части учебника мы расскажем о некоторых способах, позволяющих сделать ссылки доступнее для людей с ограниченными физическими возможностями.
Использование клавиши "Tab"
Пользователи, которые не хотят или не могут использовать устройства управления графическим курсором (мышь), могут использовать клавишу "Tab" для перемещения по ссылкам, поэтому все ссылки должны располагаться в логически табулируемом порядке. Атрибут tabindex позволяет определять этот порядок, хотя если код страницы линеен, каким он и должен быть, логический порядок уже присутствует.
Ключи доступа
Ключи доступа облегчают навигацию по странице, присваивая ссылкам клавиши быстрого вызова (при нажатии пользователем комбинации "Alt" или "Ctrl"+"ключ доступа" соответствующая ссылка получает фокус). Для пользователей, не пользующихся мышью, такой способ позволяет гораздо быстрее достигать необходимой ссылки, чем использование клавишу "Tab".
Нет необходимости определять ключи доступа для всех ссылок, но для основных ссылок навигации они будут вовсе не лишними.
<a href="http://msiter.ru/somepage.html" accesskey="s">Другая страница</a>
Проблема с ключами доступа заключается в том, что пользователь не может определить, какой ключ доступа присвоен данной ссылке (разве что посмотреть исходный код веб-страницы). Самая популярная программа чтения текста с экрана – JAWS – громко проговаривает ключи доступа, однако скорее всего вам хотелось бы сделать их более явными.
Можно применить метод, похожий на метод "пропуска меню навигации" (см. ниже), или же ввести особые веб-страницы, которые будут разъяснять функциональность вашего сайта, относящуюся к его доступности для людей с ограниченными физическими возможностями, включая и ключи доступа. Еще один метод, приобретающий все большую популярность, - это подчеркивание соответствующей буквы в тексте ссылки. Данный метод аналогичен тому, который используется в меню большинства приложений Windows.
Титлы ссылок
Очень здорово использовать атрибут title, в котором будет определяться всплывающее описание того, куда ведет эта ссылка, что значительным образом улучшит пользовательскую навигацию.
Если же ссылка выполняет Javascript, то такое описание поможет объяснить тем пользователям, у которых отсутствует функциональность Javascript, что должно произойти (но не случится).
<a href="http://msiter.ru/" 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="http://msiter.ru/monster.html" onclick="return opennastypopup()" onkeypress="return opennastypopup()">Урод</a>
Смежные ссылки
Смежные ссылки должны отделяться друг от друга не одними только пробелами, чтобы их могли легко распознавать программы чтения с экрана.
Сделать это можно либо вставив между ссылками какие-нибудь символы (например, вертикальную черту – "ссылка | ссылка"), либо заключив их в какие-нибудь парные символы (например, квадратные ссылки – "[ссылка] [ссылка]"). Также будет неплохо, если меню навигации по сайту будет оформлено в виде списков. В дальнейшем их стиль можно настроить по своему желанию при помощи CSS, даже сделать их в одну линию (используя display: in-line).
Пропуск меню навигации
Вы должны предоставить пользователям программ чтения с экрана возможность пропускать меню навигации по сайту и переходить сразу к контенту. Так как если ваша система навигации последовательна (какой она должна быть), то пользователю нет необходимости прослушивать информацию, повторяющуюся на каждой странице, особенно если ее объем значителен. Осуществить пропуск меню можно, разместив перед ним специальную ссылку, которая будет вести прямо к содержимому страницы.
Выглядеть это может примерно следующим способом:
<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;), то эффект будет тот же, но при этом все программы чтения с экрана будут видеть такие ссылки.
|
