Manage KeyBoard Focus via TabIndex
Individuals with certain types of disabilities such as carpal-tunnel cannot use mouse effectively. They rely on key board navigation. This article deals with how to make web content key board accessible.
Consider the form show below. This form is navigable by default using the “tab” key of the keyboard.
<!DOCTYPE html>
<html>
<body><h1>HTML Forms</h1><form action="/register.php">
<label for="firstname">First Name:</label>
<input type="text" name="firstname" value="Jane">
<br>
<label for="lastname">Last Name:</label>
<input type="text" name="lastname" value="Doe">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Using the tab key, the initial control will be on the First Name text box, then Last Name text box and then the Submit button. Thus this form is key board accessible. HTML elements such as inputs, buttons etc are key board navigable by default and no special code constructs are required.
However elements such as <div>, <span>, headings <h1>…<h6>, etc are not key board navigable by default. E.g. in the above form, pressing the tab key by will not select the <h1> tag by default. To achieve key board navigation for such elements, HTML offers an attribute called tabindex. The following line by virtue of the tabindex attribute will be keyboard accessible.
<h1 tabindex="0">HTML Forms</h1>
Thus tabindex is used in to make non-interactive content focusable via key board. The tabindex attribute accepts a numeric (integer) value. This can be:
0
-1
any integer value greater than 0
Best Practice(s) on tabindex attribute:
- The value of 0 will allow key board navigation to match the ordering of the page.
- The value of -1 will prevent keyboard navigation to that selector. However via JavaScript this can be be changed to 0 or higher value and keyboard navigation to such selectors can thus be controlled. E.g. make a certain field or a div keyboard navigable under special conditions — e.g. when an error occurs.
- The value of greater than 1 will make cause keyboard focus to move to that element even if it were later in the order than elements with a lower tab order. This though should be avoided because screen readers get follow natural DOM (or HTML Page Element) order and get confused by tabindex attributes greater than 0. The tabindex attribute should correspond to DOM order, CSS can be used to change visual order of elements.
