Приложение №1. Ввел код для авторизации. Последняя цифра неправильная. Надо ее удалить. Жму клавишу. Прекрасно, удален весь код.

Другой пример. Приложение №2. Ввел код для авторизации. Последняя цифра неправильная. Надо ее удалить. Жму клавишу. Последняя цифра удалена. Остальная часть кода сохранена.

img без alt — это головная боль

Кто-то сделал так

<img src="mediastore/nn-banner.webp">

Я предлагаю делать так

<img src="mediastore/nn-banner.webp" alt="">

Не знаете, какой текст написать для атрибута alt? Лучше оставьте его пустым. Если вы вообще не добавите атрибут, то скринридеры озвучат src. Пользователи услышат: "mediastore/nn-banner, графика". Вам это нужно?

Приложение №1. Я нахожусь в списке городов на пункте Палермо Мне нужно вернуться к первому элементу списка — городу Париж. Жму клавишу Home. Еще раз. Еще раз. Ничего не выходит.

Другой пример. Приложение №2. Я нахожусь в списке сезонов на пункте 1980-81. Мне нужно вернуться к первому элементу списка — сезон 2023-24. Жму клавишу Home. О, я перешел! Осталось нажать Энтер и сезон будет выбран.

Символ * для полей — это визуальный паттерн

Кто-то сделал так

<label for="email">
  Ваш email
  <span>*</span>
</label>

Я предлагаю делать так

<label for="email">
  Ваш email
  <span aria-hidden="true">*</span>
</label>

Звездочка сбивает с толку многих пользователей скринридера. Они не знают, что это такое. Как им помочь? Следует использовать aria-hidden, чтобы скрыть этот символ.

Приложение №1. Авторизовываюсь. Ввел пароль. Хочу посмотреть его. Жму Таб, чтобы попасть на кнопку "Показать пароль". Приложение пропускает ее и перемещает меня к чекбоксу

Другой пример. Приложение №2. Авторизовываюсь. Ввел пароль. Хочу посмотреть его. Жму Таб, чтобы попасть на кнопку "Показать пароль". Круто! Я на кнопке.

<a href="#"> — это бич

Кто-то сделал так

<a href="#0">Показать мой заказ</a>
<!-- или -->
<a href="#">Показать мой заказ</a>

Я предлагаю делать так

<button type="button">Показать мой заказ</button>

Ссылка с хэшем в href выглядит как кнопка. Но если открыть контекстное меню, мы увидим "Открыть ссылку в новой вкладке". В конце концов, это ссылка или кнопка? Элемент <button> положит конец сомнениям.

Приложение №1. Ввел почту и пароль. Жму кнопку "Войти". Эх, неправильный пароль. Да еще нужно в поле кликать, чтобы его исправить.

Другой пример. Приложение №2. Ввел пароль. Жму кнопку "Продолжить". Блин, опять неправильный пароль. Но. Я нахожусь в поле и могу исправить его.

Дублированный текст в aria-label бесполезен

Кто-то сделал так

<nav aria-label="Основная навигация">
  <!-- элементы основной навигации -->
</nav>

Я предлагаю делать так

<nav aria-label="Основная">
  <!-- элементы основной навигации -->
</nav>

Будьте внимательны при написании текста для aria-label. Текст "Основная навигация" будет читаться как "Основная навигация, навигация". Это только загромождает озвучку. Текст "Основная" лучше.