Ручное тестирование доступности

Основы ручного тестирования

Ручное тестирование доступности использует тесты, инструменты и методы, основанные на анализе клавиатуры, визуальном восприятии и когнитивных процессах, чтобы выявить проблемы, которые не могут быть обнаружены автоматизированными средствами. Поскольку автоматизированные средства не охватывают все критерии успеха, определенные в WCAG, крайне важно проводить автоматизированные тесты доступности и продолжать тестирование !

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

Преимущества ручного тестирования доступности:

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

Недостатки ручного тестирования доступности:

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

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

Виды ручных тестов

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

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

Проверка клавиатуры

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

Тесты клавиатуры отвечают на такие вопросы, как:

• Для работы веб-страницы или функции требуется мышь?
• Логичен ли и интуитивно понятен ли порядок перехода по вкладкам?
• Индикатор фокуса клавиатуры всегда виден?
• Может ли возникнуть ситуация, когда фокус застревает на элементе, который не должен его удерживать?
• Можно ли обойти или спрятаться за элементом, который должен быть в фокусе?
• При закрытии элемента, получившего фокус, возвращался ли индикатор фокуса в логичное место?

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

Визуальная проверка

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

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

• Есть ли проблемы с цветовым контрастом, которые автоматизированный инструмент не смог бы обнаружить, например, текст поверх градиента или изображения?
• Есть ли элементы, которые выглядят как заголовки, списки и другие структурные элементы, но не закодированы как таковые?
• Сохраняется ли единообразие навигационных ссылок и полей ввода форм на всем веб-сайте или в приложении?
• Присутствуют ли какие-либо мигания, стробоскопические эффекты или анимация, превышающие рекомендуемые значения?
• Соответствует ли текст необходимым интервалам? Для букв, слов, строк и абзацев?
• Вы можете просмотреть весь контент, используя экранную лупу или функцию масштабирования в браузере?

Проверка содержимого

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

Проверка содержимого отвечает на такие вопросы, как:

• Являются ли заголовки страниц, подзаголовки разделов и подписи форм понятными и информативными?
• Являются ли альтернативные изображения краткими, точными и полезными?
• Используется ли цвет как единственный способ передачи смысла или информации?
• Ссылки носят описательный характер, или вы используете общий текст, например, «читать далее» или «нажмите здесь»?
• Происходят ли какие-либо изменения в языке внутри страницы?
• Используется ли простой язык , и расшифровываются ли все аббревиатуры при первом упоминании?

Некоторые проверки содержимого можно частично автоматизировать. Например, можно написать JavaScript-линтер, который проверяет наличие фразы "Нажмите здесь" и предлагает внести изменения. Однако такие пользовательские решения часто всё равно требуют вмешательства человека для изменения текста на контекстно-зависимый.

Демонстрация: Ручное тестирование

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

Шаг 1

В обновленной демо-версии CodePen применены все автоматические обновления для обеспечения доступности.

Чтобы перейти к следующим тестам, просмотрите код в режиме отладки . Это важно, поскольку удаляется тег <iframe> , окружающий демонстрационную веб-страницу, который может мешать работе некоторых инструментов тестирования. Узнайте больше о режиме отладки CodePen .

Шаг 2

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

Проблема 1: Видимый индикатор фокусировки

Вы сразу же заметите первую проблему с клавиатурой — вернее, вы её не заметите, — поскольку видимый индикатор фокуса был удалён. При просмотре CSS в демонстрационном примере вы обнаружите добавленный в код пресловутый параметр "outline: none".

  :focus {
    outline: none;
  }

Давайте это исправим.

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

:focus {
  outline: 3px dotted #008576;
}

Выпуск 2: Порядок фокусировки

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

<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>

Давайте это исправим.

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

<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" required>

Шаг 3

После проверки фокуса клавиатуры переходим к визуальной проверке и проверке содержимого.

Проблема 3: Цветовой контраст ссылок

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

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

Давайте это исправим.

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

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

При просмотре демонстрации с помощью инструмента проверки контрастности ссылок вы увидите, что цвет ссылки соответствует требованию контрастности 4,5:1 между текстом обычного размера и фоном. Однако неподчеркнутые ссылки также должны соответствовать требованию контрастности 3:1 по отношению к окружающему тексту.

Один из вариантов — изменить цвет ссылки, чтобы он соответствовал другим элементам на странице. Но если вы измените цвет ссылки на зеленый, то и основной текст должен быть изменен, чтобы соответствовать общим требованиям к цветовому контрасту между всеми тремя элементами: ссылками, фоном и окружающим текстом.

Выпуск 4: Цветовой контраст иконок

Ещё один упущенный момент, касающийся цветового контраста, — это иконки социальных сетей. В модуле о цвете и контрасте вы узнали, что основные иконки должны иметь цветовой контраст 3:1 по отношению к фону. Однако в демонстрационной версии иконки социальных сетей имеют коэффициент контрастности 1,3:1.

Давайте это исправим.

Для соответствия требованиям к цветовому контрасту 3:1 значки социальных сетей были изменены на более тёмно-серый цвет.

Выпуск 5: Структура контента

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

p.bullet {
   text-align: justify;
}

Давайте это исправим.

Чтобы изменить выравнивание текста в демонстрационном примере, вы можете изменить код на text-align: left; или полностью удалить эту строку из CSS, поскольку left — это выравнивание по умолчанию для браузеров. Обязательно протестируйте код на случай, если другие унаследованные стили изменят выравнивание текста по умолчанию.

p.bullet {
   text-align: left;
}

Шаг 4

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

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

Следующий шаг

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

Теперь перейдите к последнему модулю тестирования, посвященному проверке вспомогательных технологий .