Спасибо, что вы здесь!

Это публичный канал для дизайнеров, разработчиков и всех тех, кто думает о пользователях.

Посты с контентом выходят в понедельник и вторник с 17 30 до 18 00. В канале всегда опубликованы только за текущую неделю.

Несколько важных сообщений:

— доступ к каналу может закрыться в любой момент (об этом сообщаю заранее)
— комментарии, предложения, критику и любые мысли пишите мне напрямую

Можно купить доступ к закрытой части канала. Там опубликованы 70 постов. Пожалуйста, напишите мне @melnik909, расскажу детали.

Приложение №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, графика". Вам это нужно?

Пришел с рекламой.

Вы можете помочь мне продолжать создавать контент. Просто купите еще больше советов от меня. Для этого, пожалуйста, напишите мне @melnik909. Расскажу, как это сделать.

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