Elements with event handlers must have roles

Rule ID Widget 11
Definition Elements with UI event handlers must have widget roles that accurately describe the options and actions available to the user upon interacting with the element.
Purpose
  • ARIA widget roles describe the user options and actions, or more generally, the expected behavior, of interactive elements to users of assistive technologies.
  • Standard HTML form controls and links have default widget roles that describe their behavior.
  • When UI event handlers are used to create user options and actions that change the expected behavior of an interactive element, ensure that the appropriate widget role is assigned to the element.
  • Conversely, ensure that the event handlers are adding appropriate behaviors that align with the ARIA widget role.
Required Yes for HTML5 and ARIA Techniques ruleset mapping
WCAG Success Criteria

4.1.2 Name, Role, Value (Level A, Primary Success Criterion)

Rule Category Widgets/Scripting
Scope Element
Target Resources Elements with event handlers
  • [onclick]
  • [onmousedown]
  • [onmousemove]
  • [onmouseup]
Techniques
  • Use the role attribute with an ARIA widget role value to describe the user options, actions and expected behavior of custom interactive elements.
  • Use ARIA property and state attributes to describe the features of each widget role. Note that some widget roles have required properties and states.
  • Ensure that all options and actions of interactive elements are available through keyboard-only interaction.
Informational Links