Этот модуль посвящен использованию вспомогательных технологий (ВТ) для тестирования доступности. Человек с ограниченными возможностями может использовать ВТ, чтобы расширить, сохранить или улучшить свои возможности при выполнении задачи.
В цифровом пространстве вспомогательные технологии могут быть:
- Простые или низкотехнологичные методы: использование палочек для головы и рта, ручные лупы, устройства с большими кнопками.
- Высокие технологии: устройства с голосовым управлением, устройства с отслеживанием взгляда, адаптивные клавиатуры и мыши.
- Аппаратная часть: переключающие кнопки, эргономичные клавиатуры, устройство Брайля с автоматическим обновлением.
- Программное обеспечение: программы преобразования текста в речь, субтитры в реальном времени, программы чтения с экрана.
Мы рекомендуем использовать несколько типов вспомогательных технологий в общем процессе тестирования.
Основы тестирования программ чтения с экрана
В этом модуле мы сосредоточимся на одном из самых популярных цифровых вспомогательных средств — программах чтения с экрана. Программа чтения с экрана — это программное обеспечение, которое считывает базовый код веб-сайта или приложения. Затем она преобразует эту информацию в речь или шрифт Брайля для пользователя.
Программы для чтения с экрана необходимы людям с нарушениями зрения и глухослепотой, но они также могут быть полезны людям со слабым зрением, расстройствами чтения и когнитивными нарушениями.
Совместимость с браузерами
Существует множество программ для чтения с экрана. Наиболее популярными являются JAWS, NVDA и VoiceOver для настольных компьютеров, а также VoiceOver и Talkback для мобильных устройств.
В зависимости от вашей операционной системы (ОС), любимого браузера и используемого устройства, одна программа для чтения с экрана может оказаться лучшим вариантом. Большинство программ для чтения с экрана разработаны с учетом конкретного оборудования и веб-браузеров. При использовании программы для чтения с экрана с браузером, для которого она не была откалибрована, вы можете столкнуться с большим количеством «ошибок» или неожиданным поведением. Программы для чтения с экрана работают лучше всего при использовании в следующих комбинациях.
| программа чтения с экрана | ОС | Совместимость с браузерами |
|---|---|---|
| Доступ к рабочим местам с помощью речи (JAWS) | Windows | Chrome, Firefox, Edge |
| Невизуальный доступ к рабочему столу (NVDA) | Windows | Chrome и Firefox |
| Рассказчик | Windows | Край |
| Озвучка | macOS | Сафари |
| Косатка | Linux | Firefox |
| TalkBack | Android | Chrome и Firefox |
| VoiceOver (для мобильных устройств) | iOS | Сафари |
| ChromeVox | ChromeOS | Хром |
команды программы чтения с экрана
После того, как вы правильно настроили программу чтения с экрана для своего настольного или мобильного устройства, вам следует ознакомиться с документацией по программе чтения с экрана (ссылка в предыдущей таблице) и выполнить несколько основных команд , чтобы освоить эту технологию. Если вы уже использовали программу чтения с экрана, попробуйте новую!
При использовании программы чтения с экрана для тестирования доступности ваша цель — выявить проблемы в коде, которые мешают использованию вашего веб-сайта или приложения, а не имитировать опыт пользователя программы чтения с экрана. Поэтому, обладая базовыми знаниями, несколькими командами программы чтения с экрана и небольшой (или значительной) практикой, вы сможете многое сделать.
Если вам необходимо лучше понять пользовательский опыт людей, использующих программы чтения с экрана и другие вспомогательные технологии, вы можете обратиться ко многим организациям и частным лицам, чтобы получить эту ценную информацию. Помните, что использование вспомогательных технологий для тестирования кода на соответствие набору правил и опрос пользователей об их опыте часто дают разные результаты. Оба аспекта важны для создания полностью инклюзивных продуктов.
Основные команды для программ чтения с экрана на компьютере
| Элемент | NVDA (Windows) | VoiceOver (macOS) |
|---|---|---|
| Общие клавиши команд | Вставлять | Ctrl + Option |
| Остановить аудио | Контроль | Контроль |
| Читать далее/предыдущая | ↓ или ↑ | Control + Option + → или ← |
| Начать чтение | Вставить ↓ | Ctrl + Option + A |
| Список элементов/Ротор | NVDA + 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>
Подобно примеру с декоративным изображением, обсуждавшемуся ранее, вы можете добавить атрибут role="presentation" в HTML-код с классом bullet, чтобы скрыть его от программ чтения с экрана. Аналогично, подойдет и 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 для этой демонстрации .
Теперь вы можете использовать полученные знания для проверки доступности ваших собственных веб-сайтов и приложений.
Цель всего этого тестирования доступности — выявить как можно больше возможных проблем, с которыми может столкнуться пользователь. Однако это не означает, что ваш веб-сайт или приложение будут идеально доступны после завершения тестирования. Наибольшего успеха вы добьетесь, если будете разрабатывать свой веб-сайт или приложение с учетом требований доступности на всех этапах и включать эти тесты в другие этапы тестирования перед запуском.