tabindex Attribute
- This attribute assigns a tabbing order to the elements in the form (and also to anchors in the document), so that the user can tab through them in a (hopefully) logical and useful fashion.
- If
tabindex is omitted then browsers tab to form elements and anchors in the sequence that they occur in the code.
- If
tabindex values are equal for two elements, source order should be used as the fallback for determining where tabbing goes to next.
- Values range from
0 to 32767 (although browsers can accept values down to -32767).
- The sequence you use can skip numbers (tabbing always goes to the next higher
tabindex value, regardless of any unused values in between), which is useful if you are leaving space for additional content to be added in the future. Incrementing the tabindex by 10 each time would allow plenty of room for such future growth.
- If a
tabindex of 0 is assigned then source order is used. If assigned to an element other than a form element or anchor then JavaScript is able to give it focus (which is useful for screen readers).
- Elements assigned a negative tabindex (typically
-1) are removed from the tab order (they cannot be tabbed to in most cases) for Windows browsers; Mac browsers generally tab to them last.
- Note: Some browsers tab to the browser's Address bar and/or built-in search box first, before moving on the page content.
tabindex Example
<p>Last Name:<br />
<input type="text" size="20" name="last_name" tabindex="20" /></p>
<p>First Name:<br />
<input type="text" size="20" name="first_name" tabindex="10" /></p>
<p><input type="submit" value="Submit Name" tabindex="30" /></p>
The tabindex Example Renders As:
<label></label> Tag
- The
<label></label> tag serves two very important functions:
- When assistive technology (e.g., a screen reader) encounters a form element it will read the label text (the text inside of
<label></label>) associated with that form element, as well as identifying the nature of the form element. This is primarily helpful to users listening to spoken output or receiving braille output.
- Clicking the text inside of
<label></label> puts focus in the associated form element, which is especially helpful for radio buttons and checkboxes because the text is a much larger target (thus easier to acquire) than the form element. Users with mobility limitations or issues benefit from this the most, although everyone benefits to some extent.
- Typically the labels are the field names.
- This can be implemented one of two ways:
- Within the form element specify an
id attribute, and within the <label> tag specify the for attribute and give it the id's value (e.g., <label for="someidentifier">). In this approach the nesting of tags also makes no difference.
- Surround the text and the form element with
<label></label>, which is an inline element. In cases where multiple form elements are within the same <label></label> only the first one gains focus.
- The
<label></label> tag can always be wrapped around text and some browsers still work properly when it is wrapped around images and other objects (so clicking the image could select the radio button next to the image).
<label></label> Approach 1 Example
<label for="last_nm">Last Name:</label>
<input type="text" size="20" name="lname" id="last_nm" />
The <label></label> Approach 1 Example Renders As:
<label></label> Approach 2 Example
<label>Last Name: <input type="text" size="20" name="lname" /></label>
The <label></label> Approach 2 Example Renders As:
accesskey Attribute
- Accesskeys are keyboard shortcuts so that users can move quickly to a desired form element or anchor (and trigger the form element or anchor, depending on the browser and the element).
- You can assign the
accesskey attribute to the label of a form element (inside a <label> tag) or to the form element directly (by placing the attribute inside the form element's tag).
- In some cases the
accesskey attribute will trigger a validation error if applied directly to the tag (this occurs with <select>); if that occurs specify the accesskey in the associated <label> tag.
- For Edge, Safari, and Chrome press the 'Alt' key (on Mac browsers this is the 'Ctrl' key) plus the indicated letter to move the focus to the indicated element.
- Windows Firefox uses 'Alt' + 'Shift' + the character to avoid clashes with browser shortcuts (which use 'Alt' + the character).
- For the Macintosh version of Firefox use 'Ctrl' + 'Shift' + the character.
- Numbers can be used for accesskeys.
Issues and Concerns with Accesskeys:
- Be sure to specify each accesskey character only once per web page, as browsers cannot be guaranteed to behave consistently if the same accesskey is specified multiple times (often the last instance of that accesskey in the code is used or neither functions, but this behavior is guaranteed to be inconsistent cross-browser).
- You may also encounter some accesskeys that are already reserved by a given browser and cannot be re-assigned. For example, various browsers put focus in the browser's address bar when 'd' is used as an accesskey. Be sure to test cross-browser and cross-platform.
- A big problem with accesskeys is indicating them to the user. How do you inform them of the keys to use?
- Underlining the accesskey letter in the field name is one approach.
- Websites sometimes include an accessibility statement that details accesskeys and other accessibility enhancements.
- Users should also avoid holding down the accesskey combination, especially for form submit buttons and anchors. The result is not positive.
- Note: Accesskeys are the most controversial of all the accessibility enhancements, because they override other operating system, browser, and assistive technology shortcuts and that can be detrimental to the user experience.
accesskey Example
<label for="lnm" accesskey="n">Last Name:</label>
<input type="text" size="20" name="lname" id="lnm" />
The accesskey Example Renders As:
<fieldset></fieldset> and <legend></legend> Tags
- These tags are used together to visually group (and label) sets of related form elements, which assists users with cognitive impairments to understand the relationships / groupings in the content.
- Expect some cross-browser differences in how the legend and fieldset content line up, which can be adjusted and standardized by styling the elements.
<fieldset></fieldset> and <legend></legend> Example
<fieldset>
<legend>Name</legend>
<label for="firstname">First Name:</label>
<input type="text" name="fname" id="firstname" size="20" />
<br />
<label for="lastname">Last Name:</label>
<input type="text" name="lname" id="lastname" size="20" />
</fieldset>
<fieldset>
<legend>Contact Information</legend>
<label for="strt">Street Address:</label>
<input type="text" size="20" name="street" id="strt" />
<br />
<label for="cty">City:</label>
<input type="text" name="city" id="cty" size="20" />
</fieldset>
The <fieldset></fieldset> and <legend></legend> Example Renders As:
<optgroup></optgroup> Tag
- Using
<optgroup></optgroup> the items in drop-down menus (select menus) can also be grouped together.
- Use the
label attribute to specify the name shown for the group of options.
- Browsers will boldface (and sometimes also italicize) the option group label.
<optgroup></optgroup> Example
<select name="web">
<option value="">Please Choose...</option>
<optgroup label="Color Group 1">
<option value="Blue">Blue</option>
<option value="Red">Red</option>
</optgroup>
<optgroup label="Color Group 2">
<option value="Yellow">Yellow</option>
<option value="Green">Green</option>
<option value="Purple">Purple</option>
<option value="Orange">Orange</option>
</optgroup>
</select>
The <optgroup></optgroup> Example Renders As:
