Code

Problem

Websites that use invalid, custom, or outdated code are not always compatible with the assistive technology used by people with disabilities.

How to Fix

  • Use a markup validator like W3C Markup Validation Service to help check and correct your code.
  • Use standard HTML controls according to specification.
  • Use CSS stylesheets to separate content and presentation.
  • Ensure that the name, state, role, and value of all controls are available to assistive technology (AT).

Advanced Tips

  • When HTML elements are used according to specification, the name, state, role, and value is already available to assistive technology.
  • When custom controls or HTML elements have different functions or roles than usual, then developers must take extra measures to ensure the name, state, role, and value is available.

Understanding Name, State, Role, and Value

  • The name of a control is the text name that software can use to identify the control.  It is unrelated to the name attribute.
  • The state of a control refers to what condition the control is in at that specific time, if relevant.
  • The role of a control is the text (or number) that software can use to identify the function of the control.
  • The value of a control is the value of the control, which can be set by the user.
  • If the state, properties, or value of a control are changed, notification of any changes must be available to the user.

For example, a select menu is a type of control. The name of the select menu might be a programmatically associated label. The state of the select menu might be disabled if the control cannot be used at that specific time. The role of the select menu might be select (or 'listbox' if defining a role using WAI-ARIA). The value of the control would be the value of the selected option. If anything changes about the select menu, this information would have to be available to the user through their assistive technology.

Things to Avoid

  • Do not use duplicate ID attributes for multiple elements on the same webpage.
  • Do not use duplicate attributes on the same element.
  • Avoid using generic elements (e.g. div and span) to create UI controls when other well-defined HTML elements would be better suited to the role (e.g. links, buttons, text input fields, etc.)

External Resources

  1. Understanding Success Criterion 4.1.1 Parsing (Level A)
  2. Understanding Success Criterion 4.1.2 Name, Role, Value (Level A)