Как проверить доступность сайта за 5 шагов
Как проверить доступность сайта за 5 шагов
Это способы, с помощью которых вы можете вручную просмотреть и улучшить доступность своего веб-сайта. Это полезная отправная точка для обеспечения доступности, но ее следует использовать для максимизации инклюзивности.
1. Добавьте субтитры для всех видео и аудиоконтента.
Скрытые субтитры (или субтитры) (как показано на снимке экрана выше) представляют собой слова, отображаемые синхронно с визуальным или аудиоконтентом.
Они помогают людям с проблемами слуха, а также людям, которые могут находиться в шумной обстановке. Стенограммы также часто могут улучшить ваши усилия по SEO.
Большинство платформ видеохостинга имеют возможность включать субтитры, когда люди просматривают ваш контент. Убедитесь, что эта опция включена, и самостоятельно проверьте содержимое, чтобы убедиться, что она работает.
2. Включите альтернативный текст для изображений.
Альтернативный текст (альтернативный текст) — это письменное описание нетекстового контента, такого как изображения и видео. Он используется вспомогательными технологиями, такими как программы чтения с экрана, для интерпретации объектов на экране для ваших пользователей.
Замещающий текст можно добавить к контенту через платформу хостинга вашего веб-сайта. Постарайтесь сделать это как можно более ясным, кратким и информативным.
Вы также можете определить недостающий замещающий текст с помощью бесплатных инструментов сканера специальных возможностей. Важно отметить, что хотя инструмент может сказать вам, какой контент не имеет замещающего текста, он не может сказать вам, достаточно ли доступен замещающий текст, который у вас есть.
3. Обеспечьте цветовой контраст
Цветовой контраст — это разница в освещении между объектами на переднем и заднем плане вашего сайта. Чем больше разница, тем легче людям читать и исследовать ваш сайт.
Сильный цветовой контраст особенно полезен для людей с нарушениями зрения и дальтонизмом, а также для большинства людей, чтобы не напрягать глаза.
Рекомендации по обеспечению доступности веб-контента (WCAG) поясняют, что оптимальный цветовой контраст для текста и изображений текста должен составлять 4,5:1. Крупный текст и изображения крупного текста должны иметь коэффициент контрастности не менее 3:1.
Чтобы упростить соблюдение этих технических спецификаций, этот бесплатный инструмент от a11y (проект сообщества, призванный облегчить доступность) может выявить проблемы цветового контраста на вашем веб-сайте.
4. Проверьте навигацию по клавиатуре
Навигация с помощью клавиатуры позволяет людям использовать ваш сайт, не полагаясь на мышь. Он позволяет людям прокручивать, открывать ссылки и выполнять действия с помощью клавиатуры. Это важно для людей с ограниченной подвижностью.
Навигация с помощью клавиатуры требует четких визуальных указаний о том, где находится пользователь на странице и какие действия он может предпринять. Например, может потребоваться появление раскрывающегося меню, чтобы пользователь мог выбрать ввод для формы.
Проверка навигации с помощью клавиатуры:
Попробуйте выполнять задачи на своем сайте, используя только клавиатуру.Обратите внимание, есть ли потоки, которые не ясны, или есть элементы, до которых вы не можете
добраться.
Поощряйте членов команды делать то же самое и сообщайте о любых блокировках как о проблемах доступности, которые необходимо устранить.
5. Правильно используйте стили заголовков
Стили заголовков — это структуры H1, H2, H3 и т. д., которые определяют иерархию контента на вашем веб-сайте. Это не только делает текст более аккуратным, но также помогает пользователям понять поток текста и общий обмен сообщениями.
В то же время эти заголовки информируют программы чтения с экрана и поддерживают пользователей с нарушениями зрения, читающих ваш сайт.
Фактически, вы заметите, что в этой статье есть несколько заголовков H2, охватывающих основные разделы текста, а во всех подразделах используются заголовки H3.
Вы можете проверить структуру заголовков через серверную часть вашего веб-сайта или щелкнув правой кнопкой мыши и выбрав «Проверить» на любой веб-странице. Ряд бесплатных инструментов могут показать вам страницы, на которых отсутствуют стили заголовков.
