How to make a screen-reader go through a <span> without any stopping

user_2106071 0
Viewed 3364

I have this span element:

<span>Select the <strong>START</strong> <span class="icon-start></span> button.</span>

That is just a line that says "Select the START button" with a small icon after the word START.

Currently, Microsoft Narrator (in scan mode) reads "select the start" and then pauses at the icon and waits for the user to tell it to continue. I'm trying to make the Narrator read the entire line with zero interruptions or need for the user to tell it to continue.

So far here's what I've tried:

  • Add aria-hidden="true", tabindex="-1", and role="presentation to the icon's <span>

  • Wrapped the span in a <div> and gave it aria-hidden="true", tabindex="-1", and role="presentation

  • Added a role="heading" to the outer span -which works to make the Narrator reading everything uninterrupted, but he announces "Heading level 1" at first. If there's a way to prevent him from saying "heading" then that could work too.

Is there a role or aria attribute that tells the screen-reader to continue reading with no stopping?

narrator wai-aria accessibility html
3 Answers

It sounds like the screen reader is failing to parse your icon span — that span should have aria-hidden=“true”.

As a note, avoid making text items headings unless they are really meant to be headings. As a best practice, an accessible webpage should only have one <h1> element that essentially serves as a page title. And other headings below that single <h1> should be an <h2> and any headings below those should be <h3> etc. So, I'd advise you to be thoughtful about the heading level you choose if you were to go that route.

user_168372240

I solved this problem like this:

<span aria-label="Select the START button">
  <span aria-hidden="true">
    Select the <strong>START</strong> <span class="icon-start"></span> button.
  </span>
</span>

This will announce the correct text and hide the presentation content from screen readers.

user_4607500

It sounds like Narrator has a similar behavior as VoiceOver on iOS devices. If you have an element that contains nested elements, VoiceOver often stops at each element even though you want to treat it as one element. You can typically work around this for iOS using an undocumented role="text". I don't know if it will work for Narrator too.

You'd have something like this:

<span role="text">Select the <strong>START</strong> <span aria-hidden="true" class="icon-start></span> button.</span>

Note that I also included aria-hidden on the icon, which @garret wisely recommended, so that it won't be read. You might not need aria-hidden when using role="text" but since that role is undocumented and technically not supported, you'd have to test it.

user_767140
Related