Приложение №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. Текст "Основная навигация" будет читаться как "Основная навигация, навигация". Это только загромождает озвучку. Текст "Основная" лучше.

Приложение №1. Я в поле поиска книг. Ввел поисковой запрос. Ниже выпадающий список предложенных вариантов. Жму Эскейп. Ну вот, приложение игнорирует меня.

Другой пример. Приложение №2. Я в поле поиска товаров. Ввел поисковой запрос. Ниже выпадающий список предложенных вариантов. Жму Эскейп. Опа. Приложение закрыло список. Я могу лазить по приложению дальше.

Будьте осторожны с атрибутами minlength и maxlength

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

<label for="sname">Фамилия</label>
<input type="text" minlength="3" maxlength="25" id="sname">

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

<label for="sname">Фамилия</label>
<input type="text" id="sname">

Не используйте атрибуты minlength и maxlength для текстовых полей имени и фамилии. Вы никогда не угадаете их длину, а моя знакомая не может ввести свою фамилию "Михайличенкова-Павлюченкова"...

Приложение №1. Я в поле поиска товаров. Ввел поисковой запрос. Ниже выпадающий список предложенных вариантов. Жму клавишу со стрелкой вниз. Да что же такое! Приложение игнорирует меня.

Другой пример. Приложение №2. Я в поле поиска товаров. Ввел поисковой запрос. Ниже выпадающий список предложенных вариантов. Жму клавишу со стрелкой вниз. О, я перешел к первому элементу в списке. Могу и дальше пойти, и выбрать кроссовки.

nav без aria-label — это плохой паттерн

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

<nav>
  <!-- здесь элементы основной навигации -->
</nav>

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

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

Пользователи скринридеров не смогут найти, где находится основная навигация, если мы им об этом не скажем. А aria-label поможет нам в этом!

Приложение №1. Хочу купить Кроксы. Открыл галерею фоток. Нажимаю на клавишу со стрелкой вправо на клавиатуре. Никакой реакции. Жму еще раз. Нифига. Приложение игнорит меня.

Другой пример. Приложение №2. Хочу купить телефон и открыл галерею фоток Редми. Нажимаю на клавишу со стрелкой вправо на клавиатуре. О, теперь могу рассмотреть фото передней части. Жму еще раз. Теперь могу рассмотреть фото задней части.

Выбросите атрибут <input type="tel">

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

<label for="bd">Дата рождения</label>
<input id="bd" type="tel">

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

<label for="bd">Дата рождения</label>
<input id="bd" inputmode="numeric">

Ожидаете ли вы появления символов * или # при вводе даты рождения? Я нет. По этой причине input type="tel" не подходит для ввода цифр, за исключением ввода номера телефона.

Лаконичные клавиатуры с цифрами с помощью inputmode="numeric" лучше!

Приложение №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, чтобы скрыть этот символ.