@sa11y/preset-rules

Accessibility preset rule configs for axe

• Usage
• Ruleset Mapping
  • Rules

Usage

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	Ensure <area> elements of image maps have alternative text	1.1.1	A	P1	✅	✅
aria-allowed-attr	Ensure an element's role supports its ARIA attributes	4.1.2	A	P1	✅	✅
aria-allowed-role	Ensure role attribute has an appropriate value for the element	4.1.2	A	P1	✅	✅
aria-command-name	Ensure every ARIA button, link and menuitem has an accessible name	4.1.2	A	P1	✅	✅
aria-dialog-name	Ensure every ARIA dialog and alertdialog node has an accessible name	4.1.2	A	P1	✅	✅
aria-hidden-body	Ensure aria-hidden="true" is not present on the document body.	4.1.2	A	P1	✅	✅
aria-hidden-focus	Ensure aria-hidden elements are not focusable nor contain focusable elements	4.1.2	A	P1	✅	✅
aria-input-field-name	Ensure every ARIA input field has an accessible name	4.1.2	A	P1	✅	✅
aria-meter-name	Ensure every ARIA meter node has an accessible name	4.1.2	A	P1	✅	✅
aria-progressbar-name	Ensure every ARIA progressbar node has an accessible name	4.1.2	A	P1	✅	✅
aria-required-attr	Ensure elements with ARIA roles have all required ARIA attributes	4.1.2	A	P1	✅	✅
aria-required-children	Ensure elements with an ARIA role that require child roles contain them	4.1.2	A	P1	✅	✅
aria-required-parent	Ensure 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	Ensure all elements with a role attribute use a valid value	4.1.2	A	P1	✅	✅
aria-toggle-field-name	Ensure every ARIA toggle field has an accessible name	4.1.2	A	P1	✅	✅
aria-tooltip-name	Ensure every ARIA tooltip node has an accessible name	4.1.2	A	P1	✅	✅
aria-treeitem-name	Ensure every ARIA treeitem node has an accessible name	4.1.2	A	P1	✅	✅
aria-valid-attr	Ensure attributes that begin with aria- are valid ARIA attributes	4.1.2	A	P3	✅	✅
aria-valid-attr-value	Ensure all ARIA attributes have valid values	4.1.2	A	P3	✅	✅
audio-caption	Ensure <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	Ensure <blink> elements are not used	2.2.2	A	P1	✅	✅
button-name	Ensure buttons have discernible text	4.1.2	A	P1	✅	✅
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	Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds	1.4.3	AA	P1	✅	✅
definition-list	Ensure <dl> elements are structured correctly	1.3.1	A	P2	✅	✅
dlitem	Ensure <dt> and <dd> elements are contained by a <dl>	1.3.1	A	P2	✅	✅
document-title	Ensure each HTML document contains a non-empty <title> element	2.4.2	A	P2	✅	✅
duplicate-id	Ensure every id attribute value is unique	4.1.1	A	P3	✅	✅
duplicate-id-active	Ensure every id attribute value of active elements is unique	4.1.1	A	P3	✅	✅
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	Ensure form field does not have multiple label elements	2.5.3	A	P2	✅	✅
frame-focusable-content	Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1	2.1.1	A	P1	✅	✅
frame-title	Ensure <iframe> and <frame> elements have an accessible name	2.4.2	A	P3	✅	✅
html-has-lang	Ensure every HTML document has a lang attribute	3.1.1	A	P2	✅	✅
html-lang-valid	Ensure 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	Ensure <img> elements have alternative text or a role of none or presentation	1.1.1	A	P1	✅	✅
input-button-name	Ensure input buttons have discernible text	4.1.2	A	P1	✅	✅
input-image-alt	Ensure <input type="image"> elements have alternative text	1.1.1	A	P1	✅	✅
label	Ensure every form element has a label	3.3.2	A	P1	✅	✅
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	P1	✅	✅
link-name	Ensure links have discernible text	4.1.2	A	P1	✅	✅
list	Ensure that lists are structured correctly	1.3.1	A	P2	✅	✅
listitem	Ensure <li> elements are used semantically	1.3.1	A	P2	✅	✅
marquee	Ensure <marquee> elements are not used	2.2.2	A	P1	✅	✅
meta-refresh	Ensure <meta http-equiv="refresh"> is not used for delayed refresh	2.2.1	A	P1	✅	✅
meta-viewport	Ensure <meta name="viewport"> does not disable text scaling and zooming	1.4.4	AA	P2	✅	✅
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	✅	✅
object-alt	Ensure <object> elements have alternative 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	Ensure [role="img"] elements have alternative text	1.1.1	A	P1	✅	✅
scope-attr-valid	Ensure 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	Ensure select element has an accessible name	4.1.2	A	P1	✅	✅
server-side-image-map	Ensure that server-side image maps are not used	2.1.1	A	P1	✅	✅
svg-img-alt	Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text	1.1.1	A	P1	✅	✅
tabindex	Ensure 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	Ensure lang attributes have valid values	3.1.1	A	P2	✅	✅
video-caption	Ensure <video> elements have captions	1.2.2	A	P1	✅	✅
accesskeys	Ensure every accesskey attribute value is unique	4.1.1	A	P3	✖️	✅
aria-text	Ensure role="text" is used on elements with no focusable descendants	4.1.1	A	P3	✖️	✅
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	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	Ensure headings have discernible text	1.3.1	A	P2	✖️	✅
empty-table-header	Ensure table headers have discernible text	1.3.1	A	P2	✖️	✅
focus-order-semantics	Ensure elements in the focus order have a role appropriate for interactive content			P3	✖️	✅
frame-tested	Ensure <iframe> and <frame> elements contain the axe-core script			P3	✖️	✅
frame-title-unique	Ensure <iframe> and <frame> elements contain a unique title attribute			P3	✖️	✅
heading-order	Ensure 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	Ensure 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	Ensure the banner landmark is at top level	4.1.1	A	P3	✖️	✅
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	Ensure the contentinfo landmark is at top level	4.1.1	A	P3	✖️	✅
landmark-main-is-top-level	Ensure the main landmark is at top level	4.1.1	A	P3	✖️	✅
landmark-no-duplicate-banner	Ensure the document has at most one banner landmark	4.1.1	A	P3	✖️	✅
landmark-no-duplicate-contentinfo	Ensure the document has at most one contentinfo landmark	4.1.1	A	P3	✖️	✅
landmark-no-duplicate-main	Ensure the document has at most one main landmark	4.1.1	A	P3	✖️	✅
landmark-one-main	Ensure the document has a main landmark	4.1.1	A	P3	✖️	✅
landmark-unique	Ensure landmarks are unique	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	Ensure <meta http-equiv="refresh"> is not used for delayed refresh			P3	✖️	✅
meta-viewport-large	Ensure <meta name="viewport"> can scale a significant amount	1.4.4	AA	P2	✖️	✅
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	✖️	✅
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	Ensure 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 targets 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	Ensure ARIA attributes are used as described in the specification of the element's role			P3	✖️	✅
aria-prohibited-attr	Ensure ARIA attributes are not prohibited for an element's role			P3	✖️	✅
aria-deprecated-role	Ensure elements do not use deprecated roles			P3	✖️	✅

| summary-name | Ensure summary elements have discernible text | | | P3 | ✖️ | ✅ |