Несколько недель назад я опубликовал статью, в которой освещались популярные инструменты и другие аспекты проверки доступности вашего сайта. Там я кратко коснулся возможных ошибок, которые эти инструменты ищут в вашем коде, и того, как их избежать. В этой статье я расскажу о том, как сделать веб-сайт доступным, следуя WCAG 2.0 (Рекомендации по доступности веб-контента).
Чтобы получить четкое представление о различных видах проблем доступности и о том, как пользователи используют вспомогательные технологии для их преодоления, вы можете прочитать основные компоненты доступности веб-страниц, прежде чем мы продолжим работу.
Заголовок страницы
Заголовок страницы — это текст, включенный в тег title Он отображается в строке заголовка некоторых браузеров и отображается в результатах поиска и закладках как заголовок страницы. Он также читается программами чтения с экрана при загрузке страницы. Хотя пользователь, не использующий программу чтения с экрана, может избежать чтения неуместного заголовка, программа чтения с экрана всегда будет читать его. Поэтому название следует выбирать с осторожностью.
Домашняя страница SitePoint, заголовок которой отображается во всплывающей подсказке.
Руководство по заголовкам страниц
- Убедитесь, что заголовок адекватно описывает характер страницы и имеет соответствующую длину.
- Две страницы на одном сайте не должны иметь одинаковый заголовок.
- Программа чтения с экрана будет считывать заголовок при каждом изменении, поэтому не изменяйте заголовок страницы, за исключением редких случаев (например, в приложении чата).
Картинки
Изображения практически бесполезны для слепых пользователей. Важно предоставить связанный alt Альтернативный текст не должен описывать только изображение, но он также должен обеспечивать такой же пользовательский опыт. Например, альтернативный текст для изображения значка «мир», используемый для уведомлений в Facebook, должен гласить «уведомления», а не «мир» или «планета Земля».
Альт-текст для изображения считывается программами чтения с экрана, поэтому изображения, используемые в декоративных целях, почти всегда должны включаться в качестве фона в CSS, иначе для их атрибута alt должно быть задано нулевое или пустое значение, что заставит программу чтения с экрана игнорировать образ.
Вы можете спросить: почему бы просто не исключить атрибут alt Это потому, что если альтернативный текст отсутствует, программа чтения с экрана считывает вместо него атрибут src Естественно, вы этого не хотите, поэтому лучше включить декоративные изображения с помощью CSS или же включить атрибут alt, но оставить его пустым.
Атрибут alt Если пользователь выключил изображения для экономии полосы пропускания, альтернативный текст обычно отображается вместо вашего отключенного изображения. Таким образом, вы будете знать, для чего изображение, не загружая его.
Руководство по доступным изображениям
- Как упоминалось выше, альтернативный текст должен объяснять цель изображения, а не просто описывать изображение.
- Убедитесь, что вы включили любой текст, который является частью изображения в альтернативный текст.
- Предоставьте нулевой или пустой атрибут alt для изображений, которые не несут никакого полезного значения, например, используемые в декоративных целях.
- Если изображение сложное, например график, описание должно быть таким, как оно есть, а данные на изображении должны быть представлены в другом месте на странице.
- Альтернативный текст должен быть точным и не должен содержать лишних слов, таких как «Изображение» или «Ссылка на».
Как проверить изображение и текст
Самый простой способ — проверить альтернативный текст для множества различных изображений — использовать инструмент оценки доступности веб-сайтов (WAVE) , который перечисляет альтернативный текст каждого изображения в URL и отображает ошибку, если в изображениях отсутствует альтернативный текст.
Заголовки
Большинство разработчиков CSS понимают, как использовать заголовки ( h1h2 Однако в начале движения CSS многие страницы выглядели так:
<div class="heading">HTML</div>
<div class="text">
<p>HTML is the language of the web.</p>
<div class="subheading">br tag</div>
<p>br is used to insert line breaks.</p>
<div class="subheading">p tag</div>
<p>p is used to create paragraphs.</p>
</div>
<div class="heading">CSS</div>
<div class="text">
<p>CSS is used for styling</p>
</div>
Как вы можете видеть, заголовки не используются, а элементы стилизуются с использованием различных классов. Гораздо более доступный способ представить это с помощью заголовков:
<h2>HTML</h2>
<p>HTML is the language of the web.</p>
<h3>br tag</h3>
<p>br is used to insert line breaks.</p>
<h3>p tag</h3>
<p>p is used to create paragraphs.</p>
<h2>CSS</h2>
<p>CSS is used for styling.</p>
Надлежащая структура заголовка должна поддерживаться, и стилизация должна применяться к элементам HTML. К счастью, большинство разработчиков сегодня имеют хорошие привычки и делают это довольно хорошо по большей части.
Руководство для заголовков
- Все страницы должны иметь хотя бы один заголовок.
- Текст, который служит для заголовков или подзаголовков, должен быть обернут надлежащей разметкой заголовка.
- Надлежащая иерархия заголовков должна быть сохранена.
Как проверить доступность заголовка
Хотя проверки без инструмента возможны при сравнении разметки с визуальной структурой страницы, обычно рекомендуется использовать такой инструмент, как WAVE или W3 HTML Validator .
Цветовой контраст
Поскольку цветовой контраст между фоном и передним планом уменьшается, становится трудно различить то, что представляется — будь то текст или изображения. Людям с дальтонизмом также становится трудно читать низкоконтрастный текст, потому что цвета выглядят как различные оттенки серого (в зависимости от степени их инвалидности).
Говорят, что у каждого двенадцатого человека какой-то цветовой дефицит. Это означает, что огромное количество людей не могут видеть ваш сайт так, как вы.
Руководство по цветовой контраст
- При разработке вашего сайта, убедитесь, что ваш цветовой контраст высок, чтобы максимизировать читаемость.
- Избегайте использования фоновых изображений, которые имеют широкий диапазон цветов.
Как проверить цветовой контраст
- Используйте надстройку браузера, такую как Grayscale Tool для Chrome, чтобы увидеть, как выглядит веб-страница в оттенках серого.
- Используйте инструмент проверки цветового контраста, такой как Check My Colors (который проверяет всю страницу на предмет низкой контрастности) или Contrast Ratio (который дает вам оценку WCAG после ввода текста и цветов фона, которые вы собираетесь использовать).
checkmycolours.com Инструмент для проверки контрастности.
Инструмент контрастного тестирования Леа Веру.
Доступ с клавиатуры
Люди, которые не могут точно использовать мышь, полагаются исключительно на клавиатуру для навигации по веб-сайтам. Для таких пользователей веб-сайт должен перемещаться только с помощью клавиатуры, а фокус клавиатуры на определенных элементах должен быть виден.
Руководство по доступности клавиатуры
- Каждый элемент должен быть доступен через клавиатуру: ссылки, кнопки, поля формы и элементы управления для редакторов WYSIWYG или медиаплееров.
- В выпадающих меню убедитесь, что каждый элемент доступен с клавиатуры с помощью клавиш со стрелками или.
- Убедитесь, что пользователь может вкладывать элементы, в которые он вкладывал, и не зацикливаться на них.
- Проверяйте смещение фокуса в порядке чтения при перемещении по контенту — сверху вниз и слева направо (напротив для языков справа налево, таких как арабский).
- Визуальный фокус не должен быть потерян.
Как проверить доступ к клавиатуре
- Нажмите на адресную строку с помощью мыши и не используйте мышь снова. Вместо этого используйте клавишу Tab для перемещения по элементам и используйте SHIFT + Tab для перемещения назад.
- В раскрывающихся меню или других элементах вам может понадобиться использовать клавиши со стрелками вместо клавиши табуляции для навигации.
- Убедитесь, что вы не теряете визуальный фокус при просмотре данных.
Используя BAD
Демонстрация « До после» (BAD) — это демонстрация, созданная W3C, которая показывает недоступный веб-сайт, объясняет проблемы с ним и тем же веб-сайтом после выполнения общих рекомендаций по доступности.
W3.org до и после демонстрации.
Вы можете сравнить страницы в демоверсии, чтобы лучше понять доступность веб-страниц.
Вывод
Зная о проверках доступности веб-сайтов, вы должны связаться с владельцами веб-сайтов и / или разработчиками по поводу ваших выводов и предложить им исправить свои ошибки. Тем не менее, вы также должны подумать о правильном подходе к ним
Мы рассмотрели несколько тем, касающихся проверки доступности веб-сайта, но есть много других проверок, которые мы не обсуждали. Полный список простых проверок доступности веб-сайтов можно найти в первоначальном обзоре веб-доступности W3C .
И следует отметить, что доступность всегда является постоянной задачей. Даже если веб-сайт проходит все проверки доступности веб-сайта, могут существовать области, к которым трудно получить доступ с клавиатуры или с помощью программы чтения с экрана или другого вспомогательного устройства. Ничто не сравнится с фактическим тестированием, поэтому продолжайте тестирование даже после того, как все технические тесты пройдены.