WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: WCAG Violation for use of tabindex=0 on staticelements.

for

From: Moore,Michael (Accessibility) (HHSC)
Date: Mar 16, 2016 2:25PM

Thanks Marc,

I was considering that one but talked myself out of it because the sequence seemed to be correct. It goes left to right from top to bottom. On further reflection though I may be able to argue that the correct sequence is to move logically from active element to active element. The addition of tabindex="0" on inactive elements is interrupting that sequence in a major way.


Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Marc Solomon
Sent: Wednesday, March 16, 2016 3:11 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] WCAG Violation for use of tabindex=0 on static elements.

Maybe https://www.w3.org/TR/WCAG20-TECHS/F44.html?

Best,
Marc

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Moore,Michael (Accessibility) (HHSC)
Sent: Wednesday, March 16, 2016 4:02 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] WCAG Violation for use of tabindex=0 on static elements.

I am preparing a report on the accessibility of a web application for a vendor. The vendor has placed a tabindex="0" on almost every static element. Thus we have things like this

<ul>
<li tabindex="0"><a href="...>destination 1</a></li>
<li tabindex="0"><a href="...>destination 2</a></li>
<li tabindex="0"><a href="...>destination 3</a></li> </ul>

Which causes an extra tab stop between each link in a navigational section.

Or

<div tabindex="0">
<span tabindex="0">
<h1 tabindex="0">Heading text</h1>
</span>
</div>

Which causes three tab stops on the main heading...

On any given page there may be as many as 50 items that are included in the tab ring that should not be.

This is making the application virtually unusable for keyboard users and very difficult to use for screen reader users. In some cases buttons that are placed inside of divs with the 0 value tabindex are announced when focus is placed on the div but are not executable at that point.

Are there specific WCAG AA guidelines that I can cite for this problem?


Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission Civil Rights Office