Custom Widgets (JavaScript, ARIA)

Name of Interactive UI Elements: Every interactive UI element (e.g. links, buttons, controls for custom widgets, form inputs/elements) MUST have a name, according to the accessible name computation.

Note: The name can come from the native text of the element (e.g. link text, <button> text), a value attribute (e.g. <input type="submit" value="Name goes here">), the aria-label text, the text referred to via the aria-labelledby ID value, or other attributes, such as title (depending on context).

Name of Static Semantic Elements: The following semantic elements MUST have an accessible name, according to the accessible name computation:

• Headings (or elements with role="heading")
• Images (or elements with role="image")
• Links (or elements with role="link"), via link text, aria-label (e.g. when the link contains only a background image), or aria-labelledby)
• Frames, via the title attribute
• Iframes, via the title attribute

Other Semantic Elements Benefitting from a Name: Examples of other semantic elements that SHOULD have an accessible name, according to the accessible name computation include:

• Landmarks (HTML 5 or ARIA landmarks); Names are especially helpful when there are two of the same type of landmark on the same page, such as two navigation landmarks
• Tables (via <caption>, aria-label, or aria-labelledby)

Static Non-ARIA Properties: Static non-ARIA properties MUST be specified in text (or alternative text).

Note: The static property may be included in the native text of an element, in its label, in associated text (e.g. via aria-describedby), in adjacent text, or in some other way that is available to assistive technologies.

Non-ARIA State Changes: If a state change cannot be communicated via a change in an ARIA attribute, when the state change is the result of a user action or request, the state change MUST be communicated to the user visually AND MUST be communicated to assistive technologies using a technique such as:

• aria-live announcement
• ARIA alert (inject text into a pre-existing container with role="alert")
• Move keyboard focus to the announcement (warning: moving the focus can be disorienting, so should be used with caution)