Search code examples
iosreactjsaccessibilityvoiceover

ReactJS accessibility issue Voiceover IOS

I have material Button component which is located before footer

enter image description here

The problem is when Voiceover focus on this button he pronounce Back to top button end name. I want to know how make that Voiceover will pronounce just Back to top button without end name.

I tried use aria-role="none" to elements inside button and also used aria-hidden unfortunately it's not help me. But when I create one more text element after button in DOM three then Voiceover starts reading end name on last text element

Solution

  • I think what you are hearing is "end main", not "end name". You can turn on the captioning panel in VoiceOver to see exactly what VoiceOver says (Settings > Accessibility > VoiceOver > Caption Panel [at bottom]).

    When you navigate through "container" elements, such as landmarks, of which "main" is one type of landmark, VoiceOver will tell the user when they reach the end of that section. That is correct behavior that you should not turn off.

    If you don't want your "back to top" to say "end main" afterwards, then you need to move the "back to top" element outside of your <main> container in the DOM. However, that will just cause "end main" to be announced on a different element.