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

Альт текст.

Сайт Сбер. Заполнил логин и пароль в форме авторизации. Жму Энтер. Оказывается я ввел неправильный пароль, и он почему-то удален. Как мне узнать, где ошибка?

Другой пример. Страница Вк. Заполнил логин и пароль в форме авторизации. Жму Энтер. Снова ввел неправильный пароль. Но он отображен в поле. Я могу посмотреть ошибку и его исправить.

Через неделю выйдет 9 часть "HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи". Я хочу у вас спросить.

Нужно ли открывать сбор на 10 часть?

Рекламодателю эти статьи не приносят нужных просмотров. По этой причине думаю финансироваться с вашей помощью.

Бюджет 21 000р. Я не знаю, будет ли интересно вам вкладывать свои деньги.

Если объявляем сбор, жмите ? и напишите мне сумму, которую вы можете перевести.

Моя серия "HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи"

Поскольку на Хабре больше просмотров набирают статьи по код, я был вынужден вставлять его. Я думаю, разработчикам понятно, как читать статьи. Но!

Для дизайнеров в моих статьях тоже есть много полезного. Обратите внимание, какие проблемы существуют. Какой опыт есть у меня и Ильи. Почти все сложности вытекают из непродуманного дизайна.

https://habr.com/ru/companies/ruvds/articles/757490/

Пожалуйста, поддерживаете меня, оставив на чай.

Если выберите 1000р, то я пришлю вам список особенностей взаимодействия пользователя скринридера, влияющих на то, насколько интерфейс адаптирован для людей. Есть 8 особенностей. Вот несколько из них.

Особенности
- Может с рождения не видеть, поэтому не знает о привычных для зрячего человека элементах интерфейса
- Повышенные нагрузки приводят к дополнительным проблемам со здоровьем, в том числе к ослаблению слуха

https://pay.mysbertips.ru/02991690

Укажите в комментарии свой ник. Без него сложно вас найти. Напишите мне, чтобы я мог вам отправить список.

Всем спасибо, а кто поддержал спасибо два раза!

СберЧаевые

Сервис для получения чаевых по QR-коду. Чаевые и донаты на карту.