@sa11y/preset-rules

Accessibility preset rule configs for axe

Usage no npm install needed!

<script type="module">
  import sa11yPresetRules from 'https://cdn.skypack.dev/@sa11y/preset-rules';
</script>

README

@sa11y/preset-rules

Accessibility preset rule configs for axe

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 environment variable.
  • The SA11Y_RULESET_PRIORITY 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
accesskeys Ensures every accesskey attribute value is unique 4.1.1 A P3 ✅ ✅
area-alt Ensures <area> elements of image maps have alternate text 1.1.1 A P1 ✅ ✅
aria-allowed-attr Ensures ARIA attributes are allowed for an element's role 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 do not 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-text Ensures "role=text" is used on elements with no focusable descendants 4.1.1 A P3 ✅ ✅
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 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 ✅ ✅
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 ✅ ✅
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 ✅ ✅
heading-order Ensures the order of headings is semantically correct 1.3.1 A P2 ✅ ✅
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 ✅ ✅
image-redundant-alt Ensure image alternative is not repeated as text 1.1.1 A P3 ✅ ✅
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 is not solely labeled using the title or aria-describedby attributes 3.3.2 A P1 ✅ ✅
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-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 2.2.1 A P1 ✅ ✅
meta-viewport Ensures <meta name="viewport"> does not disable text scaling and zooming 1.4.4 AA P2 ✅ ✅
meta-viewport-large Ensures <meta name="viewport"> can scale a significant amount 1.4.4 AA P2 ✅ ✅
nested-interactive Nested interactive controls are not announced by screen readers 4.1.2 A P1 ✅ ✅
object-alt Ensures <object> elements have alternate text 1.1.1 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 ✅ ✅
presentation-role-conflict Flags elements whose role is none or presentation and which cause the role conflict resolution to trigger. 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 Elements that have scrollable content must be 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 using the headers refers to another cell in that table 1.3.1 A P1 ✅ ✅
th-has-data-cells Ensure that each table header in a data table refers to data cells 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 ✅ ✅
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 ✖️ ✅
focus-order-semantics Ensures elements in the focus order have an appropriate role 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 ✖️ ✅
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 ✖️ ✅
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 ✖️ ✅
link-in-text-block Links can be distinguished without relying on color 1.4.1 A P1 ✖️ ✅
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 ✖️ ✅
p-as-heading Ensure p elements are not used to style headings 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 that tables do not have the same summary and caption P3 ✖️ ✅
table-fake-caption Ensure that tables with a caption use the <caption> element. P3 ✖️ ✅
td-has-header Ensure that each non-empty data cell in a large table has one or more table headers 1.3.1 A P1 ✖️ ✅