@sa11y/preset-rules
Accessibility preset rule configs for axe
-
RulesUsage
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 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.
- The
SA11Y_RULESET_PRIORITY process environment variable can be used to select rules of specified priority in a ruleset.
Rules
| Rule ID | Description | WCAG SC | WCAG Level | Priority | In Base ruleset | In Extended ruleset |
| -------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------- | -------- | --------------- | ------------------- |
|
area-alt | Ensures <area> elements of image maps have alternate text | 1.1.1 | A | P1 | ✅ | ✅ |
|
aria-allowed-attr | Ensures an element's role supports its ARIA attributes | 4.1.2 | A | P1 | ✅ | ✅ |
|
aria-allowed-role | Ensures role attribute has an appropriate value for the element | 4.1.2 | A | P1 | ✅ | ✅ |
|
aria-command-name | Ensures every ARIA button, link and menuitem has an accessible name | 4.1.2 | A | P1 | ✅ | ✅ |
|
aria-dialog-name | Ensures every ARIA dialog and alertdialog node has an accessible name | 4.1.2 | A | P1 | ✅ | ✅ |
|
aria-hidden-body | Ensures aria-hidden="true" is not present on the document body. | 4.1.2 | A | P1 | ✅ | ✅ |
|
aria-hidden-focus | Ensures aria-hidden elements are not focusable nor contain focusable elements | 4.1.2 | A | P1 | ✅ | ✅ |
|
aria-input-field-name | Ensures every ARIA input field has an accessible name | 4.1.2 | A | P1 | ✅ | ✅ |
|
aria-meter-name | Ensures every ARIA meter node has an accessible name | 4.1.2 | A | P1 | ✅ | ✅ |
|
aria-progressbar-name | Ensures every ARIA progressbar node has an accessible name | 4.1.2 | A | P1 | ✅ | ✅ |
|
aria-required-attr | Ensures elements with ARIA roles have all required ARIA attributes | 4.1.2 | A | P1 | ✅ | ✅ |
|
aria-required-children | Ensures elements with an ARIA role that require child roles contain them | 4.1.2 | A | P1 | ✅ | ✅ |
|
aria-required-parent | Ensures elements with an ARIA role that require parent roles are contained by them | 4.1.2 | A | P1 | ✅ | ✅ |
|
aria-roledescription | Ensure aria-roledescription is only used on elements with an implicit or explicit role | 4.1.2 | A | P3 | ✅ | ✅ |
|
aria-roles | Ensures all elements with a role attribute use a valid value | 4.1.2 | A | P1 | ✅ | ✅ |
|
aria-toggle-field-name | Ensures every ARIA toggle field has an accessible name | 4.1.2 | A | P1 | ✅ | ✅ |
|
aria-tooltip-name | Ensures every ARIA tooltip node has an accessible name | 4.1.2 | A | P1 | ✅ | ✅ |
|
aria-treeitem-name | Ensures every ARIA treeitem node has an accessible name | 4.1.2 | A | P1 | ✅ | ✅ |
|
aria-valid-attr | Ensures attributes that begin with aria- are valid ARIA attributes | 4.1.2 | A | P3 | ✅ | ✅ |
|
aria-valid-attr-value | Ensures all ARIA attributes have valid values | 4.1.2 | A | P3 | ✅ | ✅ |
|
audio-caption | Ensures <audio> elements have captions | 1.2.2 | A | P1 | ✅ | ✅ |
|
autocomplete-valid | Ensure the autocomplete attribute is correct and suitable for the form field | 1.3.5 | AA | P2 | ✅ | ✅ |
|
avoid-inline-spacing | Ensure that text spacing set through style attributes can be adjusted with custom stylesheets | 1.4.12 | AA | P3 | ✅ | ✅ |
|
blink | Ensures <blink> elements are not used | 2.2.2 | A | P1 | ✅ | ✅ |
|
button-name | Ensures buttons have discernible text | 4.1.2 | A | P1 | ✅ | ✅ |
|
bypass | Ensures 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 | Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds | 1.4.3 | AA | P1 | ✅ | ✅ |
|
definition-list | Ensures <dl> elements are structured correctly | 1.3.1 | A | P2 | ✅ | ✅ |
|
dlitem | Ensures <dt> and <dd> elements are contained by a <dl> | 1.3.1 | A | P2 | ✅ | ✅ |
|
document-title | Ensures each HTML document contains a non-empty <title> element | 2.4.2 | A | P2 | ✅ | ✅ |
|
duplicate-id | Ensures every id attribute value is unique | 4.1.1 | A | P3 | ✅ | ✅ |
|
duplicate-id-active | Ensures every id attribute value of active elements is unique | 4.1.1 | A | P3 | ✅ | ✅ |
|
duplicate-id-aria | Ensures every id attribute value used in ARIA and in labels is unique | 4.1.2 | A | P1 | ✅ | ✅ |
|
form-field-multiple-labels | Ensures form field does not have multiple label elements | 2.5.3 | A | P2 | ✅ | ✅ |
|
frame-focusable-content | Ensures <frame> and <iframe> elements with focusable content do not have tabindex=-1 | 2.1.1 | A | P1 | ✅ | ✅ |
|
frame-title | Ensures <iframe> and <frame> elements have an accessible name | 2.4.2 | A | P3 | ✅ | ✅ |
|
html-has-lang | Ensures every HTML document has a lang attribute | 3.1.1 | A | P2 | ✅ | ✅ |
|
html-lang-valid | Ensures the lang attribute of the <html> element has a valid value | 3.1.1 | A | P2 | ✅ | ✅ |
|
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 | Ensures <img> elements have alternate text or a role of none or presentation | 1.1.1 | A | P1 | ✅ | ✅ |
|
input-button-name | Ensures input buttons have discernible text | 4.1.2 | A | P1 | ✅ | ✅ |
|
input-image-alt | Ensures <input type="image"> elements have alternate text | 1.1.1 | A | P1 | ✅ | ✅ |
|
label | Ensures every form element has a label | 3.3.2 | A | P1 | ✅ | ✅ |
|
label-title-only | Ensures 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 | P1 | ✅ | ✅ |
|
link-name | Ensures links have discernible text | 4.1.2 | A | P1 | ✅ | ✅ |
|
list | Ensures that lists are structured correctly | 1.3.1 | A | P2 | ✅ | ✅ |
|
listitem | Ensures <li> elements are used semantically | 1.3.1 | A | P2 | ✅ | ✅ |
|
marquee | Ensures <marquee> elements are not used | 2.2.2 | A | P1 | ✅ | ✅ |
|
meta-refresh | Ensures <meta http-equiv="refresh"> is not used for delayed refresh | 2.2.1 | A | P1 | ✅ | ✅ |
|
meta-viewport | Ensures <meta name="viewport"> does not disable text scaling and zooming | 1.4.4 | AA | P2 | ✅ | ✅ |
|
nested-interactive | Ensures 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 | ✅ | ✅ |
|
object-alt | Ensures <object> elements have alternate text | 1.1.1 | A | P1 | ✅ | ✅ |
|
presentation-role-conflict | Elements marked as presentational should not have global ARIA or tabindex to ensure all screen readers ignore them | 4.1.1 | A | P3 | ✅ | ✅ |
|
role-img-alt | Ensures
role="img" elements have alternate text | 1.1.1 | A | P1 | ✅ | ✅ |
|
scope-attr-valid | Ensures the scope attribute is used correctly on tables | 1.3.1 | A | P1 | ✅ | ✅ |
|
scrollable-region-focusable | Ensure elements that have scrollable content are accessible by keyboard | 2.1.1 | A | P1 | ✅ | ✅ |
|
select-name | Ensures select element has an accessible name | 4.1.2 | A | P1 | ✅ | ✅ |
|
server-side-image-map | Ensures that server-side image maps are not used | 2.1.1 | A | P1 | ✅ | ✅ |
|
svg-img-alt | Ensures <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text | 1.1.1 | A | P1 | ✅ | ✅ |
|
tabindex | Ensures tabindex attribute values are not greater than 0 | 2.4.3 | A | P2 | ✅ | ✅ |
|
td-headers-attr | Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table | 1.3.1 | A | P1 | ✅ | ✅ |
|
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 | Ensures lang attributes have valid values | 3.1.1 | A | P2 | ✅ | ✅ |
|
video-caption | Ensures <video> elements have captions | 1.2.2 | A | P1 | ✅ | ✅ |
|
accesskeys | Ensures every accesskey attribute value is unique | 4.1.1 | A | P3 | ✖️ | ✅ |
|
aria-text | Ensures role="text" is used on elements with no focusable descendants | 4.1.1 | A | P3 | ✖️ | ✅ |
|
color-contrast-enhanced | Ensures the contrast between foreground and background colors meets WCAG 2 AAA enhanced contrast ratio thresholds | 1.4.6 | AAA | P3 | ✖️ | ✅ |
|
css-orientation-lock | Ensures 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 | Ensures headings have discernible text | 1.3.1 | A | P2 | ✖️ | ✅ |
|
empty-table-header | Ensures table headers have discernible text | 1.3.1 | A | P2 | ✖️ | ✅ |
|
focus-order-semantics | Ensures elements in the focus order have a role appropriate for interactive content | | | P3 | ✖️ | ✅ |
|
frame-tested | Ensures <iframe> and <frame> elements contain the axe-core script | | | P3 | ✖️ | ✅ |
|
frame-title-unique | Ensures <iframe> and <frame> elements contain a unique title attribute | | | P3 | ✖️ | ✅ |
|
heading-order | Ensures the order of headings is semantically correct | 1.3.1 | A | P2 | ✖️ | ✅ |
|
hidden-content | Informs users about hidden content. | | | P3 | ✖️ | ✅ |
|
identical-links-same-purpose | Ensure that links with the same accessible name serve a similar purpose | 2.4.9 | AAA | P3 | ✖️ | ✅ |
|
image-redundant-alt | Ensure image alternative is not repeated as text | 1.1.1 | A | P3 | ✖️ | ✅ |
|
label-content-name-mismatch | Ensures that elements labelled through their content must have their visible text as part of their accessible name | 2.5.3 | A | P2 | ✖️ | ✅ |
|
landmark-banner-is-top-level | Ensures the banner landmark is at top level | 4.1.1 | A | P3 | ✖️ | ✅ |
|
landmark-complementary-is-top-level | Ensures the complementary landmark or aside is at top level | 4.1.1 | A | P3 | ✖️ | ✅ |
|
landmark-contentinfo-is-top-level | Ensures the contentinfo landmark is at top level | 4.1.1 | A | P3 | ✖️ | ✅ |
|
landmark-main-is-top-level | Ensures the main landmark is at top level | 4.1.1 | A | P3 | ✖️ | ✅ |
|
landmark-no-duplicate-banner | Ensures the document has at most one banner landmark | 4.1.1 | A | P3 | ✖️ | ✅ |
|
landmark-no-duplicate-contentinfo | Ensures the document has at most one contentinfo landmark | 4.1.1 | A | P3 | ✖️ | ✅ |
|
landmark-no-duplicate-main | Ensures the document has at most one main landmark | 4.1.1 | A | P3 | ✖️ | ✅ |
|
landmark-one-main | Ensures the document has a main landmark | 4.1.1 | A | P3 | ✖️ | ✅ |
|
landmark-unique | Landmarks should have a unique role or role/label/title (i.e. accessible name) combination | 4.1.1 | A | P3 | ✖️ | ✅ |
|
link-in-text-block | Ensure links are distinguished from surrounding text in a way that does not rely on color | 1.4.1 | A | P1 | ✖️ | ✅ |
|
meta-refresh-no-exceptions | Ensures <meta http-equiv="refresh"> is not used for delayed refresh | | | P3 | ✖️ | ✅ |
|
meta-viewport-large | Ensures <meta name="viewport"> can scale a significant amount | 1.4.4 | AA | P2 | ✖️ | ✅ |
|
no-autoplay-audio | Ensures <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 | ✖️ | ✅ |
|
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 | Ensure bold, italic text and font-size is not used to style <p> elements as a heading | 1.3.1 | A | P2 | ✖️ | ✅ |
|
region | Ensures all page content is contained by landmarks | | | P3 | ✖️ | ✅ |
|
skip-link | Ensure all skip links have a focusable target | | | P3 | ✖️ | ✅ |
|
table-duplicate-name | Ensure the <caption> element does not contain the same text as the summary attribute | | | P3 | ✖️ | ✅ |
|
table-fake-caption | Ensure that tables with a caption use the <caption> element. | | | P3 | ✖️ | ✅ |
|
target-size | Ensure touch target have sufficient size and space | 2.5.5 | AAA | P3 | ✖️ | ✅ |
|
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-braille-equivalent | Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent | | | P3 | ✖️ | ✅ |
|
aria-conditional-attr | Ensures ARIA attributes are used as described in the specification of the element's role | | | P3 | ✖️ | ✅ |
|
aria-prohibited-attr | Ensures ARIA attributes are not prohibited for an element's role | | | P3 | ✖️ | ✅ |
|
aria-deprecated-role | Ensures elements do not use deprecated roles | | | P3 | ✖️ | ✅ |
