Page Title: Document generator | Online Document Creator | ToolDoc Applications
December 07, 2021 06:56

Elements with event handlers must have roles

Actions

Severity Action
no actions
Hidden The hidden interactive element with event handlers was not evaluated.

Details

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.
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

Element Results

Element Identifier Result Element Position Message

Column Definitions

Element Identifier
Information about the element associated with the result.
The information typically includes the tag name, accessible name or other information related to the rule requirements.
"Page" means that the result applied to the page. For example, the rule "One main landmark on the page" is a page level rule.
Element Position
The element position is based on the DOM order of elements in the page.
The element position maybe useful in helping to locate a specific element on the page evaluated (e.g smaller numbers are typically toward the beginning of a page and larger numbers typically toward the end of a page).
Element position 1 is the first element.
The highest element position is the last element.
Element position values for most rule/page results will not be consecutive since a rule only applies to a sub set of elements found on a page.