WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: tabpanel mark-up, possible effect of role=presentation

for

From: Léonie Watson
Date: Aug 6, 2015 8:03AM

> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ]
> On Behalf Of Detlev Fischer
> Sent: 06 August 2015 13:55
> Now my question: when navigating with arrow keys in NVDA and JAWS
> (Firefox), both screen readers do not read the tabs - they skip straight to the
> tabpanel content below. I fist though this might be due to role=presentatino
> on the li elements, but this role should not apply to the a elements inside the
> li elements, if I correctly understand the ARIA semantics.

I've just tested the following code with NVDA and Jaws in FF. In each case the tabs are announced as expected. It's worth noting that when using the arrow keys to navigate, NVDA will speak both tabs as a single announcement, whereas Jaws will announce them separately (requiring an additional key press).

<ul role="tablist">
<li role="presentation"><a href="#p1" role="tab" aria-selected="true" aria-controls="p1" id="t1">Blanco</a></li>
<li role="presentation"><a href="p2" role="tab" aria-selected="false" aria-controls="p2" id="t2">Reposado</a></li>
</ul>

<div role="tabpanel" id="p1" aria-labelledby="t1" aria-hidden="false">Blanco tequila is...</div>
<div role="tabpanel" id="p2" aria-labelledby="t2" aria-hidden="true">Reposado tequila is...</div>

I think this code example matches the description of the code you're testing? If so, Birkir's suggestion that the JavaScript might be at fault is worth looking at, or alternatively check the styles. If you can cut/paste the HTML of the example you're looking at into an email, that might help us track it down though.

Léonie.


--
Léonie Watson - Senior accessibility engineer
@LeonieWatson @PacielloGroup PacielloGroup.com