Делаю сайт для госучреждения, в ТЗ требование об адаптации для людей с ограниченными возможностями. Про контрастность и размер шрифта понятно, а вот как реально незрячие люди пользуются вебом?
Чем они читают сайты? Как понимают картинки? Как заполняют формы?
Хочу сделать не для галочки а чтобы реально работало.
Основной инструмент - скринридеры (screen readers). Программа читает содержимое экрана вслух синтезированным голосом. Популярные:
Как это работает: скринридер парсит DOM страницы и озвучивает элементы по порядку. Пользователь навигирует клавиатурой: Tab по интерактивным элементам, стрелки по тексту, специальные хоткеи для перехода к заголовкам, спискам, формам.
Что нужно для адаптации:
Семантическая верстка. Используй правильные теги: <nav>, <main>, <article>, <aside>, <header>, <footer>. Скринридер озвучивает их как ориентиры.
Заголовки по иерархии. H1 > H2 > H3 без пропусков. Пользователи прыгают по заголовкам чтобы понять структуру страницы.
Alt для картинок. Декоративные картинки alt="", информативные - описание содержимого. "Фото мужчины в костюме" а не "IMG_2847.jpg".
Формы с label. Каждый input связан с label через for/id или вложенностью. Без этого скринридер не скажет что за поле.
Фокус видимый. Не убирай outline. Если кастомный дизайн, сделай свой стиль :focus.
ARIA когда семантики не хватает. aria-label, aria-describedby, role. Но сначала попробуй решить нативными тегами.
Поставь NVDA и попробуй сам попользоваться своим сайтом с закрытыми глазами. Сразу поймешь где проблемы.
Я слабовидящий, расскажу из первых рук.
Использую комбинацию: экранная лупа для увеличения + скринридер когда глаза устают. На телефоне постоянно VoiceOver.
Что бесит больше всего:
Если сделаешь сайт без этих косяков - уже лучше 90% госсайтов.
Спасибо огромное за инсайд! Капчу уберу вообще, там защита от спама не критична
Дополню про тестирование. Автоматические чекеры типа WAVE, axe DevTools, Lighthouse - ловят только 30-40% проблем. Остальное нужно руками.
Чеклист минимум:
Если госзаказ, смотри ГОСТ Р 52872-2019 и требования к сайтам госорганов. Там конкретный список что должно быть.
Для госсайта посмотри на design.gov.ru там есть дизайн-система с готовыми компонентами которые уже адаптированы. Не надо изобретать велосипед.
главное не делай как на гос услугах, там такая каша что даже зрячему разобраться невозможно)))
Огонь, спасибо! Поставил NVDA, офигел как сложно. Половина кнопок вообще не озвучивается