'Safari + voiceover not reading labels with nested elements correctly

I've stumbled upon an issue (i think) with how voiceover + safari interact with reading labels which have nested elements within them.

Here's a codesandbox with the issue. If you use voiceover + chrome, it will properly read the label "text here" in its entirety. However, if you do the same in safari, it will read "text and 1 more item".

Is this a bug with safari/voiceover? Or is there something that can be done to avoid this (without just sticking an aria-label onto it)?

htmlsafariwai-ariavoiceover


Solution 1:[1]

Voiceover on Safari on iOS works just fine. I'm guessing you're on a Mac? I hear "text here" for the checkbox label. See the red highlighted box in the image.

The word "here" is also "tab stop", so to speak, for Voiceover after navigating from "text here" because that's how Voiceover handles labels that have embedded <div> elements.

I'm not sure why Safari says "and 1 more item" but I'm almost certain it's because of the nested <div>. You can probably work around the issue by using the undocumented and not officially supported text role. Change your codesandbox to:

<div role="text">
  text <div>here</div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 slugolicious

Related Questions