Архитектура фронтенда
Доступные формы: чтение кода
Суть Читаем реальные JSX-сниппеты — связь label, aria-live-регион ошибки, focus management и controlled input — и выбираем самое результативное исправление доступности.
Высота — путь к senior
НольJuniorMiddleSenior
Ты на senior-высоте — в орбитеДоступность формы решается в разметке и обработчике submit. Читайте каждый сниппет так, как читали бы его на ревью PR, и выбирайте исправление, которое senior-инженер делает первым.
Цель
Отработайте цикл ревью: заметьте сломанную связь label, live-регион, который ничего не озвучивает, пропущенное перемещение фокуса и controlled input, теряющий имя поля, — и выберите верное исправление.
Сниппет 1 — label, связанный ни с чем
function EmailField() {
return (
<div className="field">
<label>Email</label>
<input type="email" name="email" placeholder="you@example.com" />
</div>
);
} Викторина
Completed
Screen reader озвучивает это поле как «edit text» без имени. В чём баг и как исправить?
Heads-up Placeholder — не программное имя и исчезает при фокусе. Здесь нет aria-hidden; реальный пробел — отсутствующая связь htmlFor/id.
Heads-up aria-label на неинтерактивном div ничего не даёт имени input. Ставьте связь на контрол: htmlFor/id или оберните input в label.
Heads-up type=email управляет валидацией и клавиатурой, а не accessible name. Имя берётся из связанного label, которого нет.
Сниппет 2 — регион ошибки, который ничего не озвучивает
function Form() {
const [error, setError] = useState("");
return (
<form onSubmit={validate}>
<input id="zip" name="zip" aria-describedby="zip-err" />
{error && <div id="zip-err" role="alert">{error}</div>}
<button>Submit</button>
</form>
);
} Викторина
Completed
Зрячие видят ошибку; многие пользователи screen reader ничего не слышат. Почему и какое минимальное исправление?
Heads-up role=status — вежливая и подходит для несрочных обновлений, но ошибки заслуживают assertive role=alert. Дефект в условном монтаже региона, а не в роли.
Heads-up Удаление aria-describedby рвёт связь поля с сообщением. Оставьте его и сделайте цель постоянной; describedby корректен, а условный монтаж — нет.
Heads-up Обновления состояния прекрасно меняют DOM. Проблема в том, что элемент входит в DOM вместе со своим текстом, вместо того чтобы текст менялся внутри уже присутствующего региона.
Сниппет 3 — обработчик submit, забывший про фокус
function handleSubmit(e) {
e.preventDefault();
const invalid = fields.filter((f) => !f.valid);
invalid.forEach((f) => {
f.el.setAttribute("aria-invalid", "true");
setMessage(f.id, f.error); // пишет в постоянный live-регион
});
// ...и больше ничего
} Викторина
Completed
aria-invalid выставлен, сообщения озвучиваются, но пользователи клавиатуры говорят, что форма «ничего не делает» на неудачном submit. Чего не хватает?
Heads-up Выставляете ли вы aria-invalid через атрибут или проп — пользователь всё равно не попадает на поле. Не хватает перемещения фокуса, а не способа задать атрибут.
Heads-up autofocus срабатывает только при начальной загрузке страницы, а не на сбое валидации в момент submit. Нужно императивно сфокусировать первое невалидное поле после валидации.
Heads-up Удаление preventDefault выбрасывает кастомные сообщения и асинхронные проверки, ради которых этот обработчик существует. Оставьте его и возьмите фокус на себя: вызовите focus() на первом невалидном поле.
Сниппет 4 — controlled input, теряющий своё имя
function NameField({ value, onChange }) {
return (
<>
<span className="lbl">Full name</span>
<input
value={value}
onChange={(e) => onChange(e.target.value)}
/>
</>
);
} Викторина
Completed
Это корректно управляемый (controlled) React-input, и всё же он проваливает доступность. В чём реальная проблема и исправление?
Heads-up Controlled и uncontrolled input связываются с label одинаково. Режим управления не связан с отсутствующим label; перевод в uncontrolled имени не добавит.
Heads-up Обработчик onChange есть, поэтому input редактируемый, а не read-only. Пробел в доступности — отсутствующая связь label, а не выбор value/defaultValue.
Heads-up React-фрагмент ничего не рендерит и не влияет на дерево. input доступен; ему не хватает программно связанного имени.
Итог
Любой баг доступности формы виден в разметке или обработчике submit: label должен быть связан через htmlFor/id или обёртку (placeholder или соседний span именем не являются); live-регион должен быть постоянным, чтобы изменение его текста было замечено; неудачный submit должен императивно переместить фокус на первое невалидное поле, а не просто выставить aria-invalid; и controlled-vs-uncontrolled ортогонально тому, есть ли у input accessible name. Читайте разметку, найдите сломанную связь или несдвинутый фокус и исправляйте это прежде всего.