Семантика и ARIA — Примеры

Пример 1 — Кнопка из одной иконки без имени

Элемент закрытия диалога — кнопка, всё содержимое которой составляет иконка SVG, поэтому для неё ничего не объявляется. Скажите, что сообщит скринридер, и дайте элементу имя, не добавляя видимого текста.

<button type="button" class="close">
  <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" /></svg>
</button>

Решение

<button type="button" class="close" aria-label="Закрыть диалог">
  <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
    <path d="M6 6l12 12M18 6L6 18" />
  </svg>
</button>

До исправления элемент объявляется как «button» без имени: пользователь знает, что что-то фокусируемо, и ничего не знает о том, что оно делает. После исправления объявленная роль и имя — «button, Закрыть диалог»: роль по-прежнему даёт сам элемент, а имя — aria-label, потому что текстового содержимого, откуда его взять, нет. Иконка удалена из дерева доступности через aria-hidden, и это правильно именно потому, что смысл теперь несёт сама кнопка; скрытие фокусируемого элемента вместо неё оставило бы пользователя табулировать в тишину. Видимый текст всегда предпочтительнее, а кнопка из одной иконки — тот случай, когда атрибут действительно нужен.

Пример 2 — div, притворяющийся кнопкой

Элемент управления, открывающий меню, собран из div с обработчиком клика и добавленной ролью. С виду и на слух он правилен и всё равно не работает с клавиатуры. Объясните, что атрибут роли даёт и чего не даёт, а затем используйте элемент, который уже всё это реализует.

<!-- объявляется как кнопка, но не фокусируется и не управляется -->
<div role="button" class="menu-trigger" onclick="toggleMenu()">Меню</div>

Решение

<button type="button" class="menu-trigger" aria-expanded="false">Меню</button>

Добавление роли меняет то, что объявляется, — «menu, button», — но не добавляет обработку фокуса, активацию Enter и Space или участие в форме, поэтому элемент остаётся доступным только мышью. Нативная кнопка приходит с ролью, объявленным именем, взятым из её текста, поведением с клавиатуры и состояниями нажатия и раскрытия: всё это реализовано браузером, а не воспроизведено вручную. Та же стилизация применяется без изменений, а aria-expanded сообщает состояние, которое передаёт визуальная стрелка. Прибегайте к ARIA только там, где никакой элемент не даёт нужного поведения, ведь атрибут может описать элемент управления, но не заставить его работать.