Кнопки, сообщающие о своём действии

Кнопка полезна только тогда, когда пользователи понимают, что она делает. Доступное имя — это текст, который программа чтения с экрана произносит перед нажатием.

Для обычной кнопки видимый текст внутри неё является доступным именем. Понятные слова обеспечивают понятное объявление.

Назовите кнопку выполняемым действием: «Сохранить», «Удалить» или «Добавить в корзину». Глагол точно сообщает пользователям, что произойдёт.

Такие названия, как OK, «Отправить» или «Перейти», расплывчаты, если их используют несколько кнопок. Назовите конкретное действие, чтобы каждая кнопка была понятна сама по себе.

У кнопки со значком без текста нет доступного имени. Программа чтения с экрана может просто сказать «кнопка», и пользователю останется только гадать. 🤔

Задайте кнопке без текста имя с помощью aria-label. Теперь значок по-прежнему отображается, а вспомогательная технология объявляет, что он делает.

Если метка уже называет действие, добавьте внутреннему значку aria-hidden, чтобы он не читался как лишний шум.

Переключающая кнопка должна сообщать своё состояние. Используйте aria-pressed, чтобы программа чтения с экрана сказала, включена она или выключена.

Кнопка, которая показывает или скрывает панель, должна иметь aria-expanded, чтобы пользователи слышали, открыта панель или свёрнута.

Хорошая метка коротка, но правдива. Она точно обещает то, что произойдёт после нажатия кнопки, без неожиданных последствий.

Если у кнопки есть видимый текст, включите эти слова в её доступное имя, чтобы пользователи голосового управления могли произнести видимую метку.

Называйте каждую кнопку её действием, добавляйте названия кнопкам только со значками и сообщайте состояние с помощью атрибутов aria. Теперь пользователи всегда понимают, что делают кнопки. 👍