Connect & Get help from 6000+ developers on our Discord community.
Ask the Community
Ask the Community
Rules repository
A reference of all accessibility rules checked by Accessibility DevTools, including descriptions and WCAG success criteria.
Accessibility DevTools checks your code against a comprehensive set of accessibility rules grouped by platform:
Rules for web
| Rule | Description | WCAG success criteria |
|---|---|---|
anchor-is-valid |
Anchor <a> tags must have a valid, navigable href attribute. |
2.1.1 (A) |
area-alt |
Each <area> element within an image map must have alternative text. |
2.4.4 (A), 4.1.2 (A) |
aria-activedescendant-has-tabindex |
Elements with aria-activedescendant must be focusable. |
4.1.2 (A) |
aria-allowed-attr |
Elements must only use ARIA attributes that are permitted for their ARIA role. | 4.1.2 (A) |
aria-allowed-role |
Elements must not be assigned ARIA roles that are not permitted for that element type. | 4.1.2 (A) |
aria-command-name |
Interactive elements that trigger a command or action must have an accessible name via ARIA attributes. | 4.1.2 (A) |
aria-conditional-attr |
ARIA attributes that are exclusive to specific elements must not be used on other elements. Native browser state must be used for checkboxes instead of aria-checked. |
4.1.2 (A) |
aria-deprecated-role |
Deprecated or abstract ARIA roles must not be used. | 4.1.2 (A) |
aria-dialog-name |
Elements with role="dialog" or role="alertdialog" must have an accessible name that describes their purpose. |
4.1.2 (A) |
aria-input-field-name |
ARIA input fields using roles such as combobox, searchbox, textbox, listbox, slider, or spinbutton must have an accessible name. |
4.1.2 (A) |
aria-meter-name |
Elements with role="meter" must have an accessible name. |
4.1.2 (A) |
aria-progressbar-name |
Elements with role="progressbar" must have an accessible name. |
4.1.2 (A) |
aria-prohibited-attr |
ARIA attributes that are prohibited for a given role or element must not be used. | 4.1.2 (A) |
aria-required-attr |
Elements with ARIA roles must include all attributes required by that role to describe state or properties. | 4.1.2 (A) |
aria-roles |
The role attribute must use a valid, non-abstract ARIA role value. |
4.1.2 (A) |
aria-text |
Elements using role="text" must meet specific requirements for screen readers to announce text correctly. |
4.1.2 (A) |
aria-toggle-field-name |
Toggle elements such as checkboxes, radio buttons, and switches must have a descriptive accessible name. | 4.1.2 (A) |
aria-tooltip-name |
Elements with role="tooltip" must have an accessible name. |
4.1.2 (A) |
aria-treeitem-name |
Elements with role="treeitem" must have an accessible name. |
4.1.2 (A) |
aria-valid-attr |
ARIA attribute names must be valid according to the WAI-ARIA specification. | 4.1.2 (A) |
aria-valid-attr-value |
ARIA attributes must use valid values as defined by the WAI-ARIA specification. | 4.1.2 (A) |
autocomplete-valid |
The autocomplete attribute on form fields must use a valid token, or the name attribute must use a standard autocomplete value. |
1.3.5 (AA) |
button-name |
All <button> elements must have discernible, accessible text. |
4.1.2 (A) |
click-events-have-key-events |
Non-interactive elements with an onClick handler must also have a corresponding keyboard event handler. |
2.1.1 (A) |
definition-list |
<dl> elements must directly contain only properly-ordered <dt> and <dd> groups, <script>, or <template> elements. |
1.3.1 (A) |
empty-heading |
Heading elements must not be empty or have hidden text. | 2.4.6 (AA) |
empty-table-header |
Table header cells (<th>) must have discernible text. |
1.3.1 (A) |
frame-title |
<frame> and <iframe> elements must have accessible names. |
4.1.2 (A) |
html-has-lang |
The <html> element must include a lang attribute. |
3.1.1 (A) |
html-lang-valid |
The lang attribute on the <html> element must use a valid BCP 47 language code. |
3.1.1 (A) |
image-alt |
All <img> elements must have alternative text, or role="none" or role="presentation" for decorative images. |
1.1.1 (A) |
input-button-name |
Input buttons must have an accessible name that describes their purpose. | 4.1.2 (A) |
input-image-alt |
<input type="image"> elements must have alternative text. |
1.1.1 (A), 4.1.2 (A) |
interactive-supports-focus |
Custom interactive elements must be keyboard-accessible. | 2.1.1 (A) |
label |
Every form element must have an associated label. | 1.3.1 (A), 3.3.2 (A) |
label-has-associated-control |
A <label> element must be correctly associated with a form control. |
1.3.1 (A), 3.3.2 (A), 4.1.2 (A) |
link-name |
All links must have an accessible name. | 2.4.4 (A), 4.1.2 (A) |
link-purpose |
Link text must clearly describe the link destination without relying on surrounding context. | 2.4.4 (A) |
list |
List elements (<ul> and <ol>) must only contain <li> elements as direct children. |
1.3.1 (A) |
meaningful-alt-text |
Images must have meaningful alt text that accurately describes the image content. | 1.1.1 (A) |
media-has-caption |
All <audio> and <video> elements must have captions. |
1.2.2 (A), 1.2.3 (A) |
meta-refresh |
Do not use <meta http-equiv="refresh"> with a delay shorter than 72000 seconds (20 hours). |
2.2.1 (A) |
meta-viewport |
The viewport meta tag must not disable user scaling. | 1.4.4 (AA) |
mouse-events-have-key-events |
Mouse hover events must have equivalent keyboard focus events. | 2.1.1 (A) |
nested-interactive |
Interactive controls must not contain child elements that are themselves focusable or interactive. | 1.3.1 (A), 4.1.2 (A) |
no-access-key |
The accessKey prop must not be used on elements. |
Best practice |
no-aria-hidden-on-focusable |
Focusable elements must not have aria-hidden="true". |
4.1.2 (A) |
no-autofocus |
The autoFocus prop must not be used on elements. |
Best practice |
no-distracting-elements |
Deprecated elements such as <marquee> and <blink> must not be used. |
2.2.2 (A) |
no-interactive-element-to-noninteractive-role |
Interactive HTML elements must not be assigned a non-interactive ARIA role. | 4.1.2 (A) |
no-noninteractive-element-interactions |
Non-interactive elements must not have event handlers assigned to them. | 4.1.2 (A) |
no-noninteractive-element-to-interactive-role |
Non-interactive elements must not be given an interactive ARIA role. | 4.1.2 (A) |
no-noninteractive-tabindex |
Non-interactive elements must not be added to the keyboard tab order via tabIndex. |
2.1.1 (A) |
no-redundant-roles |
Elements must not have ARIA roles that duplicate their implicit semantic role. | Best practice |
no-static-element-interactions |
Static elements with event handlers must have an ARIA role that communicates their interactive purpose. | 4.1.2 (A) |
object-alt |
<object> elements that convey information must have alternative text. |
1.1.1 (A) |
presentation-role-conflict |
Elements with role="none" or role="presentation" must not be focusable or carry global ARIA attributes. |
4.1.2 (A) |
role-img-alt |
Elements with role="img" must have an accessible name that describes the visual content. |
1.1.1 (A) |
role-supports-aria-props |
ARIA attributes must be valid and supported for the element’s assigned role. | Best practice |
scope |
The scope attribute must only be used on <th> elements. |
1.3.1 (A), 4.1.1 (A) |
select-name |
<select> elements must have an accessible name. |
4.1.2 (A) |
svg-img-alt |
SVG elements used as images must have accessible names. | 1.1.1 (A) |
tabindex |
The tabindex attribute value must not be greater than 0. |
2.4.3 (A) |
valid-lang |
Language attributes on elements within the page must use valid BCP 47 language codes. | 3.1.2 (AA) |
Rules for app
| Rule | Description | WCAG success criteria |
|---|---|---|
accessible-input-field-label |
Every input field must have a visible, persistent label that is also accessible to assistive technologies. | 1.3.5 (AA), 2.4.6 (AA), 3.3.2 (A) |
button-element-content-label-capitalization |
Accessibility labels for button elements must begin with an uppercase letter so screen readers pronounce them correctly. | 3.1.6 (AAA) |
checkbox-element-content-label |
Checkbox elements must have both a name and a value accessible to screen readers. | 1.3.1 (A), 4.1.2 (A) |
editable-element-content-label |
Editable elements such as text fields must have both a name and a value accessible to screen readers. | 1.3.1 (A), 4.1.2 (A) |
has-valid-accessibility-component-type |
The accessibilityComponentType property value must be a valid component type. |
4.1.2 (A) |
has-valid-accessibility-descriptors |
Touchable components must have appropriate accessibility props to communicate their purpose to assistive technologies. | 4.1.2 (A) |
has-valid-accessibility-role |
The accessibilityRole property value must be a valid role type. |
4.1.2 (A) |
has-valid-accessibility-state |
The accessibilityState property value must be a valid state object. |
4.1.2 (A) |
has-valid-accessibility-traits |
The accessibilityTraits and accessibilityComponentType prop values must be valid. |
4.1.2 (A) |
has-valid-accessibility-value |
The accessibilityValue property value must be a valid value object. |
4.1.2 (A) |
has-valid-important-for-accessibility |
The importantForAccessibility property value must be valid. |
1.3.1 (A), 4.1.2 (A) |
imageview-element-content-label |
Non-decorative ImageView and ImageButton elements must have a meaningful accessibility label. |
1.1.1 (A) |
interactable-element-content-label |
Interactive elements and custom views must have a descriptive accessibility label. | 4.1.2 (A) |
label-in-name |
The accessible name of a UI component must contain the visually presented text label. | 2.5.3 (A) |
no-nested-touchables |
If a view has accessible={true}, it must not contain nested touchable elements. |
4.1.2 (A) |
special-character-element-content-label |
Accessibility labels must not contain special characters, emoji, or glyph characters, as screen readers may misinterpret them. | Best practice |
state-in-content-label |
Accessibility labels must not include redundant state information such as “selected”, “checked”, or “disabled”, as screen readers announce this automatically. | 1.3.1 (A) |
switch-element-content-label |
Switch elements must have both their name and value accessible to screen readers. | 1.3.1 (A), 4.1.2 (A) |
view-type-in-content-label |
Accessibility labels must not include the control type name such as “button” or “switch”, as screen readers announce this automatically. | Best practice |
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!