Доступность с JavaScript
Доступность в JavaScript значит, что заказ срабатывает с клавиатуры и что смена состояния объявляется. На этой странице настоящая кнопка. click ставит видимую строку в tea / regular.
Это не страница ошибок
Прошлая страница бросила missing size. Её строка читалась как caught / missing size. Эта страница не использует throw. Элемент остаётся на странице, и результат пишется там, где его видно.
Используй кнопку
<button type="button"> запускает слушатель click по щелчку мыши, по Enter и по Space. div только с click игнорирует клавиатуру. Текст кнопки — это имя, которое слышно.
const button = document.querySelector("button");
const line = document.querySelector("#line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
});
Строка становится tea / regular. Enter и Space запускают тот же слушатель.
Объяви новую строку
textContent обновляет экран. Программа чтения может пропустить тихую смену. aria-live="polite" просит произнести новый текст после текущей фразы.
<p id="line" aria-live="polite">…</p>
Смена объявляется и не обрывает текущую фразу. assertive прерывает. Эта страница использует polite.
Без size кнопка отключается
Заказ — { drink: "tea" }, и size нет. Поставь button.disabled в true. Кнопка остаётся видимой. Слушатель click не выполняется.
const order = { drink: "tea" };
const button = document.querySelector("button");
if (!order.size) {
button.disabled = true;
}
Кнопка всё ещё на странице и не оформляет заказ. Не удаляй элемент.
Оставь фокус на кнопке
Кто включил кнопку, уже там. Запиши строку, затем вызови button.focus(). Не вызывай line.focus() и не прячь обводку.
const button = document.querySelector("button");
const line = document.querySelector("#line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
button.focus();
});
Фокус остаётся на кнопке. Строке не нужен tabindex. Обводка остаётся видимой.
Четыре привычки
Каждая строка таблицы — одно решение для этого элемента заказа.
📊 Доступное управление заказом
| Привычка | Использовать | Избегать |
|---|---|---|
| Действие | button с type="button" |
div, который слушает только click |
| Статус | aria-live="polite" на строке |
тихая подмена текста |
| Недоступно | button.disabled = true |
удаление кнопки |
| Фокус | button.focus() и видимая обводка |
line.focus() или outline: none |
Кнопка берёт действие. Живая строка произносит результат. disabled оставляет элемент, который не может сработать. Обводка показывает, где фокус.
Строка страницы
Страница связывает одну кнопку с живой строкой. Ничего не бросается.
<!DOCTYPE html>
<html>
<body>
<button id="order" type="button">Place order</button>
<p id="line" aria-live="polite">…</p>
<script>
const button = document.getElementById("order");
const line = document.getElementById("line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
button.focus();
});
</script>
</body>
</html>
После click строка читается как tea / regular. Enter и Space делают то же. caught / missing size относилось к странице ошибок.
У стойки
- Нажми кнопку. Строка читается как tea / regular.
- Нажми Enter на той же кнопке. Слушатель выполняется снова.
- Поставь aria-live="polite" на строку, чтобы новый текст объявили.
- Без size поставь button.disabled в true. Кнопка остаётся, и click не выполняется.
- После успешного click вызови button.focus(). Не вызывай line.focus().
Частые промахи
click на div — не управление с клавиатуры. disabled — не то же самое, что удалить кнопку.
- Брать
divдля действия заказа - Менять строку и забывать
aria-live - Удалять кнопку, когда нет
size - Вызывать
line.focus()после успешного заказа - Прятать обводку фокуса
- Читать строку как caught / missing size
Оставь это
buttonзапускает заказ мышью, Enter и Spacearia-live="polite"объявляетtea / regular, не прерывая- Без
sizeзначениеbutton.disabledстановитсяtrue, и кнопка остаётся на странице - Фокус остаётся на кнопке
- Строка страницы — tea / regular
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху