Установка точек фокусировки в HTML для программ чтения с экрана

Мне было интересно, возможно ли установить определенные области для чтения с экрана, чтобы сосредоточиться на содержимом HTML.

У меня есть список, который выглядит примерно так:

<ol>
  <li>
    <div class="duration">
      <time>10:00</time>
      <span>to</span>
      <time>11:00</time>
    </div>
    <div class="info">
      <span>CA267 Lecture</span>
      <span>Software Testing</span>
      <span>Location: QG27</span>
    </div>
  </li>
</ol>

Когда я использую средство чтения с экрана (в моем случае закадровый голос) над элементом списка, оно начинается с 10:00, затем мне нужно нажать ctrl+alt+клавишу со стрелкой влево, чтобы перейти к «до», а затем еще раз, чтобы перейти к 11: 00 и так далее.

Мне было интересно, есть ли способ сгруппировать элементы, чтобы средство чтения с экрана фокусировалось на теге <li> и просто считывало все в нем соответственно?

Я попытался установить tabindex, он несколько работает, но требует, чтобы пользователь программы чтения с экрана использовал клавишу табуляции для навигации, а не встроенные сочетания клавиш.

Спасибо!


list html accessibility voiceover blind
person Community    schedule 04.03.2013    source источник
comment
Комбинация клавиш, которую вы упомянули, читает следующее слово. Вы бы хотели использовать стрелку вниз, L или P.   -  person Ryan B    schedule 04.03.2013
comment
Привет Райан! Я попробовал стрелку вниз, и она издает звуковой сигнал, как и L. P читает 10:00. Если я оставлю голос за кадром в фокусе <ol> на некоторое время, он даст Ctrl+Alt+Стрелка влево и Control+Alt+Стрелка вправо как единственные варианты   -  person    schedule 05.03.2013
comment
Извини, Даффи, моя специальность не озвучка, но я бы сказал, что то, что ты делаешь, не является допустимым кодом. Почему ты не пользуешься столом?   -  person Ryan B    schedule 05.03.2013
comment
Я бы не считал это табличными данными.   -  person    schedule 05.03.2013
comment
Я бы сказал, что это время, места, названия курсов, все связанные, из образца.   -  person Ryan B    schedule 05.03.2013

Ответы (1)


arrow_upward
0
arrow_downward

Атрибуты ARIA могут это сделать, но спецификация не закончена, что-то сбивает с толку (по крайней мере, для меня), а поддержка программ чтения с экрана не оптимальна. я думаю, может быть, вы могли бы применить aria-labelledby или aria-describedby, но оба решения, которые я рассматриваю в mdn, потребуют изменения вашей разметки. похоже, что aria-labelledby достижимо, просто добавив некоторые идентификаторы к вашему ol, а затем элемент aria-labelledby к divs. вы можете проверить это здесь: https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute

person albert    schedule 05.03.2013
comment
Поддержка чтения с экрана для ARIA довольно приличная. Это все остальное, как AT-мудрое, так и не имеющее поддержки. Если вы не можете предоставить пример кода, я бы сказал, что labelledby здесь неприменим, если у вас нет плавающего <p>, который вы хотите использовать для описания <ol>, даже тогда, вероятно, следует использовать aria-describedby. - person Ryan B; 05.03.2013
comment
я буду более конкретным: поддержка aria в программах чтения с экрана среди различных браузеров/платформ. я сказал, что это сбивает с толку, и тем более не видя всего документа. более того, ссылка, которую я дал, показывает пример, о котором я думаю, это первый. Я также сказал, что без изменения разметки будет сложно. - person albert; 05.03.2013
comment
Благодарю вас! Демонстративно шаг в правильном направлении. Не получил это полностью работает, но я получаю где-то. Вставлю обратно пример кода, если получу. - person ; 05.03.2013
comment
Установка role=menuitem в li делает именно то, что я хочу. Однако называть это пунктом меню не совсем корректно. - person ; 06.03.2013