Атрибут accesskey тега <figure>

Описание

Атрибут accesskey в теге <figure> позволяет назначить горячую клавишу для быстрого доступа к группе изображения с подписью. Это улучшает доступность для пользователей, работающих с клавиатурой.

Пример использования:
<figure accesskey="f"> <img src="chart.png" alt="График продаж"> <figcaption>Рисунок 1. Динамика продаж за 2025 год</figcaption> </figure>

Сочетания клавиш по платформам:

Платформа Комбинация Пример
Windows Alt + клавиша Alt + F для примера выше
macOS Control + Option + клавиша ⌃ + ⌥ + F
Linux Alt + клавиша Alt + F

Рекомендации по использованию:

  • Используйте мнемонические клавиши (F для Figure)
  • Избегайте конфликтов с системными сочетаниями
  • Документируйте горячие клавиши для пользователей
  • Ограничьте 1-2 accesskey на странице

Пример с визуальной подсказкой:

<style> .access-key-hint { border-bottom: 1px dotted; cursor: help; } </style> <figure accesskey="i"> <img src="infographic.png" alt="Инфографика"> <figcaption> <span class="access-key-hint" title="Быстрый доступ: Alt+I">И</span>нфографика 1. Основные показатели </figcaption> </figure>

Особенности работы:

  • Фокусирует весь элемент <figure>
  • Позволяет быстро переходить между изображениями
  • Работает совместно с другими интерактивными элементами
  • Может быть полезен для слабовидящих пользователей

Ограничения:

  • Поддержка зависит от браузера
  • Мало полезен на мобильных устройствах
  • Может конфликтовать с другими сочетаниями клавиш
  • Требует дополнительного объяснения для пользователей

Примечание: Для сложных интерфейсов с множеством изображений лучше использовать семантическую навигацию с TAB и ARIA-ролями. Атрибут accesskey стоит применять только для ключевых элементов страницы.