Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@sa11y/preset-rules
Advanced tools
@sa11y/preset-rules
Accessibility preset rule configs for axe
import axe from 'axe-core';
import { base } from '@sa11y/preset-rules';
const a11yResults = await axe.run(base);
console.log(a11yResults);
@sa11y/preset-rules
provides three pre-configured rule set curated from axe: base
, extended
and full
.
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.base
.
SA11Y_RULESET
environment variable.SA11Y_RULESET_PRIORITY
environment variable can be used to select rules of specified priority in a ruleset.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 | ✖️ | ✅ |
FAQs
Accessibility preset rule configs for axe
We found that @sa11y/preset-rules demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.