<b>ARIA-метки работают только тогда, когда их читают так, как задумано</b>

<b>ARIA-метки работают только тогда, когда их читают так, как задумано</b>

Чаще всего проблемы с доступностью начинаются не с отсутствия ARIA, а с её лишнего применения. Если элемент уже понятен сам по себе — кнопка, ссылка, поле ввода — добавлять aria-label не нужно. Экраны чтения начнут озвучивать не то, что видит пользователь, а то, что вы прописали, и это легко ломает смысл.

Используйте ARIA только там, где нативной семантики не хватает: иконка без текста, сложный виджет, переключатель, вкладки, раскрывающийся список. Но сначала проверьте, нельзя ли решить задачу обычным HTML: , , , . Семантика почти всегда надёжнее и проще для поддержки.

Типовые ошибки:
— aria-label дублирует видимый текст и создаёт лишний шум
— aria-hidden="true" прячeт важную часть интерфейса
— role="button" ставят на div, хотя нужен настоящий button
— aria-describedby ссылается на текст, который не помогает действию

Хорошее правило: ARIA не должна исправлять плохую верстку, она должна дополнять хорошую. Если элемент можно сделать понятным без атрибутов — так и делайте. Если ARIA нужна, проверьте её через клавиатуру и экранный диктор: имя, роль и состояние должны совпадать с реальным поведением интерфейса.