WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: tabbed interfaces - tricky question


From: Mallory
Date: Oct 31, 2018 9:12AM

One thing I want to say,
quote: "If the nav menu is visually styled to look like tabs, that's ok."

Sighted keyboarders can never tell one from the other. Not only is there no universal design difference between navving and panelling tabs, but Material Design has made it worse by teaching designers that the page links style are called "tabs" (that's the component name) and with single-page apps it gets blurry between a panel content changed and a View changed (devs don't always remember to change the <title> text and focus can end up... anywhere).

I've started thinking I'll toss a coin every time I see something that vaguely looks tabby to see how I should try to navigate it first. The uncertainty is unsettling, takes me out of my mindset for the task I was trying to do, and I have to re-learn whatever is the "right" way on every new website. Unlike an SR user I don't get the benefit of being told about any aria roles or anything (although I've seen so many "tab panels" with all the right aria markup but none of the correct JS that that may not be so helpful anyway).

I wish browsers offered something to tell me wft the thing is (visibly) so I can just use it without playing a game first. But so anyway, ideally a single website does not switch between the behaviours, and if it must, style them radically differently please.


On Wed, Oct 31, 2018, at 11:10 AM, Mohith BP wrote:
> "the rest of the page -- title, other content -- stays exactly the
> same) BUT in fact activating tabs loads up different pages
> that differ only in terms of the panel content."
> The rest of the page especially title remains same and you are telling
> it is a page refresh affecting only the panel content.
> 1. If this panel content you are mentioning is the main content then
> the title of the page need to match to the content displayed.
> 2. If this tab panel content is just a small portion of the page then
> I don't see how this can be a page refresh.
> 3. As already mentioned by others 1 and 3 scenarios need not be ARIA
> tab specifications.
> Thanks & Regards,
> Mohith B. P.
> On 10/30/18, glen walker < <EMAIL REMOVED> > wrote:
> > Just to add to the consensus that Patrick and Isabel have already posted, I
> > don't think there are two types of tab panels. The first one you described
> > (and the third one you described, which is the basis of your question) is
> > just a navigation menu (but not a "menu" in the true sense of the word like
> > an application menu and role="menu" - that's a whole nother discussion).
> > If the nav menu is visually styled to look like tabs, that's ok. When you
> > select an item, if a new page loads but looks exactly like the previous
> > page but with new contents in the "tab" area, that's ok too. It's still
> > just a basic link to a new page and should be implemented as a basic link
> > navigation. No tab roles should be used.
> > > > > > > > > >
> > > >