Назови основные атрибуты для accessibility

Что проверяют

Знаете ли вы, что доступность начинается не с атрибутов. Интервьюер слушает, назовёте ли вы нативную семантику раньше ARIA: кандидат, который вешает роль кнопки на div, доступность обычно ухудшает, а не улучшает.

Как отвечать

Сначала главное правило: лучший атрибут ARIA это его отсутствие. Элементы button, a со ссылкой, input с подписью через label, заголовки по уровням и nav дают роль, имя, фокус и работу с клавиатуры бесплатно. ARIA нужна там, где нативного элемента нет.

Дальше перечислять по задачам, а не списком:

• имя элемента: alt у картинки (alt="" у декоративной), aria-label, aria-labelledby со ссылкой на видимый текст;
• описание: aria-describedby для подсказки или текста ошибки под полем;
• роль: role там, где элемент нестандартный и другого выхода нет;
• состояние: aria-expanded, aria-checked, aria-selected, aria-current, aria-disabled, aria-invalid у полей формы;
• динамика: aria-live со значением polite или assertive для сообщений, которые появляются без перезагрузки страницы;
• фокус: tabindex="0" включает элемент в естественный порядок обхода, tabindex="-1" делает фокус возможным только из кода;
• скрытие: aria-hidden="true" убирает элемент из дерева доступности;
• язык: атрибут lang на корневом элементе и на вставках на другом языке, иначе синтезатор читает текст с чужим произношением.

Где спотыкаются

Ставят положительный tabindex. Любое число больше нуля вырывает элемент вперёд всего документа и ломает порядок обхода на странице целиком, а чинить это приходится потом во всех остальных местах.

Второе: вешают aria-hidden="true" на то, что можно сфокусировать. Для скринридера элемент исчезает, но в табуляции остаётся, и пользователь проваливается в невидимую точку. Скрывать надо вместе с возможностью фокуса.

Третье: считают, что aria-label работает на чём угодно. На div или span без роли он игнорируется, а на кнопке с видимой надписью перекрывает её, и голосовое управление перестаёт находить кнопку по написанному на ней тексту.