Многие веб-разработчики все еще видят ужас в их глазах, когда кто-то предлагает добавить ключи доступа к их сайтам. Ну, не бойся. Эта статья очень короткая по очень веской причине. Если вы хотите их использовать, так легко добавить клавиши доступа, и вы удивитесь, почему вы никогда не делали этого раньше.
Ключи доступа определены
Итак, что такое accesskeys? Для непосвященных это средство, с помощью которого люди могут сразу перейти к определенной части HTML-страницы, нажав ALT (ПК) или CTRL (Mac), а затем соответствующую клавишу на клавиатуре, как определено вами с помощью параметра accesskey. ,
Они особенно полезны для людей с проблемами мобильности, которые не используют мышь и имеют клавиатуру для каждого движения на компьютере. Клавиши доступа позволяют им быстро и легко переключаться между содержимым ваших веб-страниц. Умелые пользователи могут найти их такими же полезными, как и ярлыки.
Мы перейдем к HTML через минуту, но, прежде чем мы это сделаем, стоит отметить, что дополнительные ключи доступа к контенту требуют от вас добавления. Бесполезно иметь ключи доступа, если люди не знают, кто они такие — вам нужно предоставить страницу, на которой перечислены ваши ключи доступа.
Имея это в виду, давайте возьмем действительно простой пример. Сайт www.buyfoos.com Он имеет область навигации и область содержимого. Навигация состоит из Home, About Foos, Buy Foos, карты сайта и формы обратной связи. Чего не хватает в этой навигации?
Страница деталей Accesskey!
Итак, вот код для домашней страницы. Я выделил биты, которые важны для нас:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>BuyFoos.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/mainstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="navigation">
<a href="index.html">Home</a> |
<a href="about.html">About Foos</a> |
<a href="buy.html">Buy Foos</a> |
<a href="sitemap.html">Site Map</a> |
<a href="feedback.html">Feedback</a> |
<a href="access.html">Accesskey Details</a>
</div>
<div id="content">
Welcome to buyfoos.com. Etc. Etc.
</div>
</body>
</html>
Теперь давайте добавим ключ доступа:
<div id="navigation">
<a href="index.html" accesskey="q">Home</a> |
<a href="about.html">About Foos</a> |
<a href="buy.html">Buy Foos</a> |
<a href="sitemap.html">Site Map</a> |
<a href="feedback.html">Feedback</a> |
<a href="access.html">Accesskey Details</a>
</div>
<div id="content">
Welcome to buyfoos.com. Etc. Etc.
</div>
Вот и все. ALT + Q на ПК или CTRL + Q на Mac теперь будут перенаправлять пользователей на домашнюю страницу. Хорошо, а?
Но что-то не совсем правильно. Клавиши доступа могут быть чем угодно, но они действительно должны иметь какой-то смысл. Стандарты были бы хороши на данный момент, но, увы, пока еще нет никаких. Тем не менее, я осмотрел ряд правительственных сайтов, а также сам W3C, чтобы увидеть, что эти организации делают на своих веб-сайтах. Этот совет ни в коем случае не заложен в камень, и, если вы думаете, что есть лучший способ, то во что бы то ни стало игнорируйте его, но довольно твердые стандарты «наилучшей практики» выглядят так:
H = Иди домой.
S = пропустить навигацию и перейти прямо к содержанию.
K = Перейти на страницу определений ключей доступа.
От 1 до 0 (например, 1, 2, 3… 8, 9, 0) = Основные элементы навигации, в нашем случае:
1 = О Фоос
2 = Купить Фос
3 = Карта сайта
4 = Обратная связь
Итак, если мы вернемся к нашему HTML, он может теперь выглядеть так:
<div id="navigation">
<a href="index.html" accesskey="h">Home</a> |
<a href="about.html" accesskey="1">About Foos</a> |
<a href="buy.html" accesskey="2">Buy Foos</a> |
<a href="sitemap.html" accesskey="3">Site Map</a> |
<a href="feedback.html" accesskey="4">Feedback</a> |
<a href="access.html" accesskey="k">Accesskey Details</a>
</div>
<div id="content">
<a href="#skip" accesskey="s"></a>
<a name="skip"></a>
Welcome to buyfoos.com. Etc. Etc.
</div>
И вот, пожалуйста. Обратите внимание, что для перехода к определенной области страницы я просто вставил безтекстовую ссылку рядом с именованным якорем, на который она нацелена.
И, наконец, для дальнейшего чтения, ознакомьтесь с этой статьей , которая выводит клавиши доступа на следующий уровень с помощью CSS.