10 способов улучшить доступность сайта

По данным Всемирной организации здравоохранения, 15% населения мира (около 1 млрд человек) — люди с ограниченными возможностями. Поэтому так важно убедиться, что содержание сайта доступно для каждого. Эти 10 советов позволят адаптировать его для более широкой аудитории.

В идеале текст должен быть доступен для людей с различными особыми потребностями:

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

Вот 10 способов улучшить доступность сайта для пользователей этих категорий.

1. Используйте семантический HTML

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

Решение. Используйте семантические элементы HTML, которые описывают его содержимое, например header, nav, main, article, aside или footer. Программы чтения с экрана не только преобразуют текст в речь, но и используют информацию из элементов HTML. Семантические блоки упрощают им работу и дают четкую структуру, которой они могут следовать.

2. Указывайте альтернативный текст

Многие пренебрегают такой важной деталью, как альтернативный текст для нетекстовых элементов. Он позволяет посетителям с нарушением зрения интерпретировать эти блоки и их содержимое.

Решение. Всегда прописывайте альтернативный текст для информационных элементов. Исключением могут быть лишь декоративные блоки, которые не несут никакой дополнительной информации. К ним относятся иконки, дополняющие ссылки или фоновые изображения. В других случаях заполняйте тег alt для элементов img, чтобы программа чтения с экрана могла их озвучить.

3. Используйте атрибуты aria

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

Решение. При необходимости используйте атрибуты aria для предоставления дополнительной информации о вспомогательных технологиях. Например:

• используйте атрибут role, если роль элемента неясна,
• прописывайте свойства для придания элементам дополнительного значения или семантики, например: aria-labelledby,
• указывайте состояния элементов, например: пропишите aria-disabled = "true", чтобы сообщить вспомогательным технологиям, что элемент отключен.

Если нужно полностью скрыть декоративные элементы для программ чтения с экрана, можно использовать атрибут aria-hidden = "true" в элементах HTML.

4. Упрощайте навигацию

Если на сайте неверно расставлены индексы перехода по клавише Tab, пользователи без мыши будут лишены доступа к некоторым элементам. Это усложнит навигацию.

Решение. Используйте глобальный атрибут tabindex, чтобы добавить фокус элементам там, где это необходимо. Для блоков, которые не должны быть доступны с помощью клавиатуры, можно использовать tabindex="- 1". Также убедитесь, что для интерактивных элементов установлено свойство outline, иначе пользователи не смогут увидеть, какой элемент в данный момент находится в фокусе.

5. Установите правильный размер сенсорных целей

Маленькие сенсорные цели для устройств с небольшим экраном затрудняют навигацию и взаимодействие с элементами.

Решение. Размер интерактивных элементов, например кнопок и ссылок, должен быть не менее 48x48 пикселей с интервалом вокруг них минимум 8 пикселей. Это упростит навигацию и позволит избежать ложных касаний.

6. Адаптируйте сайт при масштабировании на 200%

Пользователям, страдающим проблемами со зрением, комфортнее использовать увеличенный шрифт. Поэтому содержимое сайта должно масштабироваться до 200% без потери функциональности. Это означает, что текст должен хорошо перестраиваться, а функционал сайта не должен пострадать.

Решение. Убедитесь, что масштаб можно увеличить вдвое без нарушения макета. Так пользователи с нарушениями зрения смогут лучше видеть контент.

7. Используйте достаточный цветовой контраст

Пользователям с плохим зрением бывает сложно отличить фон от текста с низким цветовым контрастом.

Решение. Согласно ISO-9241–1, минимальный рекомендуемый коэффициент контрастности составляет 3:1. Если вы стремитесь к уровню доступности сайта AA, необходимо обеспечить постоянное соотношение не менее 4,5:1, а для уровня AAA — 7:1. Чтобы проверить коэффициент контрастности сайта, можно использовать такие онлайн-инструменты, как Contrast-ratio.com или расширение Axe by deque. Также контрастность цветов можно проверить с помощью Chrome DevTools.

8. Не выделяйте элементы только цветом

Дальтонизмом страдает примерно каждый 12 мужчина и каждая 200 женщина во всем мире. Цвет — это эффективный способ обозначить цель, например, красный для сообщений об ошибках. Однако элементы, выделенные только цветом, могут быть неверно интерпретированы пользователями с дальтонизмом.

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

9. Оптимизируйте динамическое содержимое

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

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

• Аудио- и видеоконтент должен иметь субтитры и расшифровку. Не используйте функцию автоматического воспроизведения видео.
• Слайд-шоу и карусели также должны содержать подписи и быть активными для навигации с клавиатуры.
• Не используйте мигающие элементы или световые вспышки, чтобы не подвергать опасности людей с эпилепсией.

10. Добавляйте подписи в сообщения об ошибках

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

Решение. Убедитесь, что в сообщениях об ошибках помимо цвета используются:

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

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