Работаю над гайдом по веб-доступности. Он для людей с опытом в разработке доступных решений. В нем не будет вводной информации.
Моя цель передать опыт взаимодействия людей с интерфейсами. Какие есть особенности, технические нюансы и барьеры. Делаю это через свою личную методику, в которой вы сами будете принимать решение.
Задумывался гайд для разработчиков, но я с радостью сообщаю, что у меня получилось его сделать полезным для других специалистов. Для дизайнеров, UX проектировщиков, тестировщиков, аудиторов.
Пишите мне @melnik909, чтобы получить ознакомительную версию.
Моя цель передать опыт взаимодействия людей с интерфейсами. Какие есть особенности, технические нюансы и барьеры. Делаю это через свою личную методику, в которой вы сами будете принимать решение.
Задумывался гайд для разработчиков, но я с радостью сообщаю, что у меня получилось его сделать полезным для других специалистов. Для дизайнеров, UX проектировщиков, тестировщиков, аудиторов.
Пишите мне @melnik909, чтобы получить ознакомительную версию.
Моя главная работа на данный момент — это серия статей HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. В них рассказываю с какими сложностями сталкиваются люди с разными особенностями здоровья
Хабр
HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи
Многие разработчики думают, что доступность реализуется только с помощью aria-атрибутов. Если их не добавить, то всё, доступности нет. Конечно, aria-атрибуты нужны, но HTML и CSS такая же важная часть...
Приложение №1. Я хотел зарегистрироваться. Открывал форму входа в модальном окне. Нет, пойду еще полажу по сайту. Жму Эскейп. Блин, и где я? Приложение никак не обозначает мою позицию.
Другой пример. Приложение №2. Открыл форму авторизации в модальном окне. Так, нет надо еще посмотреть сайт. Жму Эскейп. О, я на кнопки "Авторизоваться". Отлично, могу пойти дальше.
Другой пример. Приложение №2. Открыл форму авторизации в модальном окне. Так, нет надо еще посмотреть сайт. Жму Эскейп. О, я на кнопки "Авторизоваться". Отлично, могу пойти дальше.
У alt="Аватар пользователя" нет смысла
Кто-то сделал так
Я предлагаю делать так
Неинформативный alt текст увеличивает ментальную нагрузку. Поэтому не стоит всегда добавлять alt текст. Пустой alt тоже полезен.
Кто-то сделал так
<img src="avatar.webp" alt="Аватар пользователя">
Я предлагаю делать так
<img src="avatar.webp" alt="">
Неинформативный alt текст увеличивает ментальную нагрузку. Поэтому не стоит всегда добавлять alt текст. Пустой alt тоже полезен.
18.06.2025 закроется доступ к каналу. Вы можете продолжить читать контент. Для этого купите доступ к закрытой части канала, где есть неопубликованный контент.
Пожалуйста, напишите мне @melnik909. Я расскажу, как оплатить.
Пожалуйста, напишите мне @melnik909. Я расскажу, как оплатить.
Что я советую посмотреть из моего контента:
1. HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи
Рассказываю об ошибках в верстке, которые влияют на цифровую доступность.
2. Прокачиваем вёрстку ARIA атрибутами
Мои гайды по основным ARIA атрибутам.
3. Очередной гайд по HTML-элементам, которые можно использовать в каждом проекте
Описание основных элементов для верстки структуры страницы. Они напрямую влияют на веб-доступность.
1. HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи
Рассказываю об ошибках в верстке, которые влияют на цифровую доступность.
2. Прокачиваем вёрстку ARIA атрибутами
Мои гайды по основным ARIA атрибутам.
3. Очередной гайд по HTML-элементам, которые можно использовать в каждом проекте
Описание основных элементов для верстки структуры страницы. Они напрямую влияют на веб-доступность.
Хабр
HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи
Многие разработчики думают, что доступность реализуется только с помощью aria-атрибутов. Если их не добавить, то всё, доступности нет. Конечно, aria-атрибуты нужны, но HTML и CSS такая же важная часть...
Приложение №1. Я хотел зарегистрироваться. Открывал форму входа в модальном окне. Нет, пойду еще полажу по сайту. Жму Эскейп. Блин, и где я? Приложение никак не обозначает мою позицию.
Другой пример. Приложение №2. Открыл форму авторизации в модальном окне. Так, нет надо еще посмотреть сайт. Жму Эскейп. О, я на кнопки "Авторизоваться". Отлично, могу пойти дальше.
Другой пример. Приложение №2. Открыл форму авторизации в модальном окне. Так, нет надо еще посмотреть сайт. Жму Эскейп. О, я на кнопки "Авторизоваться". Отлично, могу пойти дальше.
aria-label подсказки на неосновном языке — это анти-паттерн
Кто-то сделал так
Я предлагаю делать так
aria-label подсказки должны быть написаны на языке, который является основным для страницы. Конечно, скринридеры попытаются озвучить любую. Но если результат будет кривым, то они не виноваты!
Кто-то сделал так
<html lang="ru">
<body>
<nav aria-label="Main">
<!-- здесь элементы навигации -->
</nav>
</body>
</html>
Я предлагаю делать так
<html lang="ru">
<body>
<nav aria-label="Основная">
<!-- здесь элементы навигации -->
</nav>
</body>
</html>
aria-label подсказки должны быть написаны на языке, который является основным для страницы. Конечно, скринридеры попытаются озвучить любую. Но если результат будет кривым, то они не виноваты!
Приложение №1. Я переключаюсь по сайту с помощью клавиатуры. Я нахожусь на блоке состоящего из заголовка "Кредитная карта", текста, изображения и иконки "Читать подробнее". Также блок является ссылкой.
Хочу перейти к следующему блоку "Карта с доставкой от 15 минут". Жму Таб. Что ж, я на иконке. Надо нажать еще раз Таб.
Другой пример. Приложение №2. Я переключаюсь по сайту с помощью клавиатуры. Я нахожусь на блоке состоящего из изображения, заголовка "Кто работает в дарксторе?" и иконки "Читать подробнее". Также блок является ссылкой.
Хочу перейти к следующему блоку "Кто работает в офисе?". Жму Таб. Ура, я перешел!
Хочу перейти к следующему блоку "Карта с доставкой от 15 минут". Жму Таб. Что ж, я на иконке. Надо нажать еще раз Таб.
Другой пример. Приложение №2. Я переключаюсь по сайту с помощью клавиатуры. Я нахожусь на блоке состоящего из изображения, заголовка "Кто работает в дарксторе?" и иконки "Читать подробнее". Также блок является ссылкой.
Хочу перейти к следующему блоку "Кто работает в офисе?". Жму Таб. Ура, я перешел!
Мы собираем бюджет на 13 часть серии статей "HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи".
Осталось 4 000р.
Если хотите помочь, напишите, пожалуйста, мне @melnik909 сумму, которую вы можете перевести.
Осталось 4 000р.
Если хотите помочь, напишите, пожалуйста, мне @melnik909 сумму, которую вы можете перевести.
Хабр
HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи
Многие разработчики думают, что доступность реализуется только с помощью aria-атрибутов. Если их не добавить, то всё, доступности нет. Конечно, aria-атрибуты нужны, но HTML и CSS такая же важная часть...
Псевдокнопки недоступны с клавиатуры
Кто-то сделал так
Я предлагаю делать так
Я думаю, <div role="кнопка", tabindex="0"> — фигня. Почему? Мы не можем нажать Enter и пробел для взаимодействия. <button> — идеальный выбор. Позволяет пользователям использовать интерфейс всеми необходимыми способами!
Кто-то сделал так
<div role="button" tabindex="0">Отправить</div>
Я предлагаю делать так
<button type="button">Отправить</button>
Я думаю, <div role="кнопка", tabindex="0"> — фигня. Почему? Мы не можем нажать Enter и пробел для взаимодействия. <button> — идеальный выбор. Позволяет пользователям использовать интерфейс всеми необходимыми способами!
Приложение №1. Авторизовываюсь. Ввел пароль. Хочу посмотреть его. Жму Таб, чтобы попасть на кнопку "Показать пароль". Приложение пропускает ее и перемещает меня к чекбоксу
Другой пример. Приложение №2. Авторизовываюсь. Ввел пароль. Хочу посмотреть его. Жму Таб, чтобы попасть на кнопку "Показать пароль". Круто! Я на кнопке.
Другой пример. Приложение №2. Авторизовываюсь. Ввел пароль. Хочу посмотреть его. Жму Таб, чтобы попасть на кнопку "Показать пароль". Круто! Я на кнопке.
Просто скопированный alt бесполезен
Кто-то сделал так
Я предлагаю делать так
Добавьте больше полезной информации с помощью атрибута alt вместо глупого копирования текста. Это поможет пользователям скринридера купить пару кроссовок.
Кто-то сделал так
<h3>Кроссовки adidas Campus 80s</h3>
<img src="adidas-campus.webp" alt="adidas Campus 80s">
Я предлагаю делать так
<h3>Кроссовки adidas Campus 80s</h3>
<img src="adidas-campus.webp" alt="Мужские голубые кроссовки adidas Campus 80s с тремя полосками на тонкой подошве">
Добавьте больше полезной информации с помощью атрибута alt вместо глупого копирования текста. Это поможет пользователям скринридера купить пару кроссовок.
15.08.2025 закроется доступ к каналу. Вы можете продолжить читать контент. Для этого купите доступ к закрытой части канала.
Пожалуйста, напишите мне @melnik909. Я расскажу, как оплатить.
Пожалуйста, напишите мне @melnik909. Я расскажу, как оплатить.
Приложение №1. Хочу посмотреть новые фишки приложения. Они переключаются с помощью кнопок "Назад" и "Вперед". Нужно нажать кнопку "Назад". Я навел курсор рядом с ней. Кликаю. Никакой реакции от приложения.
Другой пример. Приложение №2. Хочу посмотреть фото товара. Они переключаются с помощью кнопок "Назад" и "Вперед". Нужно нажать кнопку "Назад". Я навел курсор рядом с ней. Кликаю. Фото переключилось.
Другой пример. Приложение №2. Хочу посмотреть фото товара. Они переключаются с помощью кнопок "Назад" и "Вперед". Нужно нажать кнопку "Назад". Я навел курсор рядом с ней. Кликаю. Фото переключилось.
Сначала <input>, а потом кнопка "Показать пароль"
Кто-то сделал так
Я предлагаю делать так
Кнопка "Показать пароль" всегда должна быть после <input> в HTML. Без разницы, где кнопка отображается визуально. Над полем, рядом или в любом другом месте. Так пользователи сначала сфокусируются на текстовое поле, а потом уже на кнопку.
Кто-то сделал так
<button type="button">Показать</button>
<input type="password">
Я предлагаю делать так
<input type="password">
<button type="button">Показать</button>
Кнопка "Показать пароль" всегда должна быть после <input> в HTML. Без разницы, где кнопка отображается визуально. Над полем, рядом или в любом другом месте. Так пользователи сначала сфокусируются на текстовое поле, а потом уже на кнопку.
Напоминаю, что 15.08.2025 закрывается доступ для всех, кто не поддержал канал финансово. Если хотите продолжать читать контент, то напишите, пожалуйста, мне @melnik909
Дайте больше информации об контроле, которую вы получаете визуально
Кто-то сделал так
Я предлагаю делать так
aria-label помогает предоставить больше информации о цели контрола. Это восполняет недостаток визуальной информации для пользователей скринридера.
Кто-то сделал так
<button type="button">
<!-- здесь иконка и текст "Очистить" -->
</button>
Я предлагаю делать так
<button type="button" aria-label="Очистить введенный текст для поиска"
<!-- здесь иконка и текст "Очистить" -->
</button>
aria-label помогает предоставить больше информации о цели контрола. Это восполняет недостаток визуальной информации для пользователей скринридера.