The site I’m currently building is a little different from the norm. Instead of having multiple separate pages, all site content is on a single index.php file, and using absolute positioning and javascript the user “pans” across the site from page to page.
There are several different forms in the page as well. I was told not to worry about catering to people with Javascript disabled so we’ve opted for jQuery combined with JSON web-services for all forms on the page. This all works perfectly now, but there’s a slight usability problem: tab-indices.
Since there are multiple forms, tabbing from one input-field to the next can result in the user suddenly jumping to an entirely different part of the site when the user reaches the end of a form and then tabs again. This is especially annoying in Firefox and Safari where buttons and radiobuttons are ignored when tabbing.
So here’s my question: does anyone know of a way to constrain a user’s focus to a single form element?
Here’s an alternate approach that might side-step this issue, and could end up being more accessible.
I’m assuming you have some elements on that page that you use to trigger the panning from one sub-page to the other?
If so, basic idea here is that when any page is “scrolled off”, hide that ‘sub-page’ (presumably some container DIV) with display:none or visibility:hidden.
The key issue here is that content hidden with either of these two methods is non-tabbable, so the user can’t accidentally tab into those hidden pages. Also importantly from an accessibility point of view, screenreaders know to ignore content that’s marked up this way, so they will only read the current page (which is consistent with what a sighted user sees), not the entire page.