Enter
    Расширенный поиск
    Клавиша / esc

    Доступность

    aria-keyshortcuts

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

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

    Кратко

    Скопировано

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

    Пример

    Скопировано
            
          
          <button aria-keyshortcuts="Shift+F">  Развернуть</button>
          <button aria-keyshortcuts="Shift+F">
  Развернуть
</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-атрибута лучше, а поведение более предсказуемое и не отличается в зависимости от браузера.

    Читайте также