0

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?

pgupta
  • 23
  • 6

1 Answers1

0

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.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • thanks @slugolicious **role="text"** on wrapper div solved my problem but is it an ideal way of achieving the desired result? I'm trying to put focus on the wrapper section and read the summary while avoiding it's content (test1 and test2 in this case) being read individually. – pgupta Feb 21 '19 at 10:50
  • 1
    `role="text"` is not a valid role (see the role link in my reply), although it **is** currently honored on ios but support for it could disappear at any time since it's not a documented valid role. secondly, why are you putting focus on the wrapper? it's not an interactive element so focus should not be moving to it. – slugolicious Feb 21 '19 at 15:47