Goal
Ensure that all user interface components (widgets, controls, and content) are programmatically accessible, so assistive technologies (like screen readers) can correctly identify:
-
Name – The label or identifier of the element
-
Role – What the element is (button, checkbox, slider, etc.)
-
Value – The current state or content (checked, selected, text input, etc.)
Key Points
- Supports screen reader users, keyboard-only users, and other assistive technologies.
- Applies to all interactive components, including:
- Buttons, links, and checkboxes
- Sliders, dropdowns, tabs, menus
- Custom widgets built with JavaScript frameworks
- Must update dynamic content so assistive tech always receives current information.
- Programmatic information is exposed via ARIA attributes when native HTML is insufficient.
Short Summary
All interactive elements must provide a clear name, role, and value programmatically so assistive technologies can communicate them to users accurately.
Example Issue and Fix
Custom toggle button without ARIA
Quick Checklist
- Every interactive element has a programmatic name (
aria-label, text content, or<label>) - Role is correctly identified (
<button>,<checkbox>, orroleattribute) - Value/state is programmatically exposed (
aria-checked,aria-selected,aria-valuenow) - Dynamic changes update ARIA attributes in real time
- Elements are keyboard operable
- Avoid inline JS for CSP compliance — use
x-dataandx-initin Alpine.js