WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: ARIA tabs interaction

for

From: Bryan Garaventa
Date: Apr 29, 2016 5:01PM

I get the frustration, yet a lot of what is experienced from the points you mention have to do with non-intuitive design and unreliable scripting.

For example: The use of ARIA Tab attributes simply effects the mapping in the accessibility tree, it has no effect on the scripting or visual layout of the page.

For sighted keyboard only users, a designer can add a simple CSS class like the following to visually display arrows to indicate that the arrow keys should be pressed when interacting with a particular group of elements.

*[role="tab"]:focus:after {
/* style using content to display arrows here when focused */
}

Typically this isn't needed if groups are visually conveyed intuitively, but this is an option that developers have at their disposal.

I agree that icons without textual equivalents is a problem, and the same technique can be used to do the same thing actually, to accompany attributes such as aria-label that are not rendered visually.

E.G

<span aria-label="Add Favorite" class="addIcon" role="button" tabindex="0"></span>

The following CSS will then display the above aria-label text for both sighted mouse and keyboard only users.

span.addIcon:focus:after, span.addIcon:hover:after {
/* Rules to position pseudo element. */
content: attr(aria-label);
}

Nothing is ever perfect, but we all have to move forward, and saying that it's impossible for people to learn, will never help this happen.



Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.SSBBartGroup.com