WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Graham Armfield
Date: Aug 6, 2015 10:56AM

Having all the tab headers as links surely helps users of Dragon
NaturallySpeaking to select required tab more easily - without having to
rely on mouse grid or full mouse move interaction. Also, aren't many switch
setups geared up for easier access to tab and enter - rather than
left/right arrow keys?

Regards
​Graham Armfield​



On Thu, Aug 6, 2015 at 5:25 PM, Birkir R. Gunnarsson <
<EMAIL REMOVED> > wrote:

> Be mindful of using aria-hidden="false" as it may override things
> inside the tabpanel that are supposed to be hidden.
> <div role="tabpanel" aria-hidden="false">
> <div id="userOpinionSecret" style="display: none">WE know this user,
> he is not popular</div>
> </div>
> Users, at least of some screen readers, will see tthis text, because
> aria-hidden="false" overrides display: none;
> If you are using display: none type class to hide inactive tabpanels
> you do not need to add aria-hidden to that.
> I have passed tabbed interfaces where all tabs are in focus order,
> though I have recommended full implementation as strong best practice.
> Jaws treats tabs as comboboxes (you can get to them using keyboard
> shortcut "c") and it makes sense in a way, but only if arrow key
> navigation is enabled.
> I would be surprised if adding aria-controls solves the issue, though
> I hope it does.
>
>
>
> On 8/6/15, Detlev Fischer < <EMAIL REMOVED> > wrote:
> > Hi,
> > thanks to Jon and Leonie and Birkir for your quick and helpful
> suggestions!
> >
> > The main deviation from the recommended pattern is that on reaching the
> > tablist, arrow navigation is not used to navigate between tabs - tabs are
> > indeed reached by tabbing to them, and enter on the focused tab updates
> the
> > tabpanel content. (We actually have at times recommended that behaviour
> to
> > avoid a situation where users not familiar with the tab pattern and
> > switching to arrowing may miss content inside not active tabpanels.)
> >
> > Jon: the tabs themselves do not have aria-hidden on them, and they are
> the
> > ones that are not read by the screenreader when arrowing through
> content...
> >
> > What is missing in the current mark-up of tabs is actually the
> > "aria-controls" attribute referencing the respective tabpanels. So adding
> > that might make a difference.
> >
> > Birkir: the ol holding the li elements witn role=presentation indeed
> carries
> > role=tablist.
> >
> > --
> > Detlev Fischer
> > testkreis c/o feld.wald.wiese
> > Thedestr. 2, 22767 Hamburg
> >
> > Mobil +49 (0)1577 170 73 84
> > Tel +49 (0)40 439 10 68-3
> > Fax +49 (0)40 439 10 68-5
> >
> > http://www.testkreis.de
> > Beratung, Tests und Schulungen für barrierefreie Websites
> >
> > Jonathan Avila schrieb am 06.08.2015 16:30:
> >
> >> Detlev, perhaps aria-hidden is not being updated in time for the screen
> >> reader
> >> to see the updated content.
> >>
> >> Jonathan
> >>
> >> --
> >> Jonathan Avila
> >> Chief Accessibility Officer
> >> SSB BART Group
> >> <EMAIL REMOVED>
> >> Phone 703.637.8957
> >> Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
> >>
> >>
> >>