Search code examples
htmlioswai-ariavoiceover

VoiceOver on iOS read text as pieces when using Strong tag


I'm trying to give an aria label or role that could fix the fact that VoiceOver on iOS doesn't read the full text but rather stops at the strong tag.

For Example,

<div>
 Some text <strong> some strong text</strong>
</div>

In this case, VoiceOver on iOS will read the text as two separate pieces. I have only came with one solution that is giving role='text' to the parent div, but this solution it's not the most accessible one since that role is not part of aria. Any suggestions on how to make VoiceOver read this as a whole text?


Solution

  • You don't have to "fix" this issue. VoiceOver users are used to VO reading parts of the text when there's an embedded HTML element.

    Trying to force a role just so you can apply an aria-label will most likely make it more confusing than clarifying if there's not a natural role to apply.

    role="text" is only honored on iOS since it's not an approved role. It doesn't do anything on other platforms but does indeed "fix" the issue you're trying to work around.

    <div role="text">
     Some text <strong> some strong text</strong>
    </div>