All you never wanted to know about tabindex

The tabIndex attribute can be used to allow nearly any element to be put into the tab order or receive focus programmatically. This has been implemented in Internet Explorer starting with version 5, Firefox starting with version 1.5, Opera 9.5 and Safari 4.
Being able to set focus to any element on the page is important for accessibility in order to implement full keyboard navigation. Elements that represent the intial interaction with a user interface component
can be but into the tab order. Other elements which are part of a particular user interface component can be interacted with via other key combinations. The keystroke interaction and identification of the user interface components to assistive technologies depends upon being able to set focus to these elements.

How Focus and tab key navigation work

• Normally only input and anchor elements are put into the tab order of a page by default.
• Setting a tabIndex attribute of 0 onto an element will put it into the tab order of the page and allow it to receive focus via the keyboard.
• Setting a tabIndex of -1 on an element will allow the element to receive focus programmatically. For input and anchor elements, setting tabIndex of -1 will remove the element from the tab order and allow focus to only be set programmatically.
• Setting a tabIndex of >0 onto an element will put that element sequentially into the tab order based on the tabIndex value. Elements with a positive tab index are put into
  the tab order before other elements with a tabIndex of 0 or which are in the tab order by default.

There are different behaviors for the tabIndex attribute and capitalization of the I makes a difference in how the attribute is interpretted in html and xhtml.
After testing different combinations of setting and querying the tabindex attribute, a set of best practices is outlined below followed by a table listing the results of each test.

Using tabIndex across browser and content type

1. Always use tabindex with lowercase i in markup. See row 1 in table below.
2. Use tabIndex with uppercase I when setting in script via element.tabIndex. See row 4 in table below.
3. Check browser and/or content-type when setting in script via element.setAttribute()
   • if is IE or content-type is text/html - set via elem.setAttribute(tabIndex) uppercase. See row 6 in table below.
   • if is content-type application/xhtml+xml or not IE 6 or 7 - set via elem.setAttribute(tabindex) lowercase. See row 7 in table below
4. Use lowercase when querying a value using getAttribute(tabindex) that was set in markup as lowercase. See row 9 in table below.
5. Use lowercase when querying a value using getAttribute(tabindex) that was set directly on element using element.tabIndex uppercase. See row 15 in table below.
   Setting tabIndex directly on the element using element.tabIndex avoids having to check browser or content type when getting the value.
6. If the rules above have been followed, use lowercase when querying a value using hasAttribute(tabindex) where available. See rows 25, 31 and 33 in table below.

Simplified Rules

• use tabindex lowercase to set in markup
• use element.tabIndex with uppercase I to set in script
• query via getAttribute(tabindex) lowercase

TabIndex testing results

The following table shows the results of testing on Windows with Internet Explorer versions 6, 7, and 8, Firefox 2.0.0.20, Firefox 3.0.1, Firefox 3.5, Opera 9.64 and Safari 4.
IE 6, 7, 8 where tested using HTML 4.01 strict. Firefox 2, 3, 3.5 as well as Opera and Safari were tested with HTML 4.01 strict as well as with XHTML 1.0 strict
served with content-type of application/xhtml+xml. Unless otherwise noted, a div was used as the test element.

Table Notes:

1. Setting in markup as uppercase tabIndex does not work in XHTML to allow focus to element.
2. setAttribute(tabindex) lowercase does not work in IE to allow focus to element.
3. setAttribute(tabIndex) uppercase does not work in XHTML to allow focus to element.

• Test file for HTML 4 strict
• Test file for XHTML 1 strict

Powered by Twitter Tools.

When writing JavaScript I generally use the object.getAttribute("attributeName") syntax to get an attribute value. However, this will return very inconsistent results for the disabled attribute. What makes it even worse, is there is more than one way to specify the disabled attribute on an input element. In HTML 4.01 you should just add the keyword disabled. In XHTML 1.1 you must use disabled="disabled". You can also use this in HTML 4.01.

What I learned from all of my testing is:

• Use disabled (HTML 4.01 only) or disabled=”disabled” (HTML or XHTML) to set in markup.
• When setting via scripting use one of the following to disable and enable, respectively
• inputObj.disabled=true and inputObj.disabled=false via boolean values;
• inputObj.disabled=”disabled” and inputObject.disabled=”" via string values;
• inputObj.setAttribute(”disabled”, “disabled”) and inputObj.removeAttribute(”disabled”)
• When testing for the disabled attribute on an input element, use inputObject.disabled for consistent results between browers.

Full testing results are tablulated at Testing the Disabled Attribute.

day off of work to visit elderly parents - although I think work would be easier #

Powered by Twitter Tools.

Powered by Twitter Tools.

Powered by Twitter Tools.

Powered by Twitter Tools.

Powered by Twitter Tools.

More info on IEEE Accessing the Future Conference July 20-21 in Boston http://tinyurl.com/qs3hnv Hoping I’ll be there #

Powered by Twitter Tools.

Powered by Twitter Tools.