Как провести базовый аудит доступности

Опубликовано: 2017-08-09

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

Как вы помните из моей серии обзоров, доступный веб-сайт воспринимаем, удобен в использовании, понятен и надежен. Тестирование, чтобы убедиться, что ваш сайт соответствует всем четырем принципам доступности, не требует написания кода, так что не беспокойтесь. Мы можем установить расширение для Chrome или два, но вы поблагодарите меня позже. Давайте начнем!

ПРИМЕЧАНИЕ. В этом учебном пособии предполагается, что вы знаете, как использовать Chrome Inspector или какой-либо из основных инструментов разработчика браузера.

Воспринимаемый

макет с помощью аудита доступности маховика женщина в солнцезащитных очках с планшетом

Начните с воспринимаемого, потому что, если ваш сайт не воспринимается пользователем, он не знает, что он существует. Здесь мы сосредоточимся на трех вещах: альтернативах текста, заголовках и цвете.

Для каждого изображения на вашем сайте, которое является более чем декоративным (это означает, что это жизненно важная часть информации, а не просто улучшение), изображение должно иметь атрибут alt . Вы можете проверить это, просмотрев исходный код изображения и найдя атрибут. Если он есть, отлично! Теперь нам нужно убедиться, что значение атрибута полезно. Атрибут alt должен описывать изображение таким образом, чтобы информировать пользователей с нарушениями зрения. Это НЕ возможность запихнуть SEO-ключевые слова на ваш сайт. Сделайте свое описание кратким, по существу и полезным. Более длинные описания должны быть сохранены для самого контента сайта.

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

Наконец, нам нужно проверить наши цвета. Для этого мы установим расширение Chrome, которое включает режим оттенков серого. После установки снова загрузите свой сайт и включите расширение. Обратите внимание на области, которые трудно прочитать. Вот где ваши проблемы с противоположной точки зрения. Оттуда отключите оттенки серого и используйте средство проверки цветового контраста Snook, чтобы проверить свои результаты. Вам нужно будет использовать инспектор, чтобы получить ваши шестнадцатеричные значения, если у вас их нет под рукой. Помните, что все, что меньше 4,5 (или 3,0 для крупного текста), является проблемой.

Действующий

Следующим шагом является проверка работоспособности сайта. Это означает, что мы будем тестировать функциональность клавиатуры. Для этого откройте свой сайт. Как только страница загрузится, нажмите клавишу табуляции. Что происходит? Надеюсь, появится ссылка для пропуска. Если нет, у вас должен быть хотя бы контур вокруг первой ссылки на странице. В идеале у вас должны быть состояния :focus с пользовательским стилем, но минимум должен соответствовать тому, что предоставляет браузер. Оттуда продолжайте нажимать клавишу табуляции, чтобы убедиться, что вы переходите от ссылки к ссылке в том порядке, в котором они появляются на странице. Если ваш фокус продолжает прыгать, у вас есть проблема с индексом вкладок, которую необходимо решить. Часто виноваты плагины форм.

макет по аудиту доступности маховика мужчина во фланели на мобильном телефоне в чехле

понятно

Далее мы проверим ваш сайт, чтобы убедиться, что он читаем. В конце концов, если пользователь не может прочитать ваш контент, какой в ​​нем смысл? Требования здесь довольно просты: можно ли определить язык вашего сайта с помощью кода? Чтобы проверить, откройте инспектор и посмотрите на основной <html> . У него есть атрибут lang ? Если это так, вы ясно. Вы также должны убедиться, что ко всем сегментам, написанным на другом языке, применен атрибут lang.

Существуют и другие проверки читабельности уровня AAA, но они выходят за рамки базового аудита. В целом, однако, вы хотите, чтобы ваш контент был на уровне чтения 6-го класса, если только ваша целевая аудитория не имеет более высокого уровня образования.

Другие важные аспекты нестабильности вашего сайта связаны с сообщениями об ошибках и изменением контекста. Точнее, его отсутствие. Когда пользователь фокусируется или активирует ввод, существенных изменений происходить не должно. Страница не должна переходить, если пользователь не предупрежден каким-либо образом (значок стрелки, вспомогательный текст и т. д.). Это те вещи, которые вы бы заметили при тестировании с клавиатурой.

То же самое можно сказать и о сообщениях об ошибках при тестировании ваших форм. Ошибки должны четко отображаться для пользователя и оставаться на экране, чтобы он мог их исправить. Это то, что даже крупные веб-сайты постоянно ошибаются. Они забывают обратить внимание на ту часть страницы, где есть ошибка, или хотя бы как-то ее пометить. Проверьте свои формы на наличие ошибок и убедитесь, что сообщения понятны. Использование плагина твердых форм очень поможет в этом, но не полагайтесь на плагин, чтобы сделать всю вашу работу. Вы также должны убедиться, что вы не просто используете цвет (обычно красный) для обозначения ошибки. Сам текст «Ошибка» очень важен, особенно для людей с дальтонизмом к красному/зеленому цвету.

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

Крепкий

компоновка с помощью маховика аудита доступности рабочего места с графиками и блокнотом перед клавиатурой

Наконец, ваш сайт должен быть надежным. Это означает, что сайт можно использовать со вспомогательными технологиями, такими как программы чтения с экрана. Если ваш сайт хорошо оформлен с помощью HTML, все должно быть в порядке. Просто имейте в виду, что некоторые современные браузеры, включая Chrome, исправляют основные ошибки HTML или, по крайней мере, пытаются их исправить. Самый быстрый способ проверить надежность вашего сайта — загрузить его в Safari и включить VoiceOver, встроенную программу чтения с экрана. Если ваш сайт не работает, вам необходимо решить эти проблемы.

Подведение итогов

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

Если вы пропустили это, ознакомьтесь с этой серией статей о специальных возможностях:

  • Введение в специальные возможности: часть 1
  • Введение в доступность: часть 2
  • Введение в специальные возможности: часть 3