Rules
Every rule maps to one or more WCAG 2.2 success criteria. Rules without a WCAG mapping are tagged as best practices.
| Rule ID | WCAG | Level | Description |
|---|---|---|---|
adaptable/aria-required-children | 1.3.1 | A | Certain ARIA roles require specific child roles to be present. |
adaptable/aria-required-parent | 1.3.1 | A | Certain ARIA roles must be contained within specific parent roles. |
adaptable/autocomplete-valid | 1.3.5 | AA | Autocomplete attribute must use valid values from the HTML specification. |
adaptable/definition-list | 1.3.1 | A | <dl> elements must only contain <dt>, <dd>, <div>, <script>, <template>, or <style>. |
adaptable/dl-children | 1.3.1 | A | <dt> and <dd> elements must be contained in a <dl>. |
adaptable/empty-table-header | 1.3.1 | A | Table header cells should have visible text. |
adaptable/list-children | 1.3.1 | A | <ul> and <ol> must only contain <li>, <script>, <template>, or <style> as direct children. |
adaptable/listitem-parent | 1.3.1 | A | <li> elements must be contained in a <ul>, <ol>, or <menu>. |
adaptable/orientation-lock | 1.3.4 | AA | Page orientation must not be restricted using CSS transforms. |
adaptable/scope-attr-valid | 1.3.1 | A | The scope attribute on table headers must have a valid value. |
adaptable/td-has-header | 1.3.1 | A | Data cells in tables larger than 3x3 should have associated headers. |
adaptable/td-headers-attr | 1.3.1 | A | All cells in a table using headers attribute must reference valid header IDs. |
adaptable/th-has-data-cells | 1.3.1 | A | Table headers should be associated with data cells. |
aria/aria-allowed-attr | 4.1.2 | A | ARIA attributes must be allowed for the element's role. |
aria/aria-allowed-role | 4.1.2 | A | ARIA role must be appropriate for the element. |
aria/aria-hidden-body | 4.1.2 | A | aria-hidden='true' must not be present on the document body. |
aria/aria-hidden-focus | 4.1.2 | A | Elements with aria-hidden='true' must not contain focusable elements. |
aria/aria-prohibited-attr | 4.1.2 | A | ARIA attributes must not be prohibited for the element's role. |
aria/aria-required-attr | 4.1.2 | A | Elements with ARIA roles must have all required ARIA attributes. |
aria/aria-roles | 4.1.2 | A | ARIA role values must be valid. |
aria/aria-valid-attr | 4.1.2 | A | ARIA attributes must be valid (correctly spelled). |
aria/aria-valid-attr-value | 4.1.2 | A | ARIA attributes must have valid values. |
aria/presentation-role-conflict | 4.1.2 | A | Elements with role='presentation' or role='none' must not be focusable or have global ARIA attributes. |
aria/presentational-children-focusable | 4.1.2 | A | Elements with a role that makes children presentational must not contain focusable content. |
distinguishable/color-contrast | 1.4.3 | AA | Text elements must have sufficient color contrast against the background. |
distinguishable/color-contrast-enhanced | 1.4.6 | AAA | Text elements must have enhanced color contrast against the background (WCAG AAA). |
distinguishable/letter-spacing | 1.4.12 | AA | Letter spacing set with !important in style attributes must be at least 0.12em. |
distinguishable/line-height | 1.4.12 | AA | Line height set with !important in style attributes must be at least 1.5. |
distinguishable/link-in-text-block | 1.4.1 | A | Links within text blocks must be distinguishable by more than color alone. |
distinguishable/meta-viewport | 1.4.4 | AA | Viewport meta tag must not disable user scaling. |
distinguishable/word-spacing | 1.4.12 | AA | Word spacing set with !important in style attributes must be at least 0.16em. |
enough-time/blink | 2.2.2 | A | The <blink> element must not be used. |
enough-time/marquee | 2.2.2 | A | The <marquee> element must not be used. |
enough-time/meta-refresh | 2.2.1 | A | Meta refresh must not redirect or refresh automatically. |
enough-time/meta-refresh-no-exception | 2.2.1 | A | Meta refresh must not be used with a delay (no exceptions). |
input-assistance/accessible-authentication | 3.3.8 | AA | Password inputs must not block password managers. Avoid autocomplete="off" and allow pasting. |
keyboard-accessible/accesskeys | Best practice | A | Accesskey attribute values must be unique. |
keyboard-accessible/focus-order | Best practice | A | Non-interactive elements with tabindex='0' must have an interactive ARIA role so assistive technologies can convey their purpose. |
keyboard-accessible/focus-visible | 2.4.7 | AA | Elements in sequential focus order must have a visible focus indicator. |
keyboard-accessible/nested-interactive | 4.1.2 | A | Interactive controls must not be nested inside each other. |
keyboard-accessible/scrollable-region | 2.1.1 | A | Scrollable regions must be keyboard accessible. |
keyboard-accessible/server-image-map | 2.1.1 | A | Server-side image maps must not be used. |
keyboard-accessible/tabindex | Best practice | A | Elements should not have tabindex greater than 0, which disrupts natural tab order. |
labels-and-names/aria-command-name | 4.1.2 | A | ARIA commands must have an accessible name. |
labels-and-names/aria-dialog-name | 4.1.2 | A | ARIA dialogs must have an accessible name. |
labels-and-names/aria-input-field-name | 4.1.2 | A | ARIA input fields must have an accessible name. |
labels-and-names/aria-meter-name | 4.1.2 | A | ARIA meter elements must have an accessible name. |
labels-and-names/aria-progressbar-name | 4.1.2 | A | ARIA progressbar elements must have an accessible name. |
labels-and-names/aria-toggle-field-name | 4.1.2 | A | ARIA toggle fields must have an accessible name. |
labels-and-names/aria-tooltip-name | 4.1.2 | A | ARIA tooltips must have an accessible name. |
labels-and-names/aria-treeitem-name | 4.1.2 | A | ARIA treeitem elements must have an accessible name. |
labels-and-names/button-name | 4.1.2 | A | Buttons must have discernible text. |
labels-and-names/duplicate-id-aria | 4.1.2 | A | IDs used in ARIA and label associations must be unique to avoid broken references. |
labels-and-names/form-label | 4.1.2 | A | Form elements must have labels. Use <label>, aria-label, or aria-labelledby. |
labels-and-names/frame-focusable-content | 2.1.1 | A | Iframes with interactive content must not be excluded from the tab order. |
labels-and-names/frame-title | 4.1.2 | A | Frames must have an accessible name. |
labels-and-names/frame-title-unique | 4.1.2 | A | Frame titles should be unique. |
labels-and-names/input-button-name | 4.1.2 | A | Input buttons must have discernible text via value, aria-label, or aria-labelledby. |
labels-and-names/label-content-mismatch | 2.5.3 | A | Interactive elements with visible text must have accessible names that contain that text. |
labels-and-names/label-placeholder-only | 3.3.2 | A | Form elements should not use placeholder attribute as the only accessible name. |
labels-and-names/label-title-only | 4.1.2 | A | Form elements should not use title attribute as the only accessible name. |
labels-and-names/multiple-labels | 4.1.2 | A | Form fields should not have multiple label elements. |
labels-and-names/summary-name | 4.1.2 | A | <summary> elements must have an accessible name. |
landmarks/banner-is-top-level | Best practice | A | Banner landmark should not be nested within another landmark. |
landmarks/complementary-is-top-level | Best practice | A | Aside (complementary) landmark should be top-level or directly inside main. |
landmarks/contentinfo-is-top-level | Best practice | A | Contentinfo landmark should not be nested within another landmark. |
landmarks/landmark-main | Best practice | A | Page should have exactly one main landmark. |
landmarks/landmark-unique | Best practice | A | Landmarks should have unique labels when there are multiple of the same type. |
landmarks/main-is-top-level | Best practice | A | Main landmark should not be nested within another landmark. |
landmarks/no-duplicate-banner | Best practice | A | Page should not have more than one banner landmark. |
landmarks/no-duplicate-contentinfo | Best practice | A | Page should not have more than one contentinfo landmark. |
landmarks/no-duplicate-main | Best practice | A | Page should not have more than one main landmark. |
landmarks/region | Best practice | A | All page content should be contained within landmarks. |
navigable/bypass | 2.4.1 | A | Page must have a mechanism to bypass repeated blocks of content. |
navigable/document-title | 2.4.2 | A | Documents must have a <title> element to provide users with an overview of content. |
navigable/empty-heading | 2.4.6 | A | Headings must have discernible text. |
navigable/heading-order | Best practice | A | Heading levels should increase by one; skipping levels (e.g. h2 to h4) makes navigation harder. |
navigable/link-name | 2.4.4, 4.1.2 | A | Links must have discernible text via content, aria-label, or aria-labelledby. |
navigable/p-as-heading | 1.3.1 | A | Paragraphs should not be styled to look like headings. |
navigable/page-has-heading-one | Best practice | A | Page should contain a level-one heading. |
navigable/skip-link | 2.4.1 | A | Skip links must point to a valid target on the page. |
readable/html-has-lang | 3.1.1 | A | The <html> element must have a lang attribute. |
readable/html-lang-valid | 3.1.1 | A | The lang attribute on <html> must have a valid value. |
readable/html-xml-lang-mismatch | 3.1.1 | A | The lang and xml:lang attributes on <html> must match. |
readable/valid-lang | 3.1.2 | AA | The lang attribute must have a valid value on all elements. |
text-alternatives/area-alt | 1.1.1, 4.1.2 | A | Image map <area> elements must have alternative text. |
text-alternatives/image-alt-words | 1.1.1 | A | Image alt text should not start with words like 'image of', 'photo of', or 'picture of' — screen readers already announce the element type. |
text-alternatives/image-redundant-alt | 1.1.1 | A | Image alt text should not duplicate adjacent link or button text. When alt text repeats surrounding text, screen reader users hear the same information twice. |
text-alternatives/img-alt | 1.1.1 | A | Images must have alternate text. Add an alt attribute to <img> elements. Decorative images may use an empty alt attribute (alt=""), role='none', or role='presentation'. |
text-alternatives/input-image-alt | 1.1.1, 4.1.2 | A | Image inputs (<input type="image">) must have alternate text describing the button action. |
text-alternatives/object-alt | 1.1.1 | A | <object> elements must have alternative text. |
text-alternatives/role-img-alt | 1.1.1 | A | Elements with role='img' must have an accessible name. |
text-alternatives/svg-img-alt | 1.1.1 | A | SVG elements with an img, graphics-document, or graphics-symbol role must have an accessible name via a <title> element, aria-label, or aria-labelledby. |
time-based-media/audio-transcript | 1.2.1 | A | Audio elements should have a text alternative or transcript. |
time-based-media/video-captions | 1.2.2 | A | Video elements must have captions via <track kind='captions'> or <track kind='subtitles'>. |
95 rules