ARIA вместо HTML против нативной доступности

Кратко

Старый подход имитирует элементы через div и ARIA. Современный — берёт нативные теги, которые уже доступны.

1. Кнопка

Старый подход: div вместо button

Такой «div-кнопке» нужно вручную дописывать фокус, роль и обработку Enter/Space — иначе она недоступна с клавиатуры.

Отправить
<div class="btn" onclick="send()">Отправить</div>
<!-- нет фокуса, нет роли, не реагирует на Enter/Space -->

Современный подход: нативный button

Браузер сам даёт фокус, роль «button» и нажатие с клавиатуры — кода меньше, а работает надёжнее.

<button type="button" onclick="send()">Отправить</button>

2. Подпись к полю

Старый подход: placeholder вместо label

Placeholder исчезает при вводе, имеет слабый контраст и не озвучивается как подпись — поле остаётся «безымянным».

<input type="text" placeholder="Имя">

Современный подход: label + input

Подпись видна всегда, связана с полем и расширяет кликабельную зону. ARIA добавляем лишь для подсказки.

<label for="name">Имя</label>
<input id="name" type="text">
Правило ARIA №1: если есть нативный HTML-элемент с нужным поведением — используй его, а не имитацию через div и role.