aria-keyshortcuts

Как рассказать пользователю вспомогательной технологии о вашем сочетании клавиш.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Глобальное свойство из WAI-ARIA для описания горячих клавиш, с помощью которых можно выполнить команду или сделать фокус на элементе.

Пример

Секция статьи "Пример"
        
          
          <button  aria-keyshortcuts="Shift+F"  aria-label="Развернуть на весь экран">  <img src="expand-icon.svg" alt=""></button>
          <button
  aria-keyshortcuts="Shift+F"
  aria-label="Развернуть на весь экран"
>
  <img src="expand-icon.svg" alt="">
</button>

        
        
          
        
      

Скринридер прочтёт код примерно так: «Развернуть на весь экран, кнопка. Shift плюс F».

Как пишется

Секция статьи "Как пишется"

Добавьте к тегу атрибут aria-keyshortcuts с нужным сочетанием клавиш в виде строки текста. aria-keyshortcuts можно использовать для всех тегов и ролей, кроме элементов с атрибутами disabled или aria-disabled.

Лучше добавлять сочетания клавиш для элементов, с которыми взаимодействуют пользователи. Например, для кнопок паузы, воспроизведения или включения субтитров в плеере, якорных ссылок и похожих элементов.

Названия клавиш из одного сочетания разделяйте знаком плюс — +.

        
          
          <button aria-keyshortcuts="Shift+D">Загрузить документ</button>
          <button aria-keyshortcuts="Shift+D">Загрузить документ</button>

        
        
          
        
      

В сочетании на первом месте должны стоять клавиши-модификаторы. Например Alt, Shift или Control. Их нельзя использовать без других клавиш с буквами, цифрами или знаками.

        
          
          <!-- ⛔ Неправильные сочетания клавиш --><button aria-keyshortcuts="S+Alt+Shift">Покричать в лесу</button><button aria-keyshortcuts="Alt">Покричать в лесу</button><!-- ✅ Правильные сочетания клавиш --><button aria-keyshortcuts="Alt+Shift+S">Покричать в лесу</button><button aria-keyshortcuts="Shift+Alt+S">Покричать в лесу</button>
          <!-- ⛔ Неправильные сочетания клавиш -->
<button aria-keyshortcuts="S+Alt+Shift">Покричать в лесу</button>
<button aria-keyshortcuts="Alt">Покричать в лесу</button>

<!-- ✅ Правильные сочетания клавиш -->
<button aria-keyshortcuts="Alt+Shift+S">Покричать в лесу</button>
<button aria-keyshortcuts="Shift+Alt+S">Покричать в лесу</button>

        
        
          
        
      

Буквы в сочетаниях могут быть маленькими и большими.

        
          
          <!-- ✅ Оба варианта правильные --><button aria-keyshortcuts="Alt+Shift+s">Покричать в лесу</button><button aria-keyshortcuts="Shift+E">Покричать про себя</button>
          <!-- ✅ Оба варианта правильные -->
<button aria-keyshortcuts="Alt+Shift+s">Покричать в лесу</button>
<button aria-keyshortcuts="Shift+E">Покричать про себя</button>

        
        
          
        
      

Когда указываете несколько сочетаний горячих клавиш, разделяйте их пробелами.

        
          
          <button aria-keyshortcuts="Alt+Ctrl+S Shift+ArrowDown">Скачать файл</button>
          <button aria-keyshortcuts="Alt+Ctrl+S Shift+ArrowDown">Скачать файл</button>

        
        
          
        
      

Если используете знак, замените его на соответствующую цифру с клавиши. Например, вместо % укажите 5.

        
          
          <a href="#main" aria-keyshortcuts="Alt+5">К основному содержимому</a>
          <a href="#main" aria-keyshortcuts="Alt+5">К основному содержимому</a>

        
        
          
        
      

Когда нужен знак с клавиши без цифры, лучше использовать символ-мнемонику (HTML entity). Например, вместо апострофа указать &#39;.

        
          
          <a href="#main" aria-keyshortcuts="Alt+&#39;">К основному содержимому</a>
          <a href="#main" aria-keyshortcuts="Alt+&#39;">К основному содержимому</a>

        
        
          
        
      

Список стандартных значений клавиш найдёте в спецификации UI Events KeyboardEvent.

Не забывайте слушать нажатия на клавиши с помощью .addEventListener(). Благодаря aria-keyshortcuts пользователи скринридеров узнают, что с элементом можно взаимодействовать как-то ещё. Атрибут не добавляет нужную функциональность.

Несколько важных правил при работе с aria-keyshortcuts:

  • Не перезаписывайте сочетания клавиш, которые уже есть в браузерах, вспомогательных технологиях и операционных системах. Например, Ctrl C копирует выделенный текст.
  • Учитывайте особенности раскладок и языков. Например, во французской раскладке нужно зажать Shift и нужную клавишу с цифрой, чтобы ввести число.
  • Лучше рассказывать о горячих клавишах всем людям, не только пользователям вспомогательных технологий. К примеру, в тексте на странице или во всплывающей подсказке.
  • Не используйте много сочетаний клавиш, это только усложнит взаимодействие с элементами на странице.

Подробнее про выбор горячих клавиш узнаете из Developing a Keyboard Interface.

Как понять

Секция статьи "Как понять"

Сочетание клавиш, горячие клавиши или шорткат — это способ выполнения команды, когда для неё зажимают одну или нескольких клавиш на клавиатуре.

Горячие клавиши ускоряют работу пользователей клавиатуры и даже тех, кто в основном пользуется мышкой и другими указателями.

aria-keyshortcuts пригодится в случаях, когда нужно рассказать пользователям вспомогательных технологий о том, что они могут взаимодействовать с элементом с помощью определённого сочетания клавиш. К примеру, видео часто разворачивается на весь экран при нажатии на F.

Подсказки

Секция статьи "Подсказки"

💡 aria-keyshortcuts похож на HTML-атрибут accesskey, но поддержка ARIA-атрибута лучше, а поведение более предсказуемое и не отличается в зависимости от браузера.