Screen reader not reading parent's aria-label in mobile

0
votes

I'm new to a11y, and have a code similar to this structure -

<div class="wrapper" aria-label="this is a group of test elements">
   <div aria-hidden="true">test 1</div>
   <div aria-hidden="true">test 2</div>
</div>

Behaviour on MAC chrome - Pressing Ctrl+Option+rightArrowKey puts focus on wrapper and VoiceOver reads "this is a group of test elements"

But, on mobile, aria-label is ignored.

Is there any way to focus the parent container and make screen reader read aria-label?

1
htmlaccessibility

1 Answers

0
votes

See "2.10 Practical Support: aria-label, aria-labelledby and aria-describedby".

A few key points (emphasis mine):

  • aria-labelledby and aria-describedby are robustly supported for interactive content elements such as links and form controls including the many input types.

  • Don't use aria-label or aria-labelledby on a <span> or <div> unless it's given a role.

So when you put a label on a non-semantic element (such as a <div>), the label may not be read unless you give the element a role. However, don't give it a role just to get a label read. Make sure the purpose of that container really requires a role that should be conveyed to screen readers.