Сайт прошёл проверку доступности. Что показал тест со скринридером

Мой сайт уже был адаптирован под базовые принципы a11y: на страницах выстроена семантическая структура, заполнены alt, задан язык документа, соблюдена иерархия заголовков, предусмотрены основные элементы навигации.

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

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

Автоматический анализатор способен определить, указан ли язык страницы, есть ли у изображения alt, соблюдается ли иерархия заголовков и присутствуют ли нужные элементы разметки. Но он не может полноценно оценить, понятно ли пользователю то, что в итоге озвучивает скринридер.

Именно эти детали оказались для меня самой ценной частью проверки.

Зачем я решила проверить сайт со скринридером

В начале октября я готовила для своей Энциклопедии ИИ материал о доступности сайтов и a11y.

Accessibility обычно обсуждают в контексте пользователей с инвалидностью. Стандарты WCAG описывают требования к контрасту, клавиатурной навигации, альтернативным текстам изображений, структуре документа, подписям элементов интерфейса и другим компонентам цифровой доступности.

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

Главный вопрос звучал просто: насколько удобно пользоваться сайтом человеку, который действительно работает со скринридером?

Проверить сайт я попросила Надежду Василенко

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

Она прошла сайт с десктопа и написала:

«Посмотрела ваш сайт с десктопа — очень круто! 🎉 Уровень А достигнут. Есть некоторые замечания, не сильно критические».

После разбора добавила:

«Отличный сайт! 🌟 Я могу после дополнительных правок дать на него ссылку на своём канале, рассказать про вас и то, насколько вы открыты к инклюзивным практикам».

Для меня особенно ценными оказались именно замечания.

Техническая база уже была выстроена. Вопросы появились в тех местах, где наличие правильного элемента ещё не гарантирует удобства для пользователя.

Наличие alt ещё не делает изображение понятным

Хороший пример — альтернативные тексты изображений.

Для автоматической проверки всё выглядит достаточно просто: alt либо заполнен, либо отсутствует.

Для пользователя важнее другое: помогает ли этот текст понять содержание и функцию изображения.

На моём сайте часть alt изначально создавалась с учётом SEO и нейропоиска. В них появлялись имя, профессиональная роль, название проекта или книги. Для поисковой системы и машинной идентификации сущности такая логика понятна.

Но человеку со скринридером может быть важнее понять, кто или что находится на фотографии, что происходит в кадре и зачем этот визуал расположен на странице.

Например, вместо формулировки:

«Анастасия Акст, автор Энциклопедии ИИ и эксперт по AI-маркетингу»

описание может звучать так:

«Анастасия Акст держит в руках книгу “AI-видимость”».

Здесь остаются важные сущности — имя автора и название книги, но одновременно появляется содержание самой фотографии.

На этом примере хорошо видно, как можно совместить accessibility, SEO и AI-оптимизацию, не превращая альтернативный текст в набор поисковых формулировок.

Профессиональную роль, специализацию и другие важные для поиска данные логичнее передавать через видимый текст страницы, подписи, структурированные данные и окружающий контекст. На alt не стоит перекладывать работу всей страницы.

Визуальная структура и структура для скринридера могут различаться

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

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

Скринридер ориентируется на структуру документа: заголовки, области страницы, списки, ссылки, кнопки и другие семантические элементы.

На сайте уже использовались article, section, header, nav, main, aside, и Надежда отдельно отметила это как сильную сторону.

При этом некоторые группы ссылок и карточек, которые визуально воспринимаются как перечень, имеет смысл дополнительно размечать как список.

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

Это хороший пример того, как многое в accessibility остаётся незаметным для человека, который пользуется сайтом мышью и глазами.

Отдельные замечания появились к переключателю темы

На сайте можно выбрать светлую или тёмную тему.

Визуально механизм понятен: пользователь нажимает кнопку и сразу видит изменение интерфейса.

Скринридеру нужно передать больше информации: что делает конкретная кнопка, какое состояние выбрано сейчас и изменилось ли оно после действия.

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

С точки зрения дизайна это небольшая деталь. Для пользовательского опыта она имеет большое значение.

Интерфейс может выглядеть полностью рабочим и при этом оставлять часть пользователей без понятной обратной связи.

Почему автоматической проверки недостаточно

Автоматические инструменты нужны и полезны. Они помогают быстро обнаруживать часть проблем с контрастом, отсутствующими атрибутами, заголовками, ссылками и разметкой.

Но доступность сайта невозможно полноценно оценить одним сканером.

Инструмент может показать, что у изображения есть alt. Оценить, помогает ли этот текст понять изображение, должен человек.

Он может подтвердить наличие кнопки. Понятно ли её назначение и состояние при работе со скринридером, становится ясно только в реальном сценарии.

То же самое относится к навигации, структуре документа и последовательности действий.

После этой проверки мой подход к a11y стал ещё более практичным: автоматический аудит полезно дополнять клавиатурной навигацией, проверкой со скринридером и пользовательским тестированием.

Именно последний этап часто показывает то, чего не видно в техническом отчёте.

Где accessibility пересекается с SEO

Доступность сайта и SEO решают разные задачи, но часть хороших практик у них пересекается.

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

При этом a11y не стоит воспринимать как прямой фактор поискового ранжирования.

Связь проходит через качество самого документа: насколько последовательно организован контент, насколько однозначно описаны элементы страницы и насколько хорошо машина может определить их назначение.

Поэтому я рассматриваю accessibility как часть качественной веб-разработки, которая одновременно улучшает человекочитаемость и машинную читаемость сайта.

Как accessibility связано с нейросетями

Именно этот вопрос первоначально привёл меня к теме a11y.

Скринридер, поисковая система и нейросеть работают по разным принципам, поэтому говорить, что они «читают сайт одинаково», было бы слишком большим упрощением.

Но хорошо организованный документ удобнее для разных систем анализа.

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

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

В моей работе с AI-маркетингом и продвижением в нейросетях это особенно интересно: качественная структура сайта помогает точнее объяснить машине, кто автор, чем он занимается, какие проекты с ним связаны и как устроен сам материал.

Речь здесь не идёт о специальном «a11y-факторе ChatGPT». Гораздо точнее говорить о качестве цифрового источника в целом.

Что изменилось после пользовательской проверки

До этого эксперимента я в основном смотрела на доступность через архитектуру сайта и корректность разметки.

Проверка со скринридером добавила ещё один критерий: понимает ли человек происходящее на странице без визуального контекста?

Если кнопка технически работает, но её состояние непонятно, сценарий требует доработки.

Если alt заполнен, но описание почти ничего не сообщает о фотографии, пользовательская задача остаётся решённой не полностью.

Если несколько карточек визуально объединены в группу, а структура документа этого не отражает, логика дизайна может потеряться при озвучивании страницы.

Именно такие вещи сложно заметить, пока не послушаешь собственный сайт.

Что будет дальше

Сейчас я планирую внести замечания и после доработки снова попросить Надежду пройти основные страницы.

Следующим этапом хочу применить тот же подход к сайту Ассоциации экспертов, спикеров, модераторов и продюсеров.

Для меня здесь важна последовательность: сначала проверить уже реализованную систему на собственном проекте, затем учесть пользовательские замечания и только после этого переносить подход на другой сайт.

Так accessibility становится обычной частью продуктовой и веб-разработки, а не отдельным формальным пунктом.

Что показала проверка

Главный вывод оказался довольно простым.

Техническая проверка подтверждает, что требования учтены. Пользовательский тест показывает, насколько удобно они работают в реальном сценарии.

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

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

Именно там обычно становятся заметны детали, которые не попадают ни в один технический отчёт.

Об авторе

Анастасия Акст — эксперт по AI-маркетингу и продвижению в нейросетях. Вице-президент Ассоциации экспертов, спикеров, модераторов и продюсеров. Руководитель Всероссийской премии «Федеральный СПИКЕР».

Материал по теме:

«Доступность сайта (a11y): зачем она людям и нейросетям» https://akstai.ru/encyclopedia/expert-site/sajt-dostupnost-a11y-dlya-lyudey-i-neyrosetey.html