WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dogs, cats, ARIA, and JAWS

for

From: Jonathan Avila
Date: Aug 10, 2017 11:30AM

While you can put block level elements inside links it is likely to be verbose with AT and could cause some issues with some AT. You also should not put other interactive content in links.

Use of aria-label will replace the contents inside as the accessible name of your link. aria-label can be used on grouping elements to provide a name in addition to not hiding the content of elements -- e.g. role of region but then whole area would not be a link. There are other ways to solve that though to make the whole area clickable and associate the contextual surrounding text with a link.

Jonathan

Jonathan Avila
Chief Accessibility Officer
Level Access, inc. (formerly SSB BART Group, inc.)
(703) 637-8957
<EMAIL REMOVED>
Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
Looking to boost your accessibility knowledge? Check out our free webinars!

The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of R.U. Steinberg
Sent: Thursday, August 10, 2017 12:47 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] Dogs, cats, ARIA, and JAWS

I have a layout that consists of a group of boxes. Each box is in a div and is a link to another page with more information, but there is content in each box including a span with a role="heading" aria-level="2. I have applied an aria-label to the box. JAWS 18 with IE 11 is ignoring all the content in the box including listing the headings--it just reads the aria-label. But I am told using the arrow keys, NVDA and Voiceover pick up the heading 2s. Any advice?

I have put some code at https://jsfiddle.net/mgLtqvx2/