#html #accessibility
Вопрос:
В настоящее время у меня на сайте есть простая разметка, и, похоже, я не могу заставить программу чтения с экрана прочитать ее. Я что-то упускаю?
<section aria-label="This is the text I want to be read "></section>
Я тоже пытался:
<section aria-description="This is the text I want to be read "></section>
Раздел не доступен для вкладок, так как он не является ссылкой, не уверен, связано ли это с проблемой, но мое понимание того, должен ли читатель экрана что-то читать или нет, в лучшем случае отрывочно.
Речь идет о программе чтения с экрана, если это имеет значение.
https://chrome.google.com/webstore/detail/screen-reader/kgejglhpjiefppelpmljglcjbhoiplfn
Любая помощь будет признательна.
Комментарии:
1. Вы пытаетесь создать контент, доступный с помощью вспомогательных технологий, но скрытый от зрячих посетителей? Если это так, вам следует взглянуть на методы, описанные здесь: webaim.org/techniques/css/invisiblecontent
2. Если вы работаете в Windows, NVDA является хорошим (и бесплатным) устройством для чтения с экрана, но вам нужно будет потратить некоторое время на настройку и настройку. Если вы работаете на Mac/iOS, то VoiceOver также является очень хорошим бесплатным продуктом.
Ответ №1:
Это может зависеть от того, как вы управляете устройством чтения с экрана. Поскольку элемент <section> не фокусируется на клавиатуре, я предполагаю, что в нем есть текстовое содержимое? Большинство программ для чтения с экрана позволят вам перемещаться по всем элементам страницы, включая обычный текст, с помощью стрелки вниз. Стрелка вниз, по сути, перемещается по DOM. (На самом деле он перемещается по дереву доступности, но пока думайте об этом как о перемещении по DOM.)
Если вы можете перейти к фокусируемому элементу до <section> использования tabклавиши, то вы можете начать использовать стрелку вниз, чтобы перейти к разделу.
С помощью NVDA я услышал: «Это текст, который я хочу, чтобы меня прочитали, регион». Обратите внимание, что в нем говорится «регион», потому <section> что элемент имеет роль «регион»по умолчанию.
С помощью JAWS он не читал aria-label , но это из-за настроек детализации JAWS по умолчанию , которые не включают регионы. Если вы измените настройку многословия с «среднего» по умолчанию на «высокий», то вы услышите метку раздела, когда нажмете на нее стрелкой вниз. (Или вы можете настроить текущий параметр детализации для включения регионов.)
С помощью JAWS вы также можете ориентироваться по ориентирам. Поскольку <section> у a есть роль «регион», а Rрегион является ориентиром, я могу перемещаться по ориентирам с помощью клавиши JAWS, используя клавишу, и когда я это делаю, я слышу «Это текст, который я хочу прочитать», независимо от моей настройки многословия.
Итак, как написал кто-то другой, если вы используете «стандартное» средство чтения с экрана, надпись будет прочитана. Если вы используете менее известную программу чтения с экрана, то трудно сказать, что произойдет.
В отношении aria-description того , что это еще не производство. Это часть спецификаций ARIA 1.3, которая все еще находится в черновом варианте. Производственной версии ARIA 1.2 нет aria-description , поэтому сомнительно, что ее будут читать.
Комментарии:
1. Короче говоря, подумайте, что это связано с моим выбором программы чтения с экрана. ChromeVox, похоже, не готов к производству с точки зрения того, что он читает. И JAWS, и NVDA, похоже, являются продуктами Windows, я здесь на Mac и использовал встроенную программу чтения с экрана. Возможно, стоит изучить окно Windows специально для тестирования доступа.
2. Голос за кадром на Mac обычно ведет себя довольно хорошо, поэтому я ожидаю, что он прочитает надпись, но опять же, это может зависеть от того, как вы перейдете к разделу. Вы можете провести пальцем вправо (если у вас включен командир трекпада) или использовать ротор (VO U) для навигации по ориентирам. Я не уверен, насколько надежен chromevox.
3. Кроме того, что касается chromevox, то при использовании в качестве основного средства чтения с экрана им пользуются только 0,3% людей. Если рассматривать его как средство чтения с экрана, используемое наряду с другими средствами чтения с экрана, то им пользуются 4,7% людей. Видишь webaim.org/projects/screenreadersurvey9/#primary . Я редко (если вообще когда-либо) тестирую chromevox, потому что не стоит тратить время на то, чтобы увидеть, есть ли у него проблемы, так как база пользователей невелика. В общем, если html-код плохой, это будет проблемой для всех программ чтения с экрана, поэтому вам не нужно тестировать конкретный.
Ответ №2:
В соответствии со спецификацией ARIA, <section> он может идеально иметь атрибут aria-label. Большинство других структурных элементов HTML5 также допускают метку aria, поскольку они являются знаковыми областями.
Итак, предполагается, что соответствующие программы чтения с экрана должны его читать, и, насколько я проверил, они действительно это делают.
Атрибут aria-описание является более поздним, чем aria-метка, поэтому вам следует предпочесть aria-метку, чтобы максимизировать шансы на его прочтение.
Чтобы провести хорошие и соответствующие тесты, я предлагаю вам использовать настоящую программу чтения с экрана, действительно используемую пользователями, а не расширение браузера, которое никто не использует в реальной жизни. Вы можете попробовать одно или несколько из следующих действий, в зависимости от ваших целевых систем и возможностей: (Неполный список)
- NVDA, Челюсти и Сверхновая под окнами
- Озвучка под macOS, iOS и iPadOS
- Поддержка обратной связи и голоса под управлением Android
NVDA, VoiceOver и Talkback абсолютно бесплатны, и VoiceOver даже всегда доступен из коробки без необходимости что-либо устанавливать. Так что у вас действительно нет причин не попробовать их.