# `@sa11y/preset-rules` Accessibility preset rule configs for axe - [Usage](#usage) - [Ruleset Mapping](#ruleset-mapping) - [Rules](#rules) ## Usage ```javascript import axe from 'axe-core'; import { base } from '@sa11y/preset-rules'; const a11yResults = await axe.run(base); console.log(a11yResults); ``` ## Ruleset Mapping `@sa11y/preset-rules` provides three pre-configured rule set curated from axe: `base`, `extended` and `full`. - Below is the set of rules from [axe rule descriptions](https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md) and their current mapping to the `base` and `extended` rulesets in `@sa11y/preset-rules`. - `base` contains WCAG 2.1 AA rules available in axe-core. - `extended` contains WCAG AAA rules, experimental rules and non-WCAG best-practice rules. - `full` ruleset consists of all rules that are enabled by default in axe. - The default ruleset used by the sa11y APIs is `base`. - This can be overridden using the `SA11Y_RULESET` process environment variable (set to `base`, `extended`, or `full`). - The `SA11Y_RULESET_PRIORITY` process environment variable can be used to select rules of specified priority in a ruleset (e.g., `P1`, `P2`, `P3`). ### Rules | Rule ID | Description | WCAG SC | WCAG Level | Priority | In Base ruleset | In Extended ruleset | | --------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------- | -------- | --------------- | ------------------- | | [area-alt](https://dequeuniversity.com/rules/axe/4.11/area-alt) | Ensure <area> elements of image maps have alternative text | 4.1.2 | A | P1 | ✅ | ✅ | | [aria-allowed-attr](https://dequeuniversity.com/rules/axe/4.11/aria-allowed-attr) | Ensure an element's role supports its ARIA attributes | 4.1.2 | A | P1 | ✅ | ✅ | | [aria-allowed-role](https://dequeuniversity.com/rules/axe/4.11/aria-allowed-role) | Ensure role attribute has an appropriate value for the element | 4.1.2 | A | P1 | ✅ | ✅ | | [aria-braille-equivalent](https://dequeuniversity.com/rules/axe/4.11/aria-braille-equivalent) | Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent | 4.1.2 | A | P2 | ✅ | ✅ | | [aria-conditional-attr](https://dequeuniversity.com/rules/axe/4.11/aria-conditional-attr) | Ensure ARIA attributes are used as described in the specification of the element's role | 4.1.2 | A | P2 | ✅ | ✅ | | [aria-deprecated-role](https://dequeuniversity.com/rules/axe/4.11/aria-deprecated-role) | Ensure elements do not use deprecated roles | 4.1.2 | A | P3 | ✅ | ✅ | | [aria-command-name](https://dequeuniversity.com/rules/axe/4.11/aria-command-name) | Ensure every ARIA button, link and menuitem has an accessible name | 4.1.2 | A | P1 | ✅ | ✅ | | [aria-dialog-name](https://dequeuniversity.com/rules/axe/4.11/aria-dialog-name) | Ensure every ARIA dialog and alertdialog node has an accessible name | 4.1.2 | A | P1 | ✅ | ✅ | | [aria-hidden-body](https://dequeuniversity.com/rules/axe/4.11/aria-hidden-body) | Ensure aria-hidden="true" is not present on the document body. | 4.1.2 | A | P1 | ✅ | ✅ | | [aria-hidden-focus](https://dequeuniversity.com/rules/axe/4.11/aria-hidden-focus) | Ensure aria-hidden elements are not focusable nor contain focusable elements | 4.1.2 | A | P1 | ✅ | ✅ | | [aria-input-field-name](https://dequeuniversity.com/rules/axe/4.11/aria-input-field-name) | Ensure every ARIA input field has an accessible name | 4.1.2 | A | P1 | ✅ | ✅ | | [aria-meter-name](https://dequeuniversity.com/rules/axe/4.11/aria-meter-name) | Ensure every ARIA meter node has an accessible name | 1.1.1 | A | P1 | ✅ | ✅ | | [aria-progressbar-name](https://dequeuniversity.com/rules/axe/4.11/aria-progressbar-name) | Ensure every ARIA progressbar node has an accessible name | 1.1.1 | A | P1 | ✅ | ✅ | | [aria-prohibited-attr](https://dequeuniversity.com/rules/axe/4.11/aria-prohibited-attr) | Ensure ARIA attributes are not prohibited for an element's role | 4.1.2 | A | P2 | ✅ | ✅ | | [aria-required-attr](https://dequeuniversity.com/rules/axe/4.11/aria-required-attr) | Ensure elements with ARIA roles have all required ARIA attributes | 4.1.2 | A | P1 | ✅ | ✅ | | [aria-required-children](https://dequeuniversity.com/rules/axe/4.11/aria-required-children) | Ensure elements with an ARIA role that require child roles contain them | 1.3.1 | A | P1 | ✅ | ✅ | | [aria-required-parent](https://dequeuniversity.com/rules/axe/4.11/aria-required-parent) | Ensure elements with an ARIA role that require parent roles are contained by them | 1.3.1 | A | P1 | ✅ | ✅ | | [aria-roles](https://dequeuniversity.com/rules/axe/4.11/aria-roles) | Ensure all elements with a role attribute use a valid value | 4.1.2 | A | P1 | ✅ | ✅ | | [aria-toggle-field-name](https://dequeuniversity.com/rules/axe/4.11/aria-toggle-field-name) | Ensure every ARIA toggle field has an accessible name | 4.1.2 | A | P1 | ✅ | ✅ | | [aria-tooltip-name](https://dequeuniversity.com/rules/axe/4.11/aria-tooltip-name) | Ensure every ARIA tooltip node has an accessible name | 4.1.2 | A | P1 | ✅ | ✅ | | [aria-treeitem-name](https://dequeuniversity.com/rules/axe/4.11/aria-treeitem-name) | Ensure every ARIA treeitem node has an accessible name | 4.1.2 | A | P1 | ✅ | ✅ | | [aria-valid-attr](https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr) | Ensure attributes that begin with aria- are valid ARIA attributes | 4.1.2 | A | P1 | ✅ | ✅ | | [aria-valid-attr-value](https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr-value) | Ensure all ARIA attributes have valid values | 4.1.2 | A | P1 | ✅ | ✅ | | [autocomplete-valid](https://dequeuniversity.com/rules/axe/4.11/autocomplete-valid) | Ensure the autocomplete attribute is correct and suitable for the form field | 1.3.5 | AA | P2 | ✅ | ✅ | | [avoid-inline-spacing](https://dequeuniversity.com/rules/axe/4.11/avoid-inline-spacing) | Ensure that text spacing set through style attributes can be adjusted with custom stylesheets | 1.4.12 | AA | P2 | ✅ | ✅ | | [button-name](https://dequeuniversity.com/rules/axe/4.11/button-name) | Ensure buttons have discernible text | 4.1.2 | A | P1 | ✅ | ✅ | | [bypass](https://dequeuniversity.com/rules/axe/4.11/bypass) | Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content | 2.4.1 | A | P3 | ✅ | ✅ | | [color-contrast](https://dequeuniversity.com/rules/axe/4.11/color-contrast) | Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds | 1.4.3 | AA | P1 | ✅ | ✅ | | [definition-list](https://dequeuniversity.com/rules/axe/4.11/definition-list) | Ensure <dl> elements are structured correctly | 1.3.1 | A | P2 | ✅ | ✅ | | [dlitem](https://dequeuniversity.com/rules/axe/4.11/dlitem) | Ensure <dt> and <dd> elements are contained by a <dl> | 1.3.1 | A | P2 | ✅ | ✅ | | [document-title](https://dequeuniversity.com/rules/axe/4.11/document-title) | Ensure each HTML document contains a non-empty <title> element | 2.4.2 | A | P2 | ✅ | ✅ | | [duplicate-id-aria](https://dequeuniversity.com/rules/axe/4.11/duplicate-id-aria) | Ensure every id attribute value used in ARIA and in labels is unique | 4.1.2 | A | P1 | ✅ | ✅ | | [form-field-multiple-labels](https://dequeuniversity.com/rules/axe/4.11/form-field-multiple-labels) | Ensure form field does not have multiple label elements | 3.3.2 | A | P2 | ✅ | ✅ | | [frame-focusable-content](https://dequeuniversity.com/rules/axe/4.11/frame-focusable-content) | Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1 | 2.1.1 | A | P1 | ✅ | ✅ | | [frame-title](https://dequeuniversity.com/rules/axe/4.11/frame-title) | Ensure <iframe> and <frame> elements have an accessible name | 4.1.2 | A | P1 | ✅ | ✅ | | [frame-title-unique](https://dequeuniversity.com/rules/axe/4.11/frame-title-unique) | Ensure <iframe> and <frame> elements contain a unique title attribute | 4.1.2 | A | P3 | ✅ | ✅ | | [html-has-lang](https://dequeuniversity.com/rules/axe/4.11/html-has-lang) | Ensure every HTML document has a lang attribute | 3.1.1 | A | P2 | ✅ | ✅ | | [html-lang-valid](https://dequeuniversity.com/rules/axe/4.11/html-lang-valid) | Ensure the lang attribute of the <html> element has a valid value | 3.1.1 | A | P2 | ✅ | ✅ | | [html-xml-lang-mismatch](https://dequeuniversity.com/rules/axe/4.11/html-xml-lang-mismatch) | Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page | 3.1.1 | A | P2 | ✅ | ✅ | | [image-alt](https://dequeuniversity.com/rules/axe/4.11/image-alt) | Ensure <img> elements have alternative text or a role of none or presentation | 1.1.1 | A | P1 | ✅ | ✅ | | [input-button-name](https://dequeuniversity.com/rules/axe/4.11/input-button-name) | Ensure input buttons have discernible text | 4.1.2 | A | P1 | ✅ | ✅ | | [input-image-alt](https://dequeuniversity.com/rules/axe/4.11/input-image-alt) | Ensure <input type="image"> elements have alternative text | 4.1.2 | A | P1 | ✅ | ✅ | | [label](https://dequeuniversity.com/rules/axe/4.11/label) | Ensure every form element has a label | 4.1.2 | A | P1 | ✅ | ✅ | | [link-in-text-block](https://dequeuniversity.com/rules/axe/4.11/link-in-text-block) | Ensure links are distinguished from surrounding text in a way that does not rely on color | 1.4.1 | A | P2 | ✅ | ✅ | | [link-name](https://dequeuniversity.com/rules/axe/4.11/link-name) | Ensure links have discernible text | 4.1.2 | A | P1 | ✅ | ✅ | | [list](https://dequeuniversity.com/rules/axe/4.11/list) | Ensure that lists are structured correctly | 1.3.1 | A | P2 | ✅ | ✅ | | [listitem](https://dequeuniversity.com/rules/axe/4.11/listitem) | Ensure <li> elements are used semantically | 1.3.1 | A | P2 | ✅ | ✅ | | [marquee](https://dequeuniversity.com/rules/axe/4.11/marquee) | Ensure <marquee> elements are not used | 2.2.2 | A | P1 | ✅ | ✅ | | [meta-refresh](https://dequeuniversity.com/rules/axe/4.11/meta-refresh) | Ensure <meta http-equiv="refresh"> is not used for delayed refresh | 2.2.1 | A | P1 | ✅ | ✅ | | [nested-interactive](https://dequeuniversity.com/rules/axe/4.11/nested-interactive) | Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies | 4.1.2 | A | P1 | ✅ | ✅ | | [no-autoplay-audio](https://dequeuniversity.com/rules/axe/4.11/no-autoplay-audio) | Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio | 1.4.2 | A | P1 | ✅ | ✅ | | [object-alt](https://dequeuniversity.com/rules/axe/4.11/object-alt) | Ensure <object> elements have alternative text | 1.1.1 | A | P1 | ✅ | ✅ | | [presentation-role-conflict](https://dequeuniversity.com/rules/axe/4.11/presentation-role-conflict) | Ensure elements marked as presentational do not have global ARIA or tabindex so that all screen readers ignore them | 4.1.2 | A | P2 | ✅ | ✅ | | [role-img-alt](https://dequeuniversity.com/rules/axe/4.11/role-img-alt) | Ensure [role="img"] elements have alternative text | 1.1.1 | A | P1 | ✅ | ✅ | | [scrollable-region-focusable](https://dequeuniversity.com/rules/axe/4.11/scrollable-region-focusable) | Ensure elements that have scrollable content are accessible by keyboard | 2.1.1 | A | P1 | ✅ | ✅ | | [select-name](https://dequeuniversity.com/rules/axe/4.11/select-name) | Ensure select element has an accessible name | 4.1.2 | A | P1 | ✅ | ✅ | | [server-side-image-map](https://dequeuniversity.com/rules/axe/4.11/server-side-image-map) | Ensure that server-side image maps are not used | 2.1.1 | A | P1 | ✅ | ✅ | | [summary-name](https://dequeuniversity.com/rules/axe/4.11/summary-name) | Ensure summary elements have discernible text | 4.1.2 | A | P1 | ✅ | ✅ | | [svg-img-alt](https://dequeuniversity.com/rules/axe/4.11/svg-img-alt) | Ensure <svg> elements with an img, graphics-document or graphics-symbol role have accessible text | 1.1.1 | A | P1 | ✅ | ✅ | | [target-size](https://dequeuniversity.com/rules/axe/4.11/target-size) | Ensure touch targets have sufficient size and space | 2.5.8 | AA | P2 | ✅ | ✅ | | [td-headers-attr](https://dequeuniversity.com/rules/axe/4.11/td-headers-attr) | Ensure that each cell in a table that uses the headers attribute refers only to other <th> elements in that table | 1.3.1 | A | P1 | ✅ | ✅ | | [th-has-data-cells](https://dequeuniversity.com/rules/axe/4.11/th-has-data-cells) | Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe | 1.3.1 | A | P1 | ✅ | ✅ | | [valid-lang](https://dequeuniversity.com/rules/axe/4.11/valid-lang) | Ensure lang attributes have valid values | 3.1.2 | A | P2 | ✅ | ✅ | | [video-caption](https://dequeuniversity.com/rules/axe/4.11/video-caption) | Ensure <video> elements have captions | 1.2.2 | A | P1 | ✅ | ✅ | | [accesskeys](https://dequeuniversity.com/rules/axe/4.11/accesskeys) | Ensure every accesskey attribute value is unique | 2.1.1 | A | P3 | ✖️ | ✅ | | [aria-text](https://dequeuniversity.com/rules/axe/4.11/aria-text) | Ensure role="text" is used on elements with no focusable descendants | 4.1.2 | A | P3 | ✖️ | ✅ | | [blink](https://dequeuniversity.com/rules/axe/4.11/blink) | Ensure <blink> elements are not used | 2.2.2 | A | P1 | ✖️ | ✅ | | [color-contrast-enhanced](https://dequeuniversity.com/rules/axe/4.11/color-contrast-enhanced) | Ensure the contrast between foreground and background colors meets WCAG 2 AAA enhanced contrast ratio thresholds | 1.4.6 | AAA | P3 | ✖️ | ✅ | | [css-orientation-lock](https://dequeuniversity.com/rules/axe/4.11/css-orientation-lock) | Ensure content is not locked to any specific display orientation, and the content is operable in all display orientations | 1.3.4 | AA | P3 | ✖️ | ✅ | | [empty-heading](https://dequeuniversity.com/rules/axe/4.11/empty-heading) | Ensure headings have discernible text | 1.3.1 | A | P3 | ✖️ | ✅ | | [empty-table-header](https://dequeuniversity.com/rules/axe/4.11/empty-table-header) | Ensure table headers have discernible text | 1.3.1 | A | P3 | ✖️ | ✅ | | [focus-order-semantics](https://dequeuniversity.com/rules/axe/4.11/focus-order-semantics) | Ensure elements in the focus order have a role appropriate for interactive content | | | P3 | ✖️ | ✅ | | [frame-tested](https://dequeuniversity.com/rules/axe/4.11/frame-tested) | Ensure <iframe> and <frame> elements contain the axe-core script | | | P3 | ✖️ | ✅ | | [heading-order](https://dequeuniversity.com/rules/axe/4.11/heading-order) | Ensure the order of headings is semantically correct | 1.3.1 | A | P3 | ✖️ | ✅ | | [hidden-content](https://dequeuniversity.com/rules/axe/4.11/hidden-content) | Inform users about hidden content. | | | P3 | ✖️ | ✅ | | [identical-links-same-purpose](https://dequeuniversity.com/rules/axe/4.11/identical-links-same-purpose) | Ensure that links with the same accessible name serve a similar purpose | 2.4.9 | AAA | P3 | ✖️ | ✅ | | [image-redundant-alt](https://dequeuniversity.com/rules/axe/4.11/image-redundant-alt) | Ensure image alternative is not repeated as text | 1.1.1 | A | P3 | ✖️ | ✅ | | [label-content-name-mismatch](https://dequeuniversity.com/rules/axe/4.11/label-content-name-mismatch) | Ensure that elements labelled through their content must have their visible text as part of their accessible name | 2.5.3 | A | P2 | ✖️ | ✅ | | [label-title-only](https://dequeuniversity.com/rules/axe/4.11/label-title-only) | Ensure that every form element has a visible label and is not solely labeled using hidden labels, or the title or aria-describedby attributes | 3.3.2 | A | P3 | ✖️ | ✅ | | [landmark-banner-is-top-level](https://dequeuniversity.com/rules/axe/4.11/landmark-banner-is-top-level) | Ensure the banner landmark is at top level | 4.1.1 | A | P3 | ✖️ | ✅ | | [landmark-complementary-is-top-level](https://dequeuniversity.com/rules/axe/4.11/landmark-complementary-is-top-level) | Ensure the complementary landmark or aside is at top level | 4.1.1 | A | P3 | ✖️ | ✅ | | [landmark-contentinfo-is-top-level](https://dequeuniversity.com/rules/axe/4.11/landmark-contentinfo-is-top-level) | Ensure the contentinfo landmark is at top level | 4.1.1 | A | P3 | ✖️ | ✅ | | [landmark-main-is-top-level](https://dequeuniversity.com/rules/axe/4.11/landmark-main-is-top-level) | Ensure the main landmark is at top level | 4.1.1 | A | P3 | ✖️ | ✅ | | [landmark-no-duplicate-banner](https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-banner) | Ensure the document has at most one banner landmark | 4.1.1 | A | P3 | ✖️ | ✅ | | [landmark-no-duplicate-contentinfo](https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-contentinfo) | Ensure the document has at most one contentinfo landmark | 4.1.1 | A | P3 | ✖️ | ✅ | | [landmark-no-duplicate-main](https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-main) | Ensure the document has at most one main landmark | 4.1.1 | A | P3 | ✖️ | ✅ | | [landmark-one-main](https://dequeuniversity.com/rules/axe/4.11/landmark-one-main) | Ensure the document has a main landmark | 4.1.1 | A | P3 | ✖️ | ✅ | | [landmark-unique](https://dequeuniversity.com/rules/axe/4.11/landmark-unique) | Ensure landmarks are unique | 4.1.1 | A | P3 | ✖️ | ✅ | | [meta-refresh-no-exceptions](https://dequeuniversity.com/rules/axe/4.11/meta-refresh-no-exceptions) | Ensure <meta http-equiv="refresh"> is not used for delayed refresh | | | P3 | ✖️ | ✅ | | [meta-viewport](https://dequeuniversity.com/rules/axe/4.11/meta-viewport) | Ensure <meta name="viewport"> does not disable text scaling and zooming | 1.4.4 | AA | P2 | ✖️ | ✅ | | [meta-viewport-large](https://dequeuniversity.com/rules/axe/4.11/meta-viewport-large) | Ensure <meta name="viewport"> can scale a significant amount | 1.4.4 | AA | P2 | ✖️ | ✅ | | [page-has-heading-one](https://dequeuniversity.com/rules/axe/4.11/page-has-heading-one) | Ensure that the page, or at least one of its frames contains a level-one heading | 1.3.1 | A | P2 | ✖️ | ✅ | | [p-as-heading](https://dequeuniversity.com/rules/axe/4.11/p-as-heading) | Ensure bold, italic text and font-size is not used to style <p> elements as a heading | 1.3.1 | A | P2 | ✖️ | ✅ | | [region](https://dequeuniversity.com/rules/axe/4.11/region) | Ensure all page content is contained by landmarks | 1.3.1 | | P3 | ✖️ | ✅ | | [scope-attr-valid](https://dequeuniversity.com/rules/axe/4.11/scope-attr-valid) | Ensure the scope attribute is used correctly on tables | 1.3.1 | A | P3 | ✖️ | ✅ | | [skip-link](https://dequeuniversity.com/rules/axe/4.11/skip-link) | Ensure all skip links have a focusable target | 2.4.1 | | P3 | ✖️ | ✅ | | [tabindex](https://dequeuniversity.com/rules/axe/4.11/tabindex) | Ensure tabindex attribute values are not greater than 0 | 2.4.3 | A | P3 | ✖️ | ✅ | | [table-duplicate-name](https://dequeuniversity.com/rules/axe/4.11/table-duplicate-name) | Ensure the <caption> element does not contain the same text as the summary attribute | 1.3.1 | | P3 | ✖️ | ✅ | | [table-fake-caption](https://dequeuniversity.com/rules/axe/4.11/table-fake-caption) | Ensure that tables with a caption use the <caption> element. | | | P3 | ✖️ | ✅ | | [td-has-header](https://dequeuniversity.com/rules/axe/4.11/td-has-header) | Ensure that each non-empty data cell in a <table> larger than 3 by 3 has one or more table headers | 1.3.1 | A | P1 | ✖️ | ✅ | | [aria-roledescription](https://dequeuniversity.com/rules/axe/4.11/aria-roledescription) | Ensure aria-roledescription is only used on elements with an implicit or explicit role | | | P3 | ✖️ | ✅ | | [audio-caption](https://dequeuniversity.com/rules/axe/4.11/audio-caption) | Ensure <audio> elements have captions | | | P3 | ✖️ | ✅ | | [duplicate-id](https://dequeuniversity.com/rules/axe/4.11/duplicate-id) | Ensure every id attribute value is unique | | | P3 | ✖️ | ✅ | | [duplicate-id-active](https://dequeuniversity.com/rules/axe/4.11/duplicate-id-active) | Ensure every id attribute value of active elements is unique | | | P3 | ✖️ | ✅ |