Сделав свой сайт доступным для людей с ограниченными возможностями, вы в конечном итоге становитесь доступными для всех. Фактически, сделать ваш сайт более доступным, может даже помочь людям найти ваш сайт в поисковых системах. Зачем? Потому что поисковые системы используют одни и те же сигналы, которые читатели экрана делают, чтобы находить и понимать содержимое вашего сайта.
Но как именно вы делаете доступный веб-сайт, не становясь экспертом по кодированию?
Вот несколько советов и приемов, которые могут использовать почти любой, кто имеет базовые знания HTML, чтобы улучшить доступность своего веб-сайта.
Инструменты веб-доступности
W3C имеет фантастический список инструментов веб-доступности, которые вы можете использовать в качестве проверки, чтобы выявить потенциальные проблемы с вашим сайтом. Тем не менее, я по-прежнему рекомендую делать некоторые исследования с помощью устройства для чтения с экрана и испытывать это для себя.
Понимание читателей экрана
Одним из наиболее важных способов улучшить доступность вашего сайта является то, что он может быть понят читателями экрана. Считыватели экрана используют синтезированный голос для чтения текста на экране. Это звучит довольно просто; тем не менее, устройства для чтения с экрана или другие вспомогательные технологии могут не понимать ваш сайт так, как вы его настраиваете.
Первое, что вам может понадобиться - попробовать скрин-ридер и посмотреть, как это происходит. Если вы находитесь на Mac, попробуйте использовать VoiceOver.
- Идти к Системные настройки.
- Выбрать Доступность.
- Выбрать VoiceOver.
- Установите флажок для включения VoiceOver.
Вы можете включать и выключать его с помощью команды-F5.
Если вы находитесь на компьютере под управлением Windows, вы можете загрузить NVDA. Вы можете настроить его для включения и выключения с помощью сочетания клавиш + alt + n.
Оба устройства чтения с экрана работают, позволяя пользователю перемещаться по клавиатуре (это имеет смысл - если вы не видите, использование мыши будет проблемой) и создавая область фокусировки для навигации. Основное внимание сосредоточено на том, что клавиатура «указана», но обычно она отображается как выделенный поле вокруг объекта фокусировки вместо курсора.
Вы можете изменить как голос, так и скорость, с которой голос читает, если настройки по умолчанию раздражают (и примерно через пять минут прослушивания стандартного медленного чтения голоса они обычно есть). Слепые люди обычно читают веб-сайты с установленными на высокой скорости экранами.
Это может помочь закрыть глаза, когда вы это сделаете, но это также поможет держать их открытыми и сравнивать. Некоторые из вещей, которые вы сразу можете заметить при прослушивании вашего веб-сайта, это то, что некоторые из текста могут быть не в порядке. Заголовки и таблицы могут быть смешаны. Изображения могут быть пропущены или они могут сказать «изображение» или что-то одинаково бесполезное. Таблицы обычно читаются как серия предметов без контекста.
Вы можете, надеюсь, исправить это.
Alt-теги или альтернативный атрибут
Атрибут alt-tag или альтернативный (alt) используется в HTML для описания изображения. В HTML это выглядит примерно так:
Даже если вы создадите свой веб-сайт с помощью визуального инструмента, который скрывает ваш HTML-код, вы почти всегда сможете ввести описание изображения. Вы можете ввести ничего (alt = ""), но было бы лучше дать каждому изображению полезное описание. Если бы вы были слепыми, что вам нужно знать об изображении? «Женщина» не очень помогает, но, может быть, «Схема рисования чертежей для женщин, включая доступность, удобство использования, брендинг и дизайн».
Текст заголовка
Веб-сайты не всегда отображают тег заголовка HTML, но он полезен для чтения с экрана. Убедитесь, что на каждой странице вашего сайта есть описательный (но не слишком многословный) заголовок, который сообщает посетителям, о чем идет речь.
Дайте сайту хорошую информационную иерархию
Разбивайте большие куски текста с заголовками и, если возможно, используйте заголовки с иерархией H1, H2, H3 соответствующим образом. Это не только упрощает работу вашего веб-сайта для чтения с экрана, но и облегчает для всех остальных. Это также отличный сигнал для Google и других поисковых систем, чтобы помочь им лучше индексировать ваш сайт.
Аналогичным образом, вы должны убедиться, что ваш веб-сайт находится в логическом порядке содержания и что у вас нет ящиков с несвязанной информацией. Если вы используете рекламу, следите за тем, чтобы ваши объявления не слишком навязчивы и слишком часто разбивали текст на вашем веб-сайте.
Сделать лучшие таблицы
Если вы используете HTML-таблицы, вы можете добавлять титры к своим таблицам с помощью тега, чтобы сделать их более понятными для чтения с экрана, а не просто сделать заголовок таблицы жирным шрифтом. Вы также можете добавить элемент «scope» и четко обозначить новые строки и столбцы в своей таблице, чтобы считыватели экрана не просто сбивали серию ячеек таблицы без какого-либо контекста.
Навигация по клавиатуре
В общем, все, что вы помещаете на свой сайт, должно быть тем, что кто-то мог бы сделать, используя только клавиатуру. Это означает, что ваши кнопки навигации не должны быть анимированными кнопками выпадающего списка, если вы не можете использовать их с устройством чтения с экрана (попробуйте и посмотрите, не уверены ли вы - некоторые кнопки запрограммированы для использования клавиатуры).
Субтитры
Если вы добавляете видео или аудио-элементы на свой сайт, они должны иметь подписи. HTML5 и многие потоковые видеопотоки (например, YouTube) предлагают поддержку скрытых субтитров. Закрытые титры полезны не только для доступности, но и для пользователей, которые могут просматривать ваш сайт где-нибудь, где они не могут воспроизводить аудио, например, в офисе или в шумном месте.
Для подкастов или других аудио-элементов подумайте о предоставлении текстовой расшифровки. Это не только полезно для людей, которые не могут прослушивать аудио, так как текст упростит Google и другие поисковые системы индексировать этот контент и помочь вашему ранжированию в Google.
ARIA
Если вы хотите перейти на расширенный уровень доступности, спецификации HTML5 ARIA или WAI-ARIA должны стать новым стандартом в будущем. Однако это сложное (и развивающееся) техническое руководство, поэтому то, что вы можете сделать, это использовать проверку достоверности ARIA, чтобы проверить, есть ли на вашем веб-сайте какие-либо проблемы, которые вы можете решить. Mozilla также имеет более доступное руководство для начала работы с ARIA.
