Keyboard navigation

Permalink Browser Info Environment
Since this might be interesting for others too, let me ask this question here: do Magic Tabs actually support keyboard navigation?

Type: Discussion
Status: New
View Replies: View Best Answer
JohntheFish replied on at Permalink Best Answer Reply
Each tab is constructed as a list item with an internal link inside it. So 'theoretically' any screen reader that processed JavaScript (needed to set up the tabs) would subsequently read each tab as a link to content. I say 'theoretically' because this has not been tested.

Other than that, there are is no specific functionality for keyboard navigation. However, it could be 'bolted on' in a template or even built in if there was enough call for it and a well specified requirement.

Formulating a well specified requirement would be the difficult part - coming up with an agreed method of keyboard navigation, whether it took account of mouse cursor focus, whether it integrated with using the tab key to tab between form elements in a tab sequence, whether it responded to hot keys for tabs, whether it took over keys globally or just locally, and how local. There are so many different ways that its a bit of a minefield unless the requirement is very well thought through.
okapi replied on at Permalink Reply
Thank you very much for your speedy and informative answer! Personally i would be happy if navigation via the tab key would be implemented.
JohntheFish replied on at Permalink Reply
With the Tab key, are you looking for inserting magic tabs into the overall document tabbing sequence (form fields, other tab-able elements, etc.)? Or are you thinking of just when the mouse cursor has focus on the area being managed by magic tabs?

It comes back to my previous post, the difficult part is coming up with the right specification that works for magic tabs, at the same time doesn't get in the way of anything else, and makes sense to all users.
okapi replied on at Permalink Reply
I admit, i see tabs more from the user's perspective, thus simply as navigation elements to browse content. The user doesn't care whether he's browsing pages or just blocks on the same page. Thanks to your explanation, i'm aware of the problem that generally exists when tabs do not link to pages, but just show and hide content elements (blocks) on the same page via javascript.

Being able to focus a full sequence of all existing links on a page (with magic tabs) via the tab key of course would be nonsense. But why not hide all links in blocks of a tab, just until that tab is opened, either by mouse click or enter key? In other words, for tab key navigation, the tabs should have priority over the links in the containing blocks. Could that be achieved with javascript?
JohntheFish replied on at Permalink Reply
The main issue is form fields. The tab key has a well defined role for tabbing between form fields and further roles in the ARIA specification. Whilst Magic Tabs is not ARIA compliant, I wouldn't want to end up making it less so.

I agree that fields in hidden magic tabs should be inactive from the tab key.

So we need to define:
What happens with form fields elsewhere on the page?

How do we get out of tabbing between them and into tabbing between Magic Tabs?

Once tabbing between Magic Tabs, how do we know when to jump inside the currently shown magic tab to tab between form fields within that tab, rather than continuing to the next magic tab?
okapi replied on at Permalink Reply
While tabbing between Magic Tabs should work with the tab key, I think, pressing the enter key would be the logical way to enter the content of a tab and get access to all links and form fields inside that tab.

As there's currently no demo available, i actually don't know, whether Magic Tabs do open on mouseover or on click. Personally, i would like that they act the way a standard html/css menu, an unordered list with a, a:hover and a:focus, would do.

In some cases, "skip" links, placed by the web developer, could be helpful to provide accessibility while avoiding too much tabbing, for example, depending on the structure of the content, "skip tabs" or "skip form" or the like.
JohntheFish replied on at Permalink Reply
The default dom for the tabs is 'a' within 'li', which is the usual semantics (others can be created via templates). So the tab opening event is click, though it would be fairly straight forward to code a template with some script to open tabs on hover (effectively translating a hover event into a click event)

I think I have enough of an idea about how you picture the navigation between tabs to work for now. Can you fill me in with a bit more background.

Why do you want the tab key? Is it a site for visually impaired? - or is it just a convenience for site visitors?

What is your programming background? Are you looking for something that just drops in? - or are you planning on doing some integration work?

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.