В этом модуле основное внимание уделяется использованию вспомогательных технологий (AT) для тестирования доступности. Человек с ограниченными возможностями может использовать АТ, чтобы увеличить, сохранить или улучшить возможности выполнения задачи.
В цифровом пространстве АТ могут быть:
- Никаких или низкотехнологичных: палочки для головы и рта, ручные лупы, устройства с большими кнопками.
- Высокие технологии: устройства с голосовым управлением, устройства слежения за взглядом, адаптивные клавиатуры и мыши.
- Аппаратное обеспечение: кнопки переключения, эргономичная клавиатура, устройство Брайля с автоматическим обновлением.
- Программное обеспечение: программы преобразования текста в речь, живые субтитры, программы чтения с экрана.
Мы рекомендуем вам использовать несколько типов AT в общем рабочем процессе тестирования.
Основы тестирования программы чтения с экрана
В этом модуле мы сосредоточимся на одном из самых популярных цифровых AT — программах чтения с экрана. Программа чтения с экрана — это часть программного обеспечения, которая считывает базовый код веб-сайта или приложения. Затем он преобразует эту информацию в речь или вывод Брайля для пользователя.
Программы чтения с экрана необходимы слепым и слепоглухим людям, но они также могут принести пользу людям со слабым зрением, нарушениями чтения и когнитивными нарушениями.
Совместимость с браузером
Доступно несколько вариантов чтения с экрана. Наиболее популярными программами чтения с экрана являются JAWS, NVDA и VoiceOver для настольных компьютеров, а также VoiceOver и Talkback для мобильных устройств.
В зависимости от вашей операционной системы (ОС), любимого браузера и устройства, которое вы используете, одна программа чтения с экрана может оказаться лучшим вариантом. Большинство программ чтения с экрана созданы с учетом конкретного оборудования и веб-браузеров. Если вы используете программу чтения с экрана в браузере, для которого она не была откалибрована, вы можете столкнуться с дополнительными «ошибками» или неожиданным поведением. Программы чтения с экрана работают лучше всего при использовании в следующих комбинациях.
| Программа чтения с экрана | ОС | Совместимость с браузером |
|---|---|---|
| Доступ к заданиям с помощью речи (JAWS) | Окна | Хром, Фаерфокс, Край |
| Невизуальный доступ к рабочему столу (NVDA) | Окна | Хром и Фаерфокс |
| Рассказчик | Окна | Край |
| VoiceOver | macOS | Сафари |
| Орка | Линукс | Firefox |
| Обратный разговор | Андроид | Хром и Фаерфокс |
| VoiceOver (для мобильных устройств) | iOS | Сафари |
| ChromeVox | ChromeOS | Хром |
Команды чтения с экрана
После того, как вы правильно настроите программу чтения с экрана для настольного компьютера или мобильного устройства, вам следует просмотреть документацию по программе чтения с экрана (ссылка находится в предыдущей таблице) и выполнить некоторые основные команды чтения с экрана, чтобы ознакомиться с технологией. Если вы раньше использовали программу чтения с экрана, попробуйте новую!
При использовании программы чтения с экрана для тестирования доступности ваша цель — обнаружить проблемы в коде, которые мешают использованию вашего веб-сайта или приложения, а не имитировать работу пользователя программы чтения с экрана. Таким образом, вы можете многое сделать, имея базовые знания, несколько команд чтения с экрана и немного (или много) практики.
Если вам необходимо глубже понять пользовательский опыт людей, использующих программы чтения с экрана и другие AT, вы можете сотрудничать со многими организациями и отдельными людьми, чтобы получить эту ценную информацию. Помните, что использование AT для проверки кода на соответствие набору правил и опрос пользователей об их опыте часто дают разные результаты. Оба являются важными аспектами для создания полностью инклюзивных продуктов.
Ключевые команды для программ чтения с экрана рабочего стола
| Элемент | НВДА (Windows) | VoiceOver (macOS) |
|---|---|---|
| Общие командные клавиши | Вставлять | Управление + опция |
| Остановить звук | Контроль | Контроль |
| Читать следующее/предыдущее | ↓ или ↑ | Control + Option + → или ← |
| Начать читать | Вставить ↓ | Контроль + Опция + А |
| Список элементов/Ротор | НВДА + F7 | Control + Option + U |
| Достопримечательности | Д | Control + Option + U |
| Заголовки | ЧАС | Control + Option + Command + H |
| Ссылки | К | Control + Option + Command + L |
| Элементы управления формой | Ф | Control + Option + Command + J |
| Таблицы | Т | Control + Option Command + T |
| Внутри таблиц | Вставить Alt + ↓ ↑ ← → | Control + Option + ↓ ↑ ← → |
Ключевые команды для программ чтения с экрана мобильных устройств
| Элемент | TalkBack (Android) | VoiceOver (iOS) |
|---|---|---|
| Исследовать | Проведите одним пальцем по экрану | Проведите одним пальцем по экрану |
| Выберите или активируйте | Двойное нажатие | Двойное нажатие |
| Переместить вверх или вниз | Проведите двумя пальцами вверх или вниз | Проведите тремя пальцами вверх или вниз |
| Изменить страницы | Проведите двумя пальцами влево или вправо | Проведите тремя пальцами влево или вправо |
| Следующий/предыдущий | Проведите пальцем влево или вправо | Проведите пальцем влево или вправо |
Демонстрация тестирования программы чтения с экрана
Чтобы протестировать нашу демонстрацию, мы использовали Safari на ноутбуке под управлением macOS и записывали звук. Вы можете выполнить эти шаги с помощью любой программы чтения с экрана, но способ обнаружения некоторых ошибок может отличаться от описанного в этом модуле.
Шаг 1
Посетите обновленный CodePen , в котором применены все автоматические и ручные обновления специальных возможностей.
Просмотрите его в режиме отладки , чтобы перейти к следующим тестам. Это важно, поскольку при этом удаляется <iframe> , окружающий демонстрационную веб-страницу, который может мешать работе некоторых инструментов тестирования. Узнайте больше о режиме отладки CodePen .
Шаг 2
Активируйте программу чтения с экрана по вашему выбору и перейдите на демонстрационную страницу. Вы можете рассмотреть возможность навигации по всей странице сверху вниз, прежде чем сосредоточиться на конкретных вопросах.
Мы записали программу чтения с экрана для каждой проблемы до и после применения исправлений к демоверсии. Мы рекомендуем вам просмотреть демо-версию с помощью собственной программы чтения с экрана.
Проблема 1: Структура контента
Заголовки и ориентиры — один из основных способов навигации людей с помощью программ чтения с экрана. Если их нет, пользователю программы чтения с экрана придется прочитать всю страницу, чтобы понять контекст. Это может занять много времени и вызвать разочарование.
Если вы попытаетесь перемещаться по любому из элементов демо-версии, вы быстро обнаружите, что их не существует.
- Пример ориентира:
<div class="main">...</div> - Пример заголовка:
<p class="h1">Join the Club</p>
Если вы все обновили правильно, никаких визуальных изменений быть не должно, но работа с программой чтения с экрана значительно улучшится.
Давайте исправим это. Некоторые недоступные элементы невозможно увидеть, просто взглянув на сайт. Возможно, вы помните важность уровней заголовков и семантического HTML из модуля «Структура контента» . Часть контента может выглядеть как заголовок, но на самом деле контент заключен в стилизованный <div> .
Чтобы устранить проблему с заголовками и ориентирами, необходимо сначала определить каждый элемент, который должен быть помечен как таковой, и обновить соответствующий HTML-код. Обязательно обновите соответствующий CSS.
- Пример ориентира:
<main>...</main> - Пример заголовка:
<h1>Join the Club</h1>
Если вы все обновили правильно, никаких визуальных изменений быть не должно, но работа с программой чтения с экрана значительно улучшится.
Проблема 2. Контекст ссылки.
Важно предоставить пользователям средств чтения с экрана информацию о цели ссылки и о том, перенаправляет ли ссылка их в новое место за пределами веб-сайта или приложения.
В нашей демонстрации мы исправили большинство ссылок при обновлении альтернативного текста активного изображения, но есть несколько дополнительных ссылок на различные редкие заболевания, для которых может быть полезен дополнительный контекст, особенно потому, что они перенаправляют в новое место.
<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease">
Maple syrup urine disease (MSUD)
</a>
Чтобы устранить эту проблему для пользователей программ чтения с экрана, мы обновляем код, добавляя дополнительную информацию, не затрагивая визуальный элемент. Или, чтобы помочь еще большему количеству людей, например, с нарушениями чтения и когнитивными расстройствами, мы можем вместо этого добавить дополнительный визуальный текст.
Существует множество различных шаблонов, которые мы можем рассмотреть для добавления дополнительной информации о ссылках. Учитывая нашу среду, которая поддерживает только один язык, метка ARIA является простым вариантом в этой ситуации. Вы можете заметить, что метка ARIA переопределяет исходный текст ссылки, поэтому обязательно включите эту информацию в свое обновление.
<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease"
aria-label="Learn more about Maple syrup urine disease on the Rare Diseases website.">
Maple syrup urine disease (MSUD)
</a>
Проблема 3: Декоративное изображение
В нашем модуле автоматического тестирования Lighthouse не удалось обнаружить встроенный SVG, который выступает в качестве основного изображения-заставки на нашей демонстрационной странице. Однако программа чтения с экрана находит его и объявляет как «изображение» без дополнительной информации. Это верно даже без явного добавления атрибута role="img" в SVG.
<div class="section-right">
<svg>...</svg>
</div>
Чтобы решить эту проблему, нам сначала нужно решить, является ли изображение информативным или декоративным . На основании этого решения нам нужно добавить соответствующий альтернативный текст изображения (информативное изображение) или скрыть изображение от пользователей программ чтения с экрана (декоративное).
Мы взвесили преимущества и недостатки того, как лучше всего классифицировать изображение, и решили, что оно декоративное, а это значит, что мы хотим добавить или изменить код, чтобы скрыть изображение. Быстрый способ — добавить role="presentation" непосредственно к SVG-изображению. Это отправляет сигнал программе чтения с экрана пропустить это изображение и не включать его в группу изображений.
<div class="section-right">
<svg role="presentation">...</svg>
</div>
Проблема 4: Украшение пули
Возможно, вы заметили, что программа чтения с экрана читает изображение маркера CSS в разделах редких заболеваний. Хотя это не традиционный тип изображения, который мы обсуждали в модуле «Изображения» , изображение все равно необходимо изменить, поскольку оно нарушает поток контента и может отвлекать или сбивать с толку пользователя программы чтения с экрана.
<p class="bullet">...</p>
Как и в примере с декоративным изображением, рассмотренном ранее, вы можете добавить в HTML-код role="presentation" с классом маркера, чтобы скрыть его от программы чтения с экрана. Аналогично, role="none" будет работать. Только не используйте aria-hidden: true , иначе вы скроете всю информацию о абзацах от пользователей программ чтения с экрана.
<p class="bullet" role="none">...</p>
Проблема 5: Поле формы
В модуле «Формы» мы узнали, что все поля формы также должны иметь визуальную и программную метку. Эта этикетка должна всегда оставаться видимой.
В нашей демонстрации нам не хватает как визуальной, так и программной метки в поле электронной почты для подписки на рассылку новостей. Существует текстовый элемент-заполнитель, но он не заменяет метку, поскольку он не является визуально постоянным и не полностью совместим со всеми программами чтения с экрана.
<form>
<div class="form-group">
<input type="email" placeholder="Enter your e-mail address" required>
<button type="submit">Subscribe</button>
</div>
</form>
Чтобы устранить эту проблему, замените текстовый заполнитель похожим элементом метки. Этот элемент метки программно связан с полем формы, а с помощью JavaScript было добавлено движение, чтобы метка оставалась видимой даже при добавлении содержимого в поле.
<form>
<div class="form-group">
<input type="email" required id="youremail" name="youremail" type="text">
<label for="youremail">Enter your e-mail address</label>
<button type="submit" aria-label="Subscribe to our newsletter">Subscribe</button>
</div>
</form>
Заворачивать
Поздравляем! Вы завершили все испытания для этой демо-версии. Посмотреть на все эти изменения можно в обновленном Codepen для этой демо-версии .
Теперь вы можете использовать полученные знания для проверки доступности ваших собственных веб-сайтов и приложений.
Целью всего этого тестирования доступности является устранение как можно большего количества возможных проблем, с которыми потенциально может столкнуться пользователь. Однако это не означает, что ваш веб-сайт или приложение будут полностью доступны после завершения работы. Наибольшего успеха вы добьетесь, разработав свой веб-сайт или приложение с учетом доступности на протяжении всего процесса и объединив эти тесты с другими предпусковыми тестами.
Проверьте свое понимание
Проверьте свои знания об автоматизированном тестировании доступности
Какую программу чтения с экрана лучше всего использовать для проверки доступности?
Какова цель тестирования с использованием ассистивных технологий?