Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@sa11y/preset-rules

Package Overview
Dependencies
Maintainers
1
Versions
82
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@sa11y/preset-rules

Accessibility preset rule configs for axe

  • 0.1.3-alpha
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
9.2K
decreased by-20.41%
Maintainers
1
Weekly downloads
 
Created
Source

@sa11y/preset-rules

Accessibility preset rule configs for axe

  • Usage
  • Ruleset Mapping

Usage

import axe from 'axe-core';
import { extended } from '@sa11y/preset-rules';

const a11yResults = await axe.run(extended);
console.log(a11yResults);

Ruleset Mapping

@sa11y/preset-rules provides two pre-configured rulesets curated from axe: Recommended and Extended.

Below is the full set of rules from axe's rule descriptions and their current mapping to the Recommended and Extended rulesets in @sa11y/preset-rules.

WCAG 2.0 Level A & AA Rules

Rule IDDescriptionImpactIssue TypeIn Recommended RulesetIn Extended RulesetNotes
area-altEnsures <area> elements of image maps have alternate textCriticalfailure:heavy_check_mark::heavy_check_mark:
aria-allowed-attrEnsures ARIA attributes are allowed for an element's roleCriticalfailure:heavy_check_mark::heavy_check_mark:
aria-hidden-bodyEnsures aria-hidden='true' is not present on the document body.Criticalfailure:heavy_check_mark::heavy_check_mark:
aria-hidden-focusEnsures aria-hidden elements do not contain focusable elementsSeriousfailure, needs review:heavy_check_mark::heavy_check_mark:
aria-input-field-nameEnsures every ARIA input field has an accessible nameModerate, Seriousfailure, needs review:heavy_check_mark::heavy_check_mark:
aria-required-attrEnsures elements with ARIA roles have all required ARIA attributesCriticalfailure:heavy_check_mark::heavy_check_mark:
aria-required-childrenEnsures elements with an ARIA role that require child roles contain themCriticalfailure, needs review:heavy_check_mark::heavy_check_mark:
aria-required-parentEnsures elements with an ARIA role that require parent roles are contained by themCriticalfailure:heavy_check_mark::heavy_check_mark:
aria-roledescriptionEnsure aria-roledescription is only used on elements with an implicit or explicit roleSeriousfailure, needs review:heavy_check_mark::heavy_check_mark:
aria-rolesEnsures all elements with a role attribute use a valid valueSerious, Criticalfailure:heavy_check_mark::heavy_check_mark:
aria-toggle-field-nameEnsures every ARIA toggle field has an accessible nameModerate, Seriousfailure, needs review:heavy_check_mark::heavy_check_mark:
aria-valid-attr-valueEnsures all ARIA attributes have valid valuesCriticalfailure, needs review:heavy_check_mark::heavy_check_mark:
aria-valid-attrEnsures attributes that begin with aria- are valid ARIA attributesCriticalfailure:heavy_check_mark::heavy_check_mark:
audio-captionEnsures <audio> elements have captionsCriticalneeds review:heavy_check_mark::heavy_check_mark:
blinkEnsures <blink> elements are not usedSeriousfailure:heavy_check_mark::heavy_check_mark:
button-nameEnsures buttons have discernible textCriticalfailure:heavy_check_mark::heavy_check_mark:
bypassEnsures each page has at least one mechanism for a user to bypass navigation and jump straight to the contentSeriousfailure:heavy_check_mark::heavy_check_mark:
color-contrastEnsures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholdsSeriousfailure, needs review:heavy_check_mark::heavy_check_mark:
dlitemEnsures <dt> and <dd> elements are contained by a <dl>Seriousfailure:heavy_check_mark::heavy_check_mark:
document-titleEnsures each HTML document contains a non-empty <title> elementSeriousfailure:heavy_check_mark::heavy_check_mark:
duplicate-id-activeEnsures every id attribute value of active elements is uniqueSeriousfailure:heavy_check_mark::heavy_check_mark:
duplicate-id-ariaEnsures every id attribute value used in ARIA and in labels is uniqueCriticalfailure:heavy_check_mark::heavy_check_mark:
duplicate-idEnsures every id attribute value is uniqueMinorfailure:heavy_check_mark::heavy_check_mark:
form-field-multiple-labelsEnsures form field does not have multiple label elementsModerateneeds review:heavy_check_mark::heavy_check_mark:
frame-titleEnsures <iframe> and <frame> elements contain a non-empty title attributeSeriousfailure:heavy_check_mark::heavy_check_mark:
html-has-langEnsures every HTML document has a lang attributeSeriousfailure:heavy_check_mark::heavy_check_mark:
html-lang-validEnsures the lang attribute of the <html> element has a valid valueSeriousfailure:heavy_check_mark::heavy_check_mark:
html-xml-lang-mismatchEnsure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the pageModeratefailure:heavy_check_mark::heavy_check_mark:
image-altEnsures <img> elements have alternate text or a role of none or presentationCriticalfailure:heavy_check_mark::heavy_check_mark:
input-button-nameEnsures input buttons have discernible textCriticalfailure:heavy_check_mark::heavy_check_mark:
input-image-altEnsures <input type="image"> elements have alternate textCriticalfailure:heavy_check_mark::heavy_check_mark:
labelEnsures every form element has a labelMinor, Criticalfailure:heavy_check_mark::heavy_check_mark:
link-nameEnsures links have discernible textSeriousfailure:heavy_check_mark::heavy_check_mark:
listEnsures that lists are structured correctlySeriousfailure:heavy_check_mark::heavy_check_mark:
listitemEnsures <li> elements are used semanticallySeriousfailure:heavy_check_mark::heavy_check_mark:
marqueeEnsures <marquee> elements are not usedSeriousfailure:heavy_check_mark::heavy_check_mark:
meta-refreshEnsures <meta http-equiv="refresh"> is not usedCriticalfailure:heavy_check_mark::heavy_check_mark:
object-altEnsures <object> elements have alternate textSeriousfailure:x::heavy_check_mark:<obj> rarely used
role-img-altEnsures [role='img'] elements have alternate textSeriousfailure:heavy_check_mark::heavy_check_mark:
scrollable-region-focusableElements that have scrollable content should be accessible by keyboardModeratefailure:heavy_check_mark::heavy_check_mark:
server-side-image-mapEnsures that server-side image maps are not usedMinorneeds review:heavy_check_mark::heavy_check_mark:
svg-img-altEnsures svg elements with an img, graphics-document or graphics-symbol role have an accessible textSeriousfailure:heavy_check_mark::heavy_check_mark:
td-headers-attrEnsure that each cell in a table using the headers refers to another cell in that tableSeriousfailure, needs review:heavy_check_mark::heavy_check_mark:
th-has-data-cellsEnsure that each table header in a data table refers to data cellsSeriousfailure, needs review:heavy_check_mark::heavy_check_mark:
valid-langEnsures lang attributes have valid valuesSeriousfailure:heavy_check_mark::heavy_check_mark:
video-captionEnsures <video> elements have captionsCriticalneeds review:heavy_check_mark::heavy_check_mark:

WCAG 2.1 Level A & AA Rules

Rule IDDescriptionImpactIssue TypeIn Recommended RulesetIn Extended RulesetNotes
autocomplete-validEnsure the autocomplete attribute is correct and suitable for the form fieldSeriousfailure:heavy_check_mark::heavy_check_mark:
avoid-inline-spacingEnsure that text spacing set through style attributes can be adjusted with custom stylesheetsSeriousfailure:x::heavy_check_mark:TBD on how widespread this issue is

Best Practices Rules

Rules that do not necessarily conform to WCAG success criterion but are industry accepted practices that improve the user experience.

Rule IDDescriptionImpactIssue TypeIn Recommended RulesetIn Extended RulesetNotes
accesskeysEnsures every accesskey attribute value is uniqueSeriousfailure:x::heavy_check_mark:Rarely applicable
aria-allowed-roleEnsures role attribute has an appropriate value for the elementMinorfailure, needs review:x::heavy_check_mark:
empty-headingEnsures headings have discernible textMinorfailure:heavy_check_mark::heavy_check_mark:
frame-testedEnsures <iframe> and <frame> elements contain the axe-core scriptCriticalfailure, needs review:x::heavy_check_mark:
frame-title-uniqueEnsures <iframe> and <frame> elements contain a unique title attributeSeriousfailure:x::x:May not be able to control for this on highly customizable pages with many embedded components
heading-orderEnsures the order of headings is semantically correctModeratefailure:heavy_check_mark::heavy_check_mark:
identical-links-same-purposeEnsure that links with the same accessible name serve a similar purposeMinorneeds review:x::heavy_check_mark:May not be able to control for this on highly customizable pages with many embedded components
image-redundant-altEnsure image alternative is not repeated as textMinorfailure:heavy_check_mark::heavy_check_mark:Common bug worth catching!
label-title-onlyEnsures that every form element is not solely labeled using the title or aria-describedby attributesSeriousfailure:heavy_check_mark::heavy_check_mark:
landmark-banner-is-top-levelEnsures the banner landmark is at top levelModeratefailure:x::heavy_check_mark:Still have landmark work to do before enabling in "Recommended" set
landmark-complementary-is-top-levelEnsures the complementary landmark or aside is at top levelModeratefailure:x::heavy_check_mark:Still have landmark work to do before enabling in "Recommended" set
landmark-contentinfo-is-top-levelEnsures the contentinfo landmark is at top levelModeratefailure:x::heavy_check_mark:Still have landmark work to do before enabling in "Recommended" set
landmark-main-is-top-levelEnsures the main landmark is at top levelModeratefailure:x::heavy_check_mark:Still have landmark work to do before enabling in "Recommended" set
landmark-no-duplicate-bannerEnsures the document has at most one banner landmarkModeratefailure:x::heavy_check_mark:Still have landmark work to do before enabling in "Recommended" set
landmark-no-duplicate-contentinfoEnsures the document has at most one contentinfo landmarkModeratefailure:x::heavy_check_mark:Still have landmark work to do before enabling in "Recommended" set
landmark-no-duplicate-mainEnsures the document has at most one main landmarkModeratefailure:x::heavy_check_mark:Still have landmark work to do before enabling in "Recommended" set
landmark-one-mainEnsures the document has a main landmarkModeratefailure:x::heavy_check_mark:Still have landmark work to do before enabling in "Recommended" set
landmark-uniqueLandmarks must have a unique role or role/label/title (i.e. accessible name) combinationModeratefailure:x::heavy_check_mark:Still have landmark work to do before enabling in "Recommended" set
meta-viewport-largeEnsures <meta name="viewport"> can scale a significant amountMinorfailure:x::heavy_check_mark:
meta-viewportEnsures <meta name="viewport"> does not disable text scaling and zoomingCriticalfailure:x::heavy_check_mark:
page-has-heading-oneEnsure that the page, or at least one of its frames contains a level-one headingModeratefailure:heavy_check_mark::heavy_check_mark:This should always be true
regionEnsures all page content is contained by landmarksModeratefailure:x::heavy_check_mark:Still have landmark work to do before enabling in "Recommended" set
scope-attr-validEnsures the scope attribute is used correctly on tablesModerate, Criticalfailure:heavy_check_mark::heavy_check_mark:This should always be true
skip-linkEnsure all skip links have a focusable targetModeratefailure, needs review:x::x:Strict test for in-page links, doesn't pass for JS skip links
tabindexEnsures tabindex attribute values are not greater than 0Seriousfailure:heavy_check_mark::heavy_check_mark:This should always be true
table-duplicate-nameEnsure that tables do not have the same summary and captionMinorfailure:x::x:Table captions rarely used in our apps

Experimental Rules

Rules we are still testing and developing. They are not enabled by default in axe-core, but are enabled for the axe browser extensions.

Rule IDDescriptionImpactIssue TypeIn Recommended RulesetIn Extended RulesetNotes
css-orientation-lockEnsures content is not locked to any specific display orientation, and the content is operable in all display orientationsSeriousfailure, needs review:x::heavy_check_mark:
focus-order-semanticsEnsures elements in the focus order have an appropriate roleMinorfailure:heavy_check_mark::heavy_check_mark:
hidden-contentInforms users about hidden content.Minorfailure, needs review:x::x:Can have false positives
label-content-name-mismatchEnsures that elements labelled through their content must have their visible text as part of their accessible nameSeriousfailure:x::heavy_check_mark:
link-in-text-blockLinks can be distinguished without relying on colorSeriousfailure, needs review:x::heavy_check_mark:
no-autoplay-audioEnsures <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audioModeratefailure, needs review:x::heavy_check_mark:
p-as-headingEnsure p elements are not used to style headingsSeriousfailure:x::heavy_check_mark:
table-fake-captionEnsure that tables with a caption use the <caption> element.Seriousfailure:x::x:Table captions rarely used in our apps
td-has-headerEnsure that each non-empty data cell in a large table has one or more table headersCriticalfailure:heavy_check_mark::heavy_check_mark:

Keywords

FAQs

Package last updated on 03 Jun 2020

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc