My use case is a traditional form page. My page contains a few buttons on the top right followed by form input fields.
When using mouse-less navigation and pressing tab, the standard behavior is exhibited where first focus is set on the browser tab and the browser URL and then into my actual web page in the order of elements (buttons on the top right into the form fields).
However, it seems better accessibility would have pressing tab on the last form field jump straight to the "Save" button on the top right of the page instead of having to loop through the browser tab and then browser URL again. So essentially, I want to "skip" the traditional order of focus on elements after pressing tab on a specific element (the last focusable element on my page which is the last form field) so that it goes to another specific element I want. Is there a way to set this behavior using HTML/CSS/JS?
There are two ways to handle this.
The first is with tabindex. You can control the order of all elements but you have to be very careful. It can make the tab order more confusing. The bigger the tabindex, the higher precedence the element has in the tab order. So you could put tabindex='2' on all your form elements and tabindex='1' on your buttons and leave the rest of the elements on the page without a tabindex. (Multiple elements can have the same tabindex value. The browser will tab through them in their respective DOM order.)
The second way to handle this is with the DOM order itself and then use CSS to move the elements where you want them. So the DOM could have the form elements first and then the buttons second. You can then use CSS to put the buttons in the upper right. This would be the preferred method because it's not as "dangerous" as tabindex.
Related
Our product owners would like the tabbing between elements on the page to be more useful. Currently, when you tab through items, you are also tabbing through things that can have focus like text links. I really don't want to add tabIndex to every element if I can help it.
I'd like to know if there's a way to:
Global remove all tab indexes (like setting it to tabindex="-1") except for elements that should always be tabbed through like textboxes, checkmarks, and radio buttons.
Selectively add or remove the tab index to individual elements that are exceptions to the rule above.
I'm fine having all the tab-able elements share the same index like tabindex="0" so the browser determines the actual order.
I'm using Angular and have JQuery as well, but ideally would like this to be a CSS-only thing if that is possible.
I am not sure if tab navigation is the right term, but here goes. As you know if you hit the tab button on your keyboard the focus of the element changes to the next element. So the first question is, is this called tab navigation or is tab navigation like moving from one tab to another changing the screen (two different web page one on each tab)? Second question is how do I control the flow of the the tab when it is moving, for instance I want it to move vertically to a certain point before it moves horizontally. I am not even sure how to tag this so if I tag something wrong please correct me.
First:
Both can and are called tab navigation. But the one referred to that way more, is the one you describe. Using the tab button to move from one element to the next.
Second:
Most of the time you shouldn't mess with the tab navigation. People see a form and expect the tab button to work a certain way, when it doesn't then they usually assume that tab is broken for your website. It's also very browser dependent which means head-aches galore when messing with it.
If you must have the tab work a certain way, then form elements have a tabindex attribute, and you can set this to a number. The tab should then follow the numbers, i.e. from 1 --> 2 --> 3.
More info can be found here.
Any element in html has a tab index <element tabindex="number">. Hitting the tab will traverse the elements on your page. The navigation part of your question is answered -- as you concluded in the first of two alternatives for interpretation -- nicely here: http://en.wikipedia.org/wiki/Tabbing_navigation
I have a form that has two radio buttons. When one of the radio buttons is clicked, JavaScript is used to set a group of sub-fields using display: block.
How can I make it so the selected radio button and sub-fields will expand when clicking the back button in IE? This issue does not occur in Webkit or Firefox.
It needs to work with plain JavaScript, so no jQuery!
One popular methods is to use a URL-hash to represent the UI state. As the UI changes, you build up a hash:
document.location.hash = "R1=true;R2=false"
When you re-load the page, look at the hash and use JavaScript to set the relevant UI elements. How you represent your elements is up to you.
My issue is that when the page is refreshed, I want the 'select' to be scrolled all the way to the top. However, if the user has scrolled the select box down to view the options (without necessarily even clicking on any of them) prior to the refresh, the 'select' box doesn't return to the top.
I've seen answers where people say to simply use selectedIndex to select the first option in the list, and thus it will automatically scroll to the top, but this is NOT an option. When the page is refreshed, nothing must be selected and thus, the only code I have at the moment is:
document.form1.componentselect.selectedIndex = -1;
Which is effective at clearing out any selections in the 'componentselect', but does not reset the scroll position.
FYI, I am using straight HTML and JS, no JQuery or anything like that. Thanks.
All you need to do is first select the top item (as you said you don't want to do), but then set it to -1!
document.form1.foo.selectedIndex=0;
document.form1.foo.selectedIndex=-1;
While I was looking at this, I also figured out how to have it remember what was selected, in case that becomes an issue:
http://jsfiddle.net/ryleyb/qPJ4S/
I think it's impossible to change the scroll position in traditional selects (select from the tag, no box generated by javascript plugins) because this box is controlled directly by the user's browser and theme, without direct interference by javascript.
I believe the only way to "reset" the display is to force the user to click on the field again, hiding and redisplaying the select tag. But you will need to click to open the box again and it hinders more than helps the user.
I'm making a large and complex application and I need to set tabindexes to help user navigate through the pages. This is a private application so I don't have restriction about (ab)using javascript (jquery).
I currently have these questions.
1) How do you force with javascript (jquery) the browser to move the cursor inside a specific textbox as soon as a page has loaded? I noticed that often browsers don't automatically put the cursor inside the first tabindexed input. I want a surefire way that forces it there no matter what.
2) Some fields that activate ui enanchement (namely jquery ui datepicker) have problems with tabbing (like having to push tab two time to go away from it), is there any way to avoid this?
3) How do you read and set tabindex with jquery? I have some fields that get hidden/shown based on user action and they should be able to "give" their tabindex to other fields if they get hidden, is this a problem, does the browser still consider a tabindex after the page has loaded?
Thank you very muchh
To put focus on a specific textbox, do this (assuming textbox id is #firstBox): $('#firstBox').focus(); See more examples here: How do you automatically set the focus...
Not particularly because the DatePicker is also its own UI, so it has various objects within it that can be focused on (which is what tabbing picks up on).
Actually, now that I've thought about it, if you hide a field (AKA, "hidden") it will not have a tabindex and the other tabs will fall in line with what is defined for the browser (typically top to bottom, left to right order). You shouldn't have to worry about setting the tabindex manually.