ARIA-метки спасают не кнопки, а смысл: 5 типовых ошибок в разметке

ARIA-метки спасают не кнопки, а смысл: 5 типовых ошибок в разметке

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

Правило простое: сначала нативный элемент, потом — aria. У кнопки должен быть текст внутри, у поля — связанный label, у ссылки — явное название. ARIA добавляйте только если нужно уточнить роль, состояние или имя. Например, для иконки-кнопки, переключателя, аккордеона, вкладки. Если можно решить через HTML, так и делайте.

Ещё одна частая ошибка — делать aria-label слишком общим: «Открыть», «Подробнее», «Далее». В списке таких элементов пользователь теряется. Лучше добавить контекст: «Открыть тарифы», «Подробнее о доставке». И не забывайте про aria-expanded, aria-controls и aria-current там, где меняется состояние.

Проверяйте интерфейс с клавиатуры и через скринридер: если элемент без ARIA читается нормально, ARIA ему не нужна.