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

Question

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?

Answer 1

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.