Discover the comprehensive guide to implementing WAI-ARIA for web accessibility. Improve user experience and inclusivity on your website with practical tips and best practices.
Description An interactive component of a graphical user interface (GUI). Widgets are discrete user interface objects with which the user can interact. Widget roles map to standard features in accessibility APIs. When the user navigates an element assigned any of the non-abstract subclass roles of widget, assistive technologies that typically intercept standard keyboard events SHOULD…
Description A browser or application window. Elements with this role have a window-like behavior in a graphical user interface (GUI) context, regardless of whether they are implemented as a native window in the operating system, or merely as a section of the document styled to look like a window. Note: In the description of this role,…
Description Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. The default value of aria-busy is false for all elements. When aria-busy is true for an element, assistive technologies MAY ignore changes to content owned by that element and…
Description Indicates the current “checked” state of checkboxes, radio buttons, and other widgets. See related aria-pressed and aria-selected. The aria-checked attribute indicates whether the element is checked (true), unchecked (false), or represents a group of other elements that have a mixture of checked and unchecked values (mixed). Most inputs only support values of true and…
Description Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. See related aria-hidden and aria-readonly. For example, irrelevant options in a radio group may be disabled. Disabled elements might not receive focus from the tab order. For some disabled elements, applications might choose not to support navigation to…
Description Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. For example, this indicates whether a portion of a tree is expanded or collapsed. In other instances, this may be applied to page sections to mark expandable and collapsible regions that are flexible for managing content density. Simplifying the…
