CODEWITHSUNDEEP
htmlaccessibilityvoiceover
nour shaamrok
nour shaamrok

Reputation: 39

HTML5 accessibility does not read div/spans

I have an HTML file:

<html>
<body>
<div> my name is <span class="hightlight">jon</span> lbrson</div>
<body>
</html>

In IOS with voice over enabled, when I touch sentence the voice over does not read all of the sentence. The voice over reads each section of the sentence (between the div/spans) separately like so:

my name is

jon

lbrson

I tried aria-hidden.

How can I change the voice over to read the whole sentence without removing the span?

Upvotes: 1

Views: 2559

Answers (1)

slugolicious
slugolicious

Reputation: 17563

That's how VoiceOver on iOS works. If you try VoiceOver on a Mac, it will read the entire sentence, as does JAWS on a PC. So VO on iOS has chosen to navigate by individual elements. However, the VO user has several options:

  1. They can change their navigation via the rotor. If you set your rotor to "lines", then you can swipe up/down and VO will read the entire sentence.

  2. You can "read all" on the page by doing a two finger swipe up.

  3. You can "read all" from your current position by doing a two finger swipe down.

VO users on iOS devices are used to this. It can sometimes be handy to have VO stop at embedded spans, though. If the span is being used to format a piece of text differently, the VO user is given an indication that the text is split up for some reason.

Your second question in the comments, regarding CSS "content", should be asked as a separate question so that you'll get a wider audience to responde.

Upvotes: 1

Related Questions