ID Attribute

The ID attribute is used to uniquely identify an HTML page element.

Challenges faced by disabled users when ID attributes are missing or not used properly are:

  • Assistive technology has trouble identifying the element
  • JavaScript that depends on the ID to uniquely identify the element fails


A properly set ID allows JavaScript and assistive technology to discover the page element.

Selecting the buttons in these examples set the focus to the corresponding text box.


Identify page elements with unique IDs

default.htm (excerpt)
<label for="txtFirstName">First Name</label>
<input type="text" id="txtFirstName" />
<button id="btnFirstName" onclick="setFocusToElem('txtFirstName');">Set focus to First Name</button>

<label for="txtLastName">Last Name</label>
<input type="text" id="txtLastName" />
<button id="btnLastName" onclick="setFocusToElem('txtLastName');">Set focus to Last Name</button>
Visual Inspection
  1. View the source of the page
  2. Verify that IDs used for page elements are unique