WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Dogs, cats, ARIA, and JAWS

for

Number of posts in this thread: 6 (In chronological order)

From: R.U. Steinberg
Date: Thu, Aug 10 2017 10:46AM
Subject: Dogs, cats, ARIA, and JAWS
No previous message | Next message →

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/

From: Lovely, Brian (CONT)
Date: Thu, Aug 10 2017 10:53AM
Subject: Re: Dogs, cats, ARIA, and JAWS
← Previous message | Next message →

Aria-label and aria-labelled by tend to take precedence over other parts of what ends up being an element's accessible name. The accessible name computation is described in detail in the W3C Accessible Name and Description: Computation and API Mappings 1.1 (https://www.w3.org/TR/accname-aam-1.1/). Aria-describedby would allow other strings from the element to be concatenated into the accessible name.



-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of R.U. Steinberg
Sent: Thursday, August 10, 2017 12:47 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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/ The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: Ben Regis
Date: Thu, Aug 10 2017 11:13AM
Subject: Re: Dogs, cats, ARIA, and JAWS
← Previous message | Next message →

Hi

Out of interest, why aren't you just using an h2 instead of the span?

Kind regards

Ben

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of R.U. Steinberg
Sent: 10 August 2017 17:47
To: WebAIM Discussion List < = EMAIL ADDRESS 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/

From: R.U. Steinberg
Date: Thu, Aug 10 2017 11:29AM
Subject: Re: Dogs, cats, ARIA, and JAWS
← Previous message | Next message →

I would have to check on that with someone else why an aria role is
preferred over a standard heading. I tried an <h2> and JAWS didn't like
that much either,

On Thu, Aug 10, 2017 at 12:13 PM, Ben Regis < = EMAIL ADDRESS REMOVED = > wrote:

> Hi
>
> Out of interest, why aren't you just using an h2 instead of the span?
>
> Kind regards
>
> Ben
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of R.U. Steinberg
> Sent: 10 August 2017 17:47
> To: WebAIM Discussion List < = EMAIL ADDRESS 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/
> > > at http://webaim.org/discussion/archives
> >
>
> > > > >

From: Jonathan Avila
Date: Thu, Aug 10 2017 11:30AM
Subject: Re: Dogs, cats, ARIA, and JAWS
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of R.U. Steinberg
Sent: Thursday, August 10, 2017 12:47 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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/

From: R.U. Steinberg
Date: Thu, Aug 10 2017 11:50AM
Subject: Re: Dogs, cats, ARIA, and JAWS
← Previous message | No next message

Thank you Brian and Jonathan!

On Thu, Aug 10, 2017 at 12:30 PM, Jonathan Avila < = EMAIL ADDRESS REMOVED = >
wrote:

> 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 ADDRESS 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 ADDRESS REMOVED = ] On
> Behalf Of R.U. Steinberg
> Sent: Thursday, August 10, 2017 12:47 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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/
> > > at http://webaim.org/discussion/archives
> > > > > >