What the standard says
For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
Why it matters
This is the criterion custom components break. A `div` styled as a checkbox tells assistive tech nothing about being checked.
What a failure looks like
- failsA `<div>` toggle with no `role="switch"` and no `aria-checked`.
- failsAn icon button with no accessible name.
- failsAn accordion whose header never updates `aria-expanded`.
- failsA custom `<select>` with no `role="combobox"` and no `aria-activedescendant`.
How to fix it
- doUse the native element wherever one exists. `<button>`, `<input type="checkbox">` and `<select>` get all of this for free.
- doFor a genuinely custom widget, follow the ARIA Authoring Practices pattern for it, including keyboard behaviour.
- doKeep state attributes in sync with what is on screen.
How A11ySignal checks it
29 automated checks run against this criterion on every scan.
criticalarea-altActive <area> elements must have alternative text
criticalaria-allowed-attrElements must only use supported ARIA attributes
criticalaria-hidden-bodyaria-hidden="true" must not be present on the document body
criticalaria-required-attrRequired ARIA attributes must be provided
criticalaria-rolesARIA roles used must conform to valid values
criticalaria-valid-attrARIA attributes must conform to valid names
criticalaria-valid-attr-valueARIA attributes must conform to valid values
criticalbutton-nameButtons must have discernible text
criticalduplicate-id-ariaIDs used in ARIA and labels must be unique
criticalinput-button-nameInput buttons must have discernible text
criticalinput-image-altImage buttons must have alternative text
criticallabelForm elements must have labels
criticalselect-nameSelect element must have an accessible name
seriousaria-braille-equivalentaria-braille attributes must have a non-braille equivalent
seriousaria-command-nameARIA commands must have an accessible name
seriousaria-conditional-attrARIA attributes must be used as specified for the element's role
seriousaria-hidden-focusARIA hidden element must not be focusable or contain focusable elements
seriousaria-input-field-nameARIA input fields must have an accessible name
seriousaria-prohibited-attrElements must only use permitted ARIA attributes
seriousaria-roledescriptionaria-roledescription must be on elements with a semantic role
seriousaria-tab-nameARIA tab nodes must have an accessible name
seriousaria-toggle-field-nameARIA toggle fields must have an accessible name
seriousaria-tooltip-nameARIA tooltip nodes must have an accessible name
seriousframe-titleFrames must have an accessible name
seriousframe-title-uniqueFrames must have a unique title attribute
seriouslink-nameLinks must have discernible text
seriousnested-interactiveInteractive controls must not be nested
serioussummary-nameSummary elements must have discernible text
minoraria-deprecated-roleDeprecated ARIA roles must not be used