Тестирование вспомогательными технологиями¶
Этот модуль продолжает два предыдущих модуля о тестировании: автоматизированное тестирование доступности и ручное тестирование доступности. Если вы ещё не прошли упражнения в тех модулях, рекомендуем сделать это: этот модуль начинается там, где они закончились.
Этот модуль о том, как использовать вспомогательные технологии (AT) для тестирования доступности. Человек с инвалидностью может пользоваться AT, чтобы повысить, сохранить или улучшить возможность выполнять задачу.
В цифровой среде AT бывают такими:
- Без технологий или низкотехнологичные: указки для головы и рта, ручные лупы, устройства с крупными кнопками
- Высокотехнологичные: устройства с голосовым управлением, айтрекеры, адаптивные клавиатуры и мыши
- Аппаратные: кнопки-переключатели, эргономичные клавиатуры, брайлевские дисплеи с автообновлением
- Программные: программы синтеза речи, живые субтитры, программы чтения с экрана
В общем процессе тестирования лучше использовать несколько видов AT.
Основы тестирования программой чтения с экрана¶
В этом модуле мы разбираем одну из самых распространённых цифровых AT — программу чтения с экрана. Это программа, которая читает код сайта или приложения и превращает сведения в речь или брайлевский вывод.
Программы чтения с экрана необходимы людям, которые слепые и слепоглухие. Они также могут помочь людям со слабым зрением, нарушениями чтения и когнитивными особенностями.
Совместимость с браузерами¶
Программ чтения с экрана несколько. Сегодня самые распространённые на настольных компьютерах — JAWS, NVDA и VoiceOver, на мобильных устройствах — VoiceOver и TalkBack.
Какая программа подойдёт лучше, зависит от операционной системы, любимого браузера и устройства. Большинство программ чтения с экрана рассчитаны на конкретное оборудование и браузеры. Если использовать программу с браузером, под который она не настроена, можно столкнуться с большим числом «багов» и неожиданным поведением. Лучше всего программы чтения с экрана работают в таких сочетаниях.
| Программа чтения с экрана | ОС | Совместимость с браузерами |
|---|---|---|
| Job Access With Speech (JAWS) | Windows | Chrome, Firefox, Edge |
| Non-Visual Desktop Access (NVDA) | Windows | Chrome и Firefox |
| Narrator | Windows | Edge |
| VoiceOver | macOS | Safari |
| Orca | Linux | Firefox |
| TalkBack | Android | Chrome и Firefox |
| VoiceOver (для мобильных устройств) | iOS | Safari |
| ChromeVox | ChromeOS | Chrome |
Команды программы чтения с экрана¶
Когда программа чтения с экрана настроена на настольном компьютере или мобильном устройстве, откройте её документацию (ссылки в таблице выше) и пройдите основные команды, чтобы освоиться. Если вы уже пользовались программой чтения с экрана, попробуйте другую.
Цель теста доступности с программой чтения с экрана — найти в коде проблемы, которые мешают пользоваться сайтом или приложением, а не воспроизвести опыт пользователя такой программы. Для этого хватает базовых знаний, нескольких команд и практики — небольшой или большой.
Чтобы лучше понять опыт людей, которые пользуются программами чтения с экрана и другими AT, можно обратиться к организациям и отдельным людям. Помните: проверка кода AT по набору правил и разговор с пользователями об их опыте часто дают разные результаты. Для по-настоящему инклюзивных продуктов важны оба подхода.
Основные команды настольных программ чтения с экрана¶
| Элемент | NVDA (Windows) | VoiceOver (macOS) |
|---|---|---|
| Команда | Insert (клавиша NVDA) | Control + Option (клавиша VO) |
| Остановить речь | Control | Control |
| Читать следующий или предыдущий | ↓ или ↑ | VO + → или ← |
| Начать чтение | NVDA + ↓ | VO + A |
| Список элементов / Rotor | NVDA + F7 | VO + U |
| Ориентиры | D | VO + U |
| Заголовки | H | VO + Command + H |
| Ссылки | K | VO + Command + L |
| Элементы форм | F | VO + Command + J |
| Таблицы | T | VO + Command + T |
| Внутри таблиц | NVDA + Alt + ↓ ↑ ← → | VO + ↓ ↑ ← → |
Основные команды мобильных программ чтения с экрана¶
| Элемент | 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: контекст ссылки¶
Пользователям программы чтения с экрана важно сообщить, зачем нужна ссылка и уводит ли она в новое место за пределами сайта или приложения.
В демонстрации большинство ссылок мы исправили, когда обновили альтернативный текст действенных изображений. Нескольким ссылкам о редких заболеваниях всё ещё полезен дополнительный контекст — тем более что они ведут на другой сайт.
1 2 3 4 5 | |
Исправим это.
Чтобы исправить это для пользователей программ чтения с экрана, мы добавляем в код больше сведений и не меняем внешний вид. Чтобы помочь ещё и людям с нарушениями чтения и когнитивными особенностями, можно вместо этого добавить видимый текст.
Дополнительные сведения о ссылке можно добавить разными шаблонами. В простой среде с одним языком для этой ситуации подходит подпись ARIA. Подпись ARIA заменяет исходный текст ссылки, поэтому включите эти сведения в обновление.
1 2 3 4 5 6 | |
Проблема 3: декоративное изображение¶
В модуле автоматизированного тестирования Lighthouse не заметил встроенный SVG, который служит главным иллюстративным изображением демо-страницы. Программа чтения с экрана его находит и объявляет как «image» без дополнительных сведений. Так происходит даже без явного атрибута role="img" у SVG.
1 2 3 | |
Исправим это.
Сначала решите, изображение информативное или декоративное. От этого зависит, нужен ли подходящий альтернативный текст (информативное изображение) или изображение нужно скрыть от пользователей программ чтения с экрана (декоративное).
Мы взвесили плюсы и минусы и решили, что изображение декоративное: код нужно добавить или изменить так, чтобы скрыть его. Быстрый способ — поставить role="presentation" прямо на SVG. Это сигнал программе чтения с экрана пропустить изображение и не включать его в группу изображений.
1 2 3 | |
Проблема 4: декоративный маркер¶
Возможно, вы заметили, что программа чтения с экрана читает CSS-изображение маркера в разделах о редких заболеваниях. Это не тот тип изображения, о котором шла речь в модуле об изображениях, но его всё равно нужно изменить: оно сбивает поток содержания и может отвлекать или путать пользователя программы чтения с экрана.
1 | |
Исправим это.
Как и в примере с декоративным изображением выше, к HTML с классом маркера можно добавить role="presentation", чтобы скрыть его от программы чтения с экрана. Так же сработает role="none". Не используйте aria-hidden: true: иначе от пользователей программ чтения с экрана скроется и весь текст абзаца.
1 | |
Проблема 5: поле формы¶
В модуле форм сказано, что у каждого поля формы должна быть и визуальная, и программная подпись. Эта подпись должна оставаться видимой всегда.
В демонстрации у поля электронной почты для подписки на рассылку нет ни визуальной, ни программной подписи. Есть текст-заполнитель, но он не заменяет подпись: он не остаётся видимым и не полностью совместим со всеми программами чтения с экрана.
1 2 3 4 5 6 7 8 9 10 | |
Исправим это.
Чтобы исправить это, замените текст-заполнитель похожим на него элементом подписи. Подпись программно связана с полем, а JavaScript двигает её так, чтобы она оставалась видимой, даже когда в поле уже есть содержимое.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | |
Итог¶
Все проверки этой демонстрации пройдены. Все изменения можно посмотреть в обновлённом CodePen для этой демонстрации.
Теперь этими приёмами можно проверять доступность собственных сайтов и приложений.
Цель всего тестирования доступности — закрыть как можно больше проблем, с которыми может столкнуться пользователь. Это не значит, что по окончании работы сайт или приложение станут идеально доступными. Лучший результат даёт доступность на всём пути — от проектирования — и включение этих проверок в остальные тесты перед запуском.
Источник — Assistive Technology testing