Как исправить проблемы с доступностью вашего сайта

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

Что такое Раздел 508?

Раздел 508 — это федеральный закон, который требует, чтобы федеральные веб-сайты были доступны, во многом так же, как здания спроектированы с пандусами для инвалидных колясок и автоматическими дверями. Правительственные веб-сайты должны легко просматриваться программами чтения с экрана и предоставлять другие инструменты доступности. Раздел 508 предназначен только для веб-сайтов .gov , но если вы получаете какую-либо форму государственных денег, ваш веб-сайт также должен быть доступен в соответствии с разделом 504 Закона о реабилитации 1973 года, иначе вы можете быть привлечены к суду и оштрафован.

Если вы полностью принадлежите к частному сектору, вам не нужно по закону соблюдать Раздел 508/504. Но вы все равно должны разрабатывать свой веб-сайт с учетом людей с ограниченными возможностями. Часто эти люди будут получать доступ к вашему веб-сайту с помощью устройства для чтения с экрана, которое будет читать им ваш веб-сайт. Обеспечение надлежащего поведения веб-сайта с помощью средства чтения с экрана является ключевой частью соблюдения требований доступности.

Как проверить доступность вашего сайта

Отличный набор инструментов для просмотра проблем доступности — это tota11y от Khan Academy. Это плагин, который вы устанавливаете на свой сайт, добавляя тег <script> со ссылкой на него; это то, что вы захотите сделать с разрабатываемой версией вашего веб-сайта, потому что иначе она будет показывать кнопку всем.

Этот плагин будет отображать ошибки рядом с соответствующими элементами, а затем подскажет, что нужно сделать, чтобы их исправить:

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

Кроме того, вы можете запустить весь свой сайт с помощью средства проверки доступности, такого как PowerMapper, которое проверяет соответствие WCAG 2.0.

Общие проблемы доступности (и как их исправить)

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

Альтернативный текст

Альтернативный текст на изображениях — серьезная проблема. Текст легко обрабатывается программой чтения с экрана, но изображения не могут быть легко переведены автоматически. Поэтому вам необходимо предоставить перевод, даже если он короткий и простой. Это можно сделать, добавив тег alt :

<img src="smiley.gif" alt="Smiley face">

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

Заглавные буквы

Заглавные буквы могут вызвать некоторую путаницу у программ чтения с экрана. Например, слово «нас» часто читается как «США». когда с большой буквы. Чтобы решить эту проблему, выберите использование свойства CSS text-transform вместо того, чтобы использовать заглавные буквы в самом тексте.

text-transform: uppercase;

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

Клавиатурная навигация

Ваш веб-сайт должен быть доступен с помощью клавиши табуляции для циклического переключения элементов. Важной частью этого являются ссылки «Пропустить навигацию». Веб-сайты часто имеют заголовки на каждой странице, и переход по ним очень утомляет при просмотре. Таким образом, первое, что должен увидеть пользователь, использующий клавиатуру, — это тег <a> с href к вашему основному контенту.

Очевидно, вы не хотите, чтобы это было в вашем заголовке все время, только когда кто-то нажимает на него. Обычно это делается путем настройки элемента с низким z-index для изменения z-index при наведении фокуса с помощью модификатора выбора CSS :focus. :

.show-on-focus:focus {
  z-index: 1;
  top: 0;
  left: 0;
}

Еще одна проблема — отсутствие вкладок. Основные ориентиры на вашем сайте должны легко перемещаться с помощью табуляции. Вы можете сделать это, просто добавив атрибут tabindex к элементам:

<div tabindex="0">  ...  </div>

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

Контраст

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

К счастью, tota11y отлично подсказывает, какие элементы имеют проблемы:

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

Входные метки

Любой тег <input> должен иметь соответствующий тег <label> , чтобы средство чтения с экрана знало, для чего предназначен ввод. Иногда он может использовать текст-заполнитель, но этого недостаточно.

<label for="my-input">
  Label text here...
</label>
<input id="my-input">

Тег <label> размещается непосредственно над вводом и связан с ним с помощью атрибута for=\\ , содержащего идентификатор ввода.

Достопримечательности АРИИ

Их легко добавить и разделить области вашего сайта на блоки:

Вы можете добавить их, просто добавив атрибут role в теги div:

<div role="navigation">  ...  </div>

Сделать элементы невидимыми для программ чтения с экрана

Если что-то мешает программе чтения с экрана, но должно быть на вашем сайте, вы можете убрать это с помощью атрибута aria-hidden :

<span aria-hidden="true" tabindex="-1">

Кроме того, HTML-атрибут hidden и директива CSS display: none сделают элемент невидимым для программ чтения с экрана. Вы должны убедиться, что программа чтения с экрана не читает HTML из мест, которые она не должна видеть.