Опубликовано: 25.06.2010 Последняя правка: 08.12.2015

Атрибут accesskey

Атрибут accesskey устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе или его активации, это зависит, как от типа самого элемента, так и от настроек и типа браузера. Например, при фокусировке на ссылке созданной тегом <A>, скорее всего, произойдет переход по указанному в ней адресу, то же самое случится и с элементом <BUTTON>. А вот для текстовых полей формы, созданных с помощью тега <INPUT> браузеры просто установят курсор внутри поля.

В браузерах активация или фокусировка происходит при помощи различных сочетаний клавиш, например: Alt+«цифра или буква» (Internet Explorer, Google Chrome, Safari), Alt+Shift+«цифра или буква» (Mozilla Firefox), Shift+Esc+«цифра или буква» (Opera) и т.д.

Атрибут accesskey появился в HTML довольно давно, но раньше он поддерживался ограниченным количеством тегов, а теперь он есть у всех. Поэтому, если на страницах описания каких-то тегов вы увидите логотип HTML 5 () напротив атрибута, то знайте, что этот тег начал поддерживать данный атрибут именно с версии HTML 5. C другой стороны, хоть в HTML 5 теперь все теги могут иметь этот атрибут — не факт, что браузеры его будут также понимать во всех случаях. Более того, в описаниях W3C также нет конкретики по данному вопросу, например о том, для чего использовать атрибут accesskey в параграфах (тег <P>).

Значения

Значением атрибута является одиночная цифра (0-9) или какая-либо буква.

Значение по умолчанию: нет.

Если в качестве значения вы выбрали букву, то должны учитывать, что у пользователей на клавиатуре может не быть данного символа. Например, если ваш сайт ориентирован на англоязычную и русскоязычную публику, то лучше выбрать латинскую букву. А если только на русскоязычную — вполне подойдет и кириллица. Кроме этого, в браузере какой-либо символ может быть уже занят, например для активации пункта его меню. Конечно в любом случае выбор за вами — просто помните об этом.

Синтаксис

<button accesskey="значение">...</button>
<label accesskey="значение">...</label>
<a href="URL" accesskey="значение">...</a>

Обязательный атрибут: нет.

Пример HTML: применение атрибута accesskey к тегу A

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Тег A, атрибут accesskey</title>
 </head>
 <body>
  <p><a href="https://seodon.ru" accesskey="s">Главная страница Сеодон.ру</a></p>
  <p><a href="files/hello.html" accesskey="h"><img src="images/hello.png" alt="Привет - Вебмастер!"></a></p>
 </body>
</html>

Результат примера

Пример HTML: применение атрибута accesskey к тегу INPUT

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Тег INPUT, атрибут accesskey</title>
  <script type="text/javascript">
   function foncolor(color) {
    document.bgColor=color;
    alert("Ваш любимый цвет " + color + "!");
   }
  </script>
 </head>
 <body>
  <p>Выберите любимый цвет:<br>
   <input type="button" accesskey="r" value="Red" onClick="foncolor('red')">
   <input type="button" accesskey="g" value="Green" onClick="foncolor('green')">
   <input type="button" accesskey="b" value="Blue" onClick="foncolor('blue')">
  </p>
 </body>
</html>

Результат примера

Пример HTML: применение атрибута accesskey к тегу AREA

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Тег AREA, атрибут accesskey</title>
 </head>
 <body>
  <p><img src="images/wild.png" width="640" height="142" usemap="#header"
          alt="Салон красоты Wild kitties">
   <map name="header">
    <area href="files/home.html" shape="poly" coords="19,71,104,71,109,85,104,98,19,98,11,85"
          accesskey="h" alt="Главная">
    <area href="files/novosti.html" shape="poly" coords="126,71,211,71,216,85,211,98,126,98,118,85"
          accesskey="n" alt="Новости">
    <area href="files/uslugi.html" shape="poly" coords="233,71,318,71,323,85,318,98,233,98,225,85"
          accesskey="u" alt="Услуги">
    <area href="files/o_nas.html" shape="poly" coords="339,71,424,71,429,85,424,98,339,98,331,85"
          accesskey="o" alt="О нас">
   </map></p>
 </body>
</html>

Результат примера

Пример HTML: применение атрибута accesskey к тегу LABEL

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Тег LABEL, атрибут accesskey</title>
  <style type="text/css">
   .under { 
    text-decoration: underline; /* задаем подчеркивание текста через CSS */
   }
  </style> 
 </head>
 <body>
  <form action="files/questions.php">
   <p>Что вы любите?<br>
    <label accesskey="ч"><input type="checkbox" name="food" value="1">
	 <span class="under">Ч</span>ай</label><br>
	 
    <label accesskey="к"><input type="checkbox" name="food" value="2">
	<span class="under">К</span>офе</label><br>
	
    <label accesskey="п"><input type="checkbox" name="dance" value="3">
	<span class="under">П</span>отанцуем</label></p>
   <p><input type="submit" name="ok" id="go" value="Отправить"></p>
  </form>
 </body>
</html>

Результат примера

На странице с данным HTML-кодом пользователи русскоязычного Internet Explorer не смогут активировать пункт меню браузера — «Правка». Так как по умолчанию он активируется сочетанием клавиш Alt+«п», а мы данное сочетание переопределили.

Поддержка версиями HTML

Версия:	HTML 4.01	HTML 5	XHTML 1.0	XHTML 1.1
Поддержка:	Да	Да	Да	Да

Поддержка браузерами

Браузер:	Internet Explorer	Google Chrome	Mozilla Firefox	Opera	Safari
Версия:	6.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Да	Да	Да	Да	Да