View accessibility rule definitions. You can click into each rule for additional details about the violation, such as best practices and common mistakes.

WCAG A

Add to Cart Feedback: Add-to-cart buttons provide appropriate screen reader feedback through aria-live announcements.

Aria Allowed Attribute: An element's role supports its ARIA attributes.

Aria Command Name: Every ARIA button, Link, and menuitem has an accessible name.

Aria Input Field Name: Every ARIA input field has an accessible name.

Aria Prohibited Attribute: ARIA attributes are not prohibited for an element's role.

Aria Required Children: Elements with an ARIA role that require child roles contain them.

Aria Required Parent: Elements with an ARIA role that require child roles contain them.

Aria Role Description: Aria-roledescription is only used on elements with an implicit or explicit role.

Aria Toggle Field Name: Every ARIA toggle field has an accessible name.

Aria Tooltip Name: Every ARIA tooltip node has an accessible name.

Aria Valid Attribute: Attributes that begin with aria- are valid ARIA attributes.

Aria Valid Attribute Value: All ARIA attributes have valid values.

Audio Caption: <audio> elements have captions.

Broken Link: Links lead to valid pages.

Button Name: Buttons have discernible text.

Definition List: <dl> elements are structured correctly.

Disappearing Focus: Buttons that remove themselves from the DOM when activated properly manage focus.

Document Title: Each HTML document contains a non-empty <title> element.

Duplicate Id: Every id attribute value is unique.

Duplicate Link Text: Links with identical text point to the same destination or have unique descriptive attributes. Even if links redirect to the same final destination, using different URLs creates confusion and should be standardized for better accessibility.

Empty Heading: Headings have discernible text.

Focus Hover Parity: Page behavior is consistent using mouse hover or keyboard focus.

Font Weight Too High: Font-weight values of 600 or higher are replaced with semantic <strong> HTML elements instead of CSS styling.

Frame Title: <iframe> and <frame> elements contain a unique title attribute.

HTML has Lang: Every HTML document has a lang attribute.

Image Alt: <img> elements have alternate text or a role of none or presentation.

Label: Every form element has a label.

Label Content Name Mismatch: Elements labelled through their content must have their visible text as part of their accessible name.

Link in Text Block: Links are distinguished from surrounding text in a way that does not rely on color.

Link Name: Links have discernible text.

List: Lists are structured correctly.

Listitem: <li> elements are used semantically.

Marquee: <marquee> elements are not used.

Nested Interactive: Interactive controls are not nested.

Nested Interactive Anchor: Anchor tags are not nested.

P As Heading: Bold italic text and font-size is not used to style <p> elements as a heading.

Placeholder Link: Placeholder links have proper interaction handling.

Quantity Change Button Feedback: Quantity change buttons provide appropriate screen reader feedback through aria-live announcements.

Role Img Alt: [role="img"] elements have alternative text.

Scope Attr Valid: Scope attribute is used correctly on tables.

Scrollable Region Focusable: Elements that have scrollable content are accessible by keyboard.

Select Name: Select element has an accessible name.

Semantic Sales Price Descriptions: Sale prices are communicated accessibly beyond just visual strikethrough text.

Site Navigation Bar Keyboard Accessible: Main site navigation bar functions correctly for keyboard users.

Skip Link: All skip links have a focusable target.

Skip Link Missing: Every store has a skip link.

Summary Name: Summary elements have discernible text.

SVG Img Alt: <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text alternative.

TD Has Header: Each cell in a table that uses the header attribute refers only to other cells in that table

Video Pause Control: Videos longer than 5 seconds can be paused.

WCAG AA

Aria Allowed Role: Role attribute has an appropriate value for the element.

Aria Hidden Focus: Aria-hidden elements are not focusable nor contain focusable elements.

Aria Required Attribute: Elements with ARIA roles have all required ARIA attributes.

Aria Roles: All elements with a role attribute use a valid value.

Autocomplete Valid: Autocomplete attribute is correct and suitable for the form field.

Avoid Inline Spacing: Text spacing set through style attributes can be adjusted with custom stylesheets.

Color Contrast: Contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds.

Duplicate Id Active: Every id attribute value is unique.

Meta Viewport: <meta name="viewport"> does not disable text scaling and zooming.

Semantic Aria Command Name: Every ARIA button, link, and menuitem has a meaningful name.

Semantic Button Name: Buttons have clear, meaningful text that indicates their function.

Semantic Heading Text: Headings are semantically correct and not split across multiple headers or meaningless text.

Semantic Img Alt: Images have descriptive alt text that explains the content of the image and its role relative to the rest of the page.

Semantic Img Links: Links containing images are accessible and describe the link action as opposed to the image itself.

Semantic Input Button Name: Form submission and reset buttons have descriptive text that explains their action.

Semantic Link Name: Links have clear, meaningful text that indicates their function.

Semantic Role Img Alt: Elements with role='img' have meaningful alternative text that describes their content.

Semantic Svg Img Alt: SVG elements with image roles have meaningful alternative text that describes the image content.

Table Missing Headers: Identify row and column headers in data tables using <th> elements or mark layout tables with role="presentation".

Target Size: Touch targets have sufficient size and space.

WCAG AAA

Aria Dialog Name: Every ARIA dialog and alertdialog node has an accessible name.

Blank Target: Links that open in new windows have clear warnings about this behavior.

Duplicate Accessible Names: No duplicate screen reader accessible names.

Empty Table Header: Table headers have discernible text.

Focus Order Semantics: Elements in the focus order have a role appropriate for interactive content.

Heading Order: Order of headings is semantically correct.

Image Redundant Alt: Image alternative is not repeated as text.

Label Title Only: Every form element has a visible label and is not solely labeled using hidden labels or the title or aria-describedby attributes.

Landmark Banner is Top Level: Banner landmark is at top level.

Landmark Complementary is Top Level: Complementary landmark or aside is at top level.

Landmark Contentinfo is Top Level: Contentinfo landmark is at top level.

Landmark Main is Top Level: Main landmark is top level.

Landmark No Duplicate Banner: Document has at most one banner landmark.

Landmark No Duplicate Contentinfo: Document has at most one contentinfo landmark.

Landmark No Duplicate Main: Document has at most one main landmark.

Landmark One Main: Document has a main landmark.

Landmark Unique: Landmarks should have a unique role or role/label/title (i.e. accessible name) combination.

Page Has Heading One: Bold italic text and font-size is not used to style <p> elements as a heading.

Presentation Role Conflict: Marked as presentational should not have global ARIA or tabindex to ensure all screen readers ignore them.

Region: All page content is contained by landmarks.