0

I have the following markup:

<article role="article" tabindex="-1" aria-labelledby="article_heading">
    <p class="visible_subhead" aria-hidden="true">Subtitle</p>
    <h3 id="article_heading"><a href="http://example.com">Article title</a></h3>
    <p class="visually_hidden sr_subhead">Subtitle</p>
</article>

Th reason for this markup is that the design calls for a subtitle to be visibly presented before the heading, but for accessibility, it is better that the heading come before the subtitle.

When I use Voiceover to enter the group (Control-Option-Shift-Down Arrow), Voiceover jumps to the visually hidden Subtitle. I have to click Control-Option-Left Arrow to move Voiceover back to the heading.

Is this normal Voiceover behavior? Or is there some configuration or flaw with the code that is causing Voiceover to jump to the screen reader subhead instead of the heading?

XLE_22
  • 5,124
  • 3
  • 21
  • 72
miwayha
  • 51
  • 2
  • I suspect `aria-labelledby` is being read because that is the accessible name for the thing that has focus — the `
    `. What happens when you remove the `aria-labelledby`?
     – aardrian Dec 06 '16 at 18:31
  • It looks like an aria label is required for Voiceover to navigate in groups mode. Removing `aria-labelledby` disables groups mode, so there is no need to click Control-Option-Shift-Down Arrow, and it forces the screen reader to read through the entire `article` rather than easily navigating from article to article. – miwayha Dec 06 '16 at 19:43
  • Sadly, I cannot test VO now (my Hackintosh died). I can only offer suggestions based on NVDA, JAWS, Narrator, and maybe Orca (all desktop). – aardrian Dec 06 '16 at 20:33

0 Answers0