-1

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

Ruslan Otonbaev
  • 23
  • 5
  • I don't see "end name" anywhere in your code so I'm not sure you posted everything. Also note that `aria-label` will override all text nested within the button so your `

    back to top

    ` will be displayed but won't be announced by voiceover.     – slugolicious May 10 '23 at 22:28
  • Sure `end name` not exist in my code but Voiceover only in IOS pronounce `Back to top button end name` and I don't know where it's found `end name`. I need so that Voiceover pronounce only `Back to top button`. I tried `aria-label` but It didn't help – Ruslan Otonbaev May 11 '23 at 05:59
  • Can you post your code? Not just a picture of your code, but copy/paste it to your question. If you have a link to your website, I can try it with voiceover. – slugolicious May 12 '23 at 19:52

1 Answers1

1

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.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • Thank you, he really speaks `end main`. And I went above by DOM elements and found div with role="main". And all became understandable for me, Anyway thanks a lot for giving me the way where dig – Ruslan Otonbaev May 15 '23 at 07:06