autocapitalize="off" упрощает ввод электронной почты

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

<label for="auth">Номер телефона или почта</label> <input id="auth" type="text">

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

<label for="auth">Номер телефона или почта</label> <input id="auth" type="text" autocapitalize="off">

Заметили, что большинство электронных почт чаще начинаются со строчных букв, чем с заглавных? Вот почему я думаю, что предпочтительнее использовать клавиатуру со строчными буквами. Просто сделайте это с помощью autocapitalize="off".

Атрибут placeholder альтернатива label? Кто-то сделал так

<input type="email" placeholder="E\-mail">

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

<label for="email">E\-mail</label> <input id="email" type="email">

Атрибут placeholder не альтернатива элементу label. Он не увеличивает кликабельную область и не дает имя полям.

alt не для поэм. Он передает ценность изображения

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

<img src="eiffel\-tower.webp" alt="Эйфелева башня расположена рядом с рекой, через которую перекинут мост. Вдоль моста выстроились лодки">

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

<img src="eiffel\-tower.webp" alt="Эйфелева башня. Вид с реки Сены">

NVDA говорит: «Графика, Эйфелева башня расположена рядом с рекой, через которую перекинут мост. Вдоль моста выстроились». Жму клавишу со стрелкой вниз. Говорит: «Графика, лодки». А почему скринридер дважды говорит "Графика"? Подсказка больше лимита в 100 символов

Работаю над гайдом по веб-доступности. Он для людей с опытом в разработке доступных решений. В нем не будет вводной информации.

Моя цель передать опыт взаимодействия людей с интерфейсами. Какие есть особенности, технические нюансы и барьеры. Делаю это через свою личную методику, в которой вы сами будете принимать решение.

Задумывался гайд для разработчиков, но я с радостью сообщаю, что у меня получилось его сделать полезным для других специалистов. Для дизайнеров, UX проектировщиков, тестировщиков, аудиторов.

Пишите мне @melnik909, чтобы получить ознакомительную версию.

P.S. Ставим ?, если мне пора идти работать уже

aria-required позаботится о том, чтобы пользователи скринридера могли найти обязательные текстовые поля

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

<label for="ue">Email</label> <input type="email" id="ue">

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

<label for="ue">Email</label> <input type="email" id="ue" aria\-required="true">

Обязательные текстовые поля могут быть легко скрыты для пользователей скринридера. aria-required — супергерой, который не допускает этого!

P.S. Можно купить архив со всеми постами. Если хотите, то пишите мне @melnik909

В общем завел канал "What's Stas making?". Это будет место, где рассказываю свои личные истории, делюсь мыслями о CSS и доступности, выкладываю черновики своего контента.

Доступ 1000р. Пишите мне, если хотите присоединиться.

Хорошего дня!

Отрывок из моего гайда о доступности для разработчиков.

Если вы хотите погрузиться в доступность, вам нужно изучать то, как люди взаимодействуют с интерфейсом. Почему?

Вот получили вы "правильный код". Поняли, что надо писать alt текст. Везде его фигачите. Так вы создаете дополнительную нагрузку для пользователя скринидера в ситуации, когда он этого не ожидает. Это ухудшает доступность.

В этом вся сложность. Очень мало однозначных решений. Доступность про людей. Не погружаясь в их особенности, не получится сделать доступный интерфейс.

Согласны?

? — Да

? — Опять какую-то хрень придумал

P.S. Пишите мне @melnik909, если хотите получить гайд. Еще ищу сейчас помощника для работы над ним. За помощь отдаю гайд по сниженной цене. Я вас жду!

Будьте осторожны с атрибутами 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 для текстовых полей имени и фамилии. Вы никогда не угадаете их длину, а моя знакомая не может ввести свою фамилию "Михайличенкова-Павлюченкова"...