В этом модуле основное внимание уделяется использованию вспомогательных технологий (AT) для тестирования доступности. Человек с ограниченными возможностями может использовать АТ, чтобы увеличить, сохранить или улучшить возможности выполнения задачи.
В цифровом пространстве АТ могут быть:
- Нет/Низкие технологии: палочки для головы/рота, ручные лупы, устройства с большими кнопками.
- Высокие технологии: устройства с голосовым управлением, устройства слежения за глазами, адаптивные клавиатуры/мыши.
- Аппаратное обеспечение: кнопки переключения, эргономичная клавиатура, устройство Брайля с автоматическим обновлением.
- Программное обеспечение: программы преобразования текста в речь, живые субтитры, программы чтения с экрана.
Мы рекомендуем вам использовать несколько типов AT в общем рабочем процессе тестирования.
Основы тестирования программы чтения с экрана
В этом модуле мы сосредоточимся на одном из самых популярных цифровых AT — программах чтения с экрана. Программа чтения с экрана — это часть программного обеспечения, которая считывает базовый код веб-сайта или приложения. Затем он преобразует эту информацию в речь или вывод Брайля для пользователя.
Программы чтения с экрана необходимы слепым и слепоглухим людям, но они также могут принести пользу людям со слабым зрением, нарушениями чтения или когнитивными нарушениями.
Совместимость с браузером
Доступно несколько вариантов чтения с экрана. Самыми популярными программами чтения с экрана сегодня являются JAWS, NVDA и VoiceOver для настольных компьютеров, а также VoiceOver и Talkback для мобильных устройств.
В зависимости от вашей операционной системы (ОС), любимого браузера и устройства, которое вы используете, одна программа чтения с экрана может оказаться лучшим вариантом. Большинство программ чтения с экрана созданы с учетом конкретного оборудования и веб-браузеров. Если вы используете программу чтения с экрана в браузере, для которого она не была откалибрована, вы можете столкнуться с дополнительными «ошибками» или неожиданным поведением. Программы чтения с экрана работают лучше всего при использовании в следующих комбинациях.
Команды чтения с экрана
После того, как вы правильно настроите программу чтения с экрана для настольного компьютера или мобильного устройства, вам следует просмотреть документацию по программе чтения с экрана (ссылка находится в предыдущей таблице) и выполнить некоторые основные команды чтения с экрана , чтобы ознакомиться с технологией. Если вы раньше использовали программу чтения с экрана, попробуйте новую!
При использовании программы чтения с экрана для тестирования доступности ваша цель — обнаружить проблемы в коде, которые мешают использованию вашего веб-сайта или приложения, а не имитировать работу пользователя программы чтения с экрана. Таким образом, вы можете многое сделать, имея базовые знания, несколько команд чтения с экрана и немного (или много) практики.
Если вам необходимо глубже понять пользовательский опыт людей, использующих программы чтения с экрана и другие AT, вы можете сотрудничать со многими организациями и отдельными людьми, чтобы получить эту ценную информацию. Помните, что использование AT для проверки кода на соответствие набору правил и опрос пользователей об их опыте часто дают разные результаты. Оба являются важными аспектами для создания полностью инклюзивных продуктов.
Ключевые команды для программ чтения с экрана рабочего стола
Ключевые команды для программ чтения с экрана мобильных устройств
Демонстрация тестирования программы чтения с экрана
Чтобы протестировать нашу демонстрацию, мы использовали 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 для этой демо-версии .
Теперь вы можете использовать полученные знания для проверки доступности ваших собственных веб-сайтов и приложений.
Целью всего этого тестирования доступности является устранение как можно большего количества возможных проблем, с которыми потенциально может столкнуться пользователь. Однако это не означает, что ваш веб-сайт или приложение будет полностью доступен, когда вы закончите. Наибольшего успеха вы добьетесь, разработав свой веб-сайт или приложение с учетом доступности на протяжении всего процесса и объединив эти тесты с другими предпусковыми тестами.
Проверьте свое понимание
Проверьте свои знания об автоматизированном тестировании доступности
Какую программу чтения с экрана лучше всего использовать для проверки доступности?
Какова цель тестирования с использованием ассистивных технологий?
В этом модуле основное внимание уделяется использованию вспомогательных технологий (AT) для тестирования доступности. Человек с ограниченными возможностями может использовать АТ, чтобы увеличить, сохранить или улучшить возможности выполнения задачи.
В цифровом пространстве АТ могут быть:
- Нет/Низкие технологии: палочки для головы/рота, ручные лупы, устройства с большими кнопками.
- Высокие технологии: устройства с голосовым управлением, устройства слежения за взглядом, адаптивные клавиатуры/мыши.
- Аппаратное обеспечение: кнопки переключения, эргономичная клавиатура, устройство Брайля с автоматическим обновлением.
- Программное обеспечение: программы преобразования текста в речь, живые субтитры, программы чтения с экрана.
Мы рекомендуем вам использовать несколько типов AT в общем рабочем процессе тестирования.
Основы тестирования программы чтения с экрана
В этом модуле мы сосредоточимся на одном из самых популярных цифровых AT — программах чтения с экрана. Программа чтения с экрана — это часть программного обеспечения, которая считывает базовый код веб-сайта или приложения. Затем он преобразует эту информацию в речь или вывод Брайля для пользователя.
Программы чтения с экрана необходимы слепым и слепоглухим людям, но они также могут принести пользу людям со слабым зрением, нарушениями чтения или когнитивными нарушениями.
Совместимость с браузером
Доступно несколько вариантов чтения с экрана. Самыми популярными программами чтения с экрана сегодня являются JAWS, NVDA и VoiceOver для настольных компьютеров, а также VoiceOver и Talkback для мобильных устройств.
В зависимости от вашей операционной системы (ОС), любимого браузера и устройства, которое вы используете, одна программа чтения с экрана может оказаться лучшим вариантом. Большинство программ чтения с экрана созданы с учетом конкретного оборудования и веб-браузеров. Если вы используете программу чтения с экрана в браузере, для которого она не была откалибрована, вы можете столкнуться с дополнительными «ошибками» или неожиданным поведением. Программы чтения с экрана работают лучше всего при использовании в следующих комбинациях.
Команды чтения с экрана
После того, как вы правильно настроите программу чтения с экрана для настольного компьютера или мобильного устройства, вам следует просмотреть документацию по программе чтения с экрана (ссылка находится в предыдущей таблице) и выполнить некоторые основные команды чтения с экрана , чтобы ознакомиться с технологией. Если вы раньше использовали программу чтения с экрана, попробуйте новую!
При использовании программы чтения с экрана для тестирования доступности ваша цель — обнаружить проблемы в коде, которые мешают использованию вашего веб-сайта или приложения, а не имитировать работу пользователя программы чтения с экрана. Таким образом, вы можете многое сделать, имея базовые знания, несколько команд чтения с экрана и немного (или много) практики.
Если вам необходимо глубже понять пользовательский опыт людей, использующих программы чтения с экрана и другие AT, вы можете сотрудничать со многими организациями и отдельными людьми, чтобы получить эту ценную информацию. Помните, что использование AT для проверки кода на соответствие набору правил и опрос пользователей об их опыте часто дают разные результаты. Оба являются важными аспектами для создания полностью инклюзивных продуктов.
Ключевые команды для программ чтения с экрана рабочего стола
Ключевые команды для программ чтения с экрана мобильных устройств
Демонстрация тестирования программы чтения с экрана
Чтобы протестировать нашу демонстрацию, мы использовали 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 для этой демо-версии .
Теперь вы можете использовать полученные знания для проверки доступности ваших собственных веб-сайтов и приложений.
Целью всего этого тестирования доступности является устранение как можно большего количества возможных проблем, с которыми потенциально может столкнуться пользователь. Однако это не означает, что ваш веб-сайт или приложение будет полностью доступен, когда вы закончите. Наибольшего успеха вы добьетесь, разработав свой веб-сайт или приложение с учетом доступности на протяжении всего процесса и объединив эти тесты с другими предпусковыми тестами.
Проверьте свое понимание
Проверьте свои знания об автоматизированном тестировании доступности
Какую программу чтения с экрана лучше всего использовать для проверки доступности?
Какова цель тестирования с использованием ассистивных технологий?