Это третий пост в небольшой серии, посвященной доступности форм. Если вы пропустили второй пост, посмотрите Управление фокусом пользователя с помощью :focus-visible. В этом посте мы рассмотрим использование программы чтения с экрана при навигации по форме, а также некоторые лучшие практики.

Что такое программа чтения с экрана?

Возможно, вы слышали термин «чтение с экрана», когда перемещались по сети. Возможно, в данный момент вы даже используете программу чтения с экрана для запуска ручных тестов доступности создаваемого вами опыта. Программа чтения с экрана — это разновидность AT или вспомогательной технологии.

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

В этом примере я буду использовать Mac VO. Mac VO (VoiceOver) встроен во все устройства Mac; Системы iOS, iPadOS и macOS. В зависимости от типа устройства, на котором вы используете macOS, открытие VO может отличаться. Macbook Pro, на котором работает VO, на котором я пишу это, не имеет сенсорной панели, поэтому я буду использовать сочетания клавиш в зависимости от оборудования.

Раскручивание озвучки на macOS

Если вы используете обновленный Macbook Pro, клавиатура вашего компьютера будет выглядеть примерно так, как показано на рисунке ниже.

Вы начнете с удержания кнопки cmd и затем быстро нажмите Touch ID три раза.

Если вы используете MBP (MacBook Pro) с TouchBar, вы будете использовать ярлык cmd+fn+f5 включить ВО. Если вы используете традиционную клавиатуру на настольном компьютере или ноутбуке, клавиши должны быть одинаковыми, иначе вам придется включить VO в настройках специальных возможностей. Как только VO включен, вас встретит это диалоговое окно вместе с озвученным знакомство с ВО.

Если вы нажмете кнопку «Использовать VoiceOver», вы уже на пути к использованию VO для тестирования своих веб-сайтов и приложений. Следует иметь в виду, что VO оптимизирован для использования с Safari. При этом при запуске теста чтения с экрана убедитесь, что Safari — это браузер, который вы используете. Это касается и iPhone и iPad.

Есть два основных способа использования VO с самого начала. Лично я использую его, перейдя на веб-сайт и используя комбинацию tab, control, option, shift и клавиши со стрелками, я могу эффективно перемещаться по интерфейсу только с помощью этих клавиш.

Другой распространенный способ навигации по интерфейсу — использование Ротор VoiceOver. Ротор — это функция, предназначенная для непосредственного перехода туда, где вы хотите оказаться. Используя Ротор, вам не придется проходить через весь сайт, думайте об этом как о «Выберите свое собственное приключение».

клавиши,

Клавиши-модификаторы позволяют использовать различные функции VO. Клавиша-модификатор по умолчанию или VO is control + option но вы можете изменить его на Caps Lock или выбрать оба варианта для взаимозаменяемого использования.

Использование ротора

Чтобы использовать Ротор, вам необходимо использовать комбинацию клавиш-модификаторов и буквы «U». Для меня мой ключ-модификатор caps lock. я нажимаю caps lock + U и Ротор раскручивается для меня. Как только появится Ротор, я смогу перейти к любой части игрового процесса, используя стрелки влево и вправо.

[Встраиваемое содержимое]

Навигация по уровню заголовка

Еще один удобный способ навигации по интерфейсу — по уровню заголовка. Если вы используете комбинацию клавиш-модификаторов + cmd + H вы можете перемещаться по структуре документа на основе уровней заголовков. Вы также можете переместить документ вверх, нажав shift в такой последовательности клавиши-модификаторы + shift + cmd + H.

[Встраиваемое содержимое]

История и лучшие практики

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

История веб-формы началась в сентябре 1995 года, когда она была представлена ​​в спецификация HTML 2.0. Некоторые говорят, что Интернет был старым добрым временем, по крайней мере, я так говорю. Стефани Стимак написала потрясающую статью о Smashing Magazine под названием "Стандартизация выбора и не только: прошлое, настоящее и будущее встроенных элементов управления HTML-формами».

Ниже приведены 5 лучших практик, которым следует следовать при создании доступной формы для Интернета.

1. Убедитесь, что вы используете элемент формы. Формы доступны по умолчанию и должны всегда использоваться поверх элементов div.

<form>
  <!-- Form controls are nested here. -->
</form>

2. Обязательно используйте for и id атрибуты на labelИ inputтак что они связаны. Таким образом, если вы щелкнете или коснетесь метки, фокус переместится на ввод, и вы сможете начать печатать.

<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required/>

3. Если поле является обязательным для заполнения формы, используйте обязательный атрибут и атрибут aria-required. Это ограничит отправку формы. Атрибут aria-required явно сообщает вспомогательной технологии, что это поле является обязательным..

<input type="text" id="name" name="name" required aria-required/>

4. Использовать, :focus, :focus-within и :focus-visible Псевдоклассы CSS для управления и настройки того, как пользователь получает фокус.

form:focus-within {
 background-color: #cfffcf;
}

input:focus-within {
 border: 10px solid #000000;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
 outline: 2px solid crimson;
 border-radius: 3px;
}

5. A button используется для вызова действия, например отправки формы. Используй это! Не создавайте кнопки, используя divх. А div по определению является делителем. Он не имеет присущих свойств доступности.

Демо

[Встраиваемое содержимое]

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

Программное обеспечение для чтения с экрана

Ниже приведен список различных типов программного обеспечения для чтения с экрана, которое вы можете использовать в вашей операционной системе. Если Mac вам не по душе, есть варианты для Windows и Linux, а также для устройств Android.

NVDA

NVDA — программа чтения с экрана от NV Access. В настоящее время он поддерживается только на ПК под управлением Microsoft Windows 7 SP1 и более поздних версий. Для получения большего доступа ознакомьтесь с Страница загрузки NVDA версии 2024.1 на сайте NV Access.!

JAWS

«Нам нужна лучшая программа чтения с экрана»

- Анонимный

Если вы поняли приведенную выше ссылку, вы в хорошей компании. Согласно веб-сайту JAWS, вот что это вкратце:

«JAWS, Job Access With Speech, — это самая популярная в мире программа чтения с экрана, разработанная для пользователей компьютеров, чья потеря зрения не позволяет им видеть содержимое экрана или перемещаться с помощью мыши. JAWS обеспечивает вывод речи и шрифта Брайля для самых популярных компьютерных приложений на вашем ПК. Вы сможете пользоваться Интернетом, писать документы, читать электронную почту и создавать презентации из офиса, удаленного рабочего стола или дома».

веб-сайт JAWS

Проверьте JAWS сами и если это решение соответствует вашим потребностям, обязательно попробуйте!

Рассказчик

Экранный диктор — это встроенная программа чтения с экрана, поставляемая с Windows 11. Если вы решите использовать ее в качестве программы чтения с экрана, по ссылке ниже можно найти справочную документацию по ее использованию.

Полное руководство по экранному диктору

Orca

Orca — это программа чтения с экрана, которую можно использовать в различных дистрибутивах Linux под управлением GNOME.

«Orca — это бесплатная, гибкая и расширяемая программа чтения с экрана с открытым исходным кодом, которая обеспечивает доступ к графическому рабочему столу с помощью речи и обновляемого шрифта Брайля.

Orca работает с приложениями и наборами инструментов, которые поддерживают интерфейс поставщика услуг вспомогательных технологий (AT-SPI), который является основной инфраструктурой вспомогательных технологий для Linux и Solaris. Приложения и наборы инструментов, поддерживающие AT-SPI, включают набор инструментов GNOME Gtk+, набор инструментов Swing для платформы Java, LibreOffice, Gecko и WebKitGtk. Поддержка AT-SPI для набора инструментов KDE Qt разрабатывается».

Веб-сайт Орки

Отвечать

Google TalkBack — это программа чтения с экрана, которая используется на устройствах Android. Для получения дополнительной информации о его включении и использовании см. ознакомьтесь с этой статьей на сайте поддержки специальных возможностей Android..

Поддержка браузера

Если вы ищете реальную поддержку браузером элементов HTML и атрибутов ARIA (Accessible Rich Internet Application), я предлагаю caniuse.com для HTML и Поддержка специальных возможностей для ARIA чтобы получить последние новости 4-1-1 о поддержке браузера. Помните: если браузер не поддерживает эту технологию, скорее всего, программа чтения с экрана тоже ее не поддерживает.

ЦифровойA11Y могут помочь обобщить информацию о браузере и программе чтения с экрана в своей статье,  Программы чтения с экрана и браузеры! Какая комбинация является лучшей для тестирования доступности?

Ссылки

https://support.apple.com/guide/voiceover/with-the-voiceover-rotor-mchlp2719/mac

https://www.w3.org/TR/wai-aria/

https://www.w3.org/WAI/standards-guidelines/aria/

https://support.google.com/accessibility/android/answer/6283677?hl=en

https://support.google.com/accessibility/android/answer/6283677?hl=en

• SEO-контент и PR-распределение. Получите усиление сегодня.
• PlatoData.Network Вертикальный генеративный ИИ. Расширьте возможности себя. Доступ здесь.
• ПлатонАйСтрим. Интеллект Web3. Расширение знаний. Доступ здесь.
• ПлатонЭСГ. Углерод, чистые технологии, Энергия, Окружающая среда, Солнечная, Управление отходами. Доступ здесь.
• ПлатонЗдоровье. Биотехнологии и клинические исследования. Доступ здесь.
• Источник: https://css-tricks.com/demystifying-screen-readers-accessible-forms-best-practices/