Ответ
- Отсутствие альтернативного текста для изображений (
alt)
<!-- Плохо -->
<img src="logo.png">
<!-- Хорошо -->
<img src="logo.png" alt="Логотип компании">-
Некорректное использование семантических тегов
Использованиеdivвместоbutton,nav,headerи т.д. лишает пользователей скринридеров контекста. -
Низкая контрастность текста
Текст должен соответствовать WCAG (минимум 4.5:1 для обычного текста). -
Отсутствие фокусируемых элементов
Убедитесь, что все интерактивные элементы (a,button) доступны с клавиатуры (Tab/Shift+Tab). -
Динамический контент без ARIA-атрибутов
Например, скрытые меню или модалки безaria-expandedилиaria-modal. -
Автовоспроизведение медиа
Видео/аудио без управления мешают пользователям скринридеров. -
Недоступные кастомные элементы
Кастомные чекбоксы или радиокнопки без правильныхroleиaria-*атрибутов.
Пример доступного кастомного чекбокса:
<div role="checkbox" aria-checked="false" tabindex="0">Подписаться</div>Всегда проверяйте сайт инструментами вроде axe DevTools или WAVE.
Ответ 18+ 🔞
А, ну это же классика, блядь! Сидишь такой, верстаешь, думаешь — ну что может пойти не так? А потом приходит этот, с палочкой, и начинает тебе мозги выносить на раз-два. Ёпта, я тебе сейчас по пунктам разложу, что обычно забывают, чтобы ты не попал в просак.
Первое, и самое любимое — картинки без подписи. Ну серьёзно, чувак, ты что, думаешь, все видят? Человек со скринридером слушает твой сайт, а там: «Изображение, логотип-пнг». И всё. Пиздец как информативно. В рот меня чих-пых! Добавь alt, не будь мудаком.
<!-- Так — говно. Человек нихуя не поймёт -->
<img src="logo.png">
<!-- А так — уже красота. Уважение на лицо. -->
<img src="logo.png" alt="Логотип компании «Рога и копыта»">Второе — семантика, ёб твою мать. Ты всю жизнь кнопки в div заворачивал? Ну и как, хорошо? А скринридер видит просто «блок» и нихуя не понимает, что на него можно нажать. Используй нормальные теги: button для кнопок, nav для навигации, header для шапки. Это же не просто так придумали!
Третье — контрастность. Ты что, дальтоник? Серый текст на светло-сером фоне — это пиздец как нечитаемо. Есть стандарты WCAG, блядь. Минимум 4.5 к 1 для обычного текста. Проверь, а то окажешься тем самым пидарасом, который сделал сайт только для молодых и здоровых.
Четвёртое — клавиатура. Представь, что у тебя сломалась мышь или тачпад. Или ты просто не можешь ей пользоваться. Как ты будешь по сайту перемещаться? Tab должен ходить по всем интерактивным штукам — ссылкам, кнопкам, полям ввода. Если он где-то проваливается в пустоту — это твой косяк, дружок.
Пятое — динамика. Модальное окно выскакивает, меню раскрывается, а скринридер об этом нихуя не знает. Он живёт в своём мире. Надо ему подсказывать. Для этого есть ARIA-атрибуты. Модалке — aria-modal="true", выпадашке — aria-expanded="true/false". Без этого — полный ахтунг.
Шестое — медиа. Представь, ты слушаешь скринридер, а тут внезапно начинает орать рекламный ролик про «уникальное предложение». Хули? Сделай так, чтобы всё медиа не стартовало само, либо дай кнопку паузы сразу. Уважай чужое внимание.
Седьмое — свои кастомные штуки. Захотелось красивый чекбокс? Ну сделал ты его на div-ах, стили навесил, а доступность похерил. Надо ему роль прописать и состояние.
<!-- Кастомный чекбокс, который хотя бы попытался -->
<div role="checkbox" aria-checked="false" tabindex="0" id="subscribe">Подписаться на спам</div>И главное — проверяй, блядь! Не на глазок. Есть куча инструментов: axe DevTools, WAVE. Запустил, увидел ошибки — поправил. И не будет тебе потом стыдно, когда приедет проверка или просто адекватный человек с ограничениями захочет твоим сайтом воспользоваться.
Вот и вся наука. Не так страшен чёрт, как его малюют. Главное — не забывать, что ты делаешь не для себя, а для всех.