ScannersAccessibility

Rules

Detailed explanation of all the accessibility rules the scanner checks.

Rules

The scanner checks your websites against the Web Content Accessibility Guidelines (WCAG) 2.1 Level A and AA requirements. Below is a detailed explanation of the accessibility rules the scanner checks.

Rule Categories

The scanner evaluates your website across four main categories:

  • Screen Reader & Assistive Technology
  • Visual & Structural
  • Interaction & Navigation
  • Form & Input

Screen Reader & Assistive Technology Rules

These rules ensure your content is accessible to users who rely on screen readers and other assistive technologies.

Image Alternative Text

  • Rule ID: image-alt
  • Impact: Serious
  • WCAG Criteria: 1.1.1 Non-text Content (Level A)
  • Description: Images must have alternative text that describes their purpose or content.

Incorrect ❌

<img src="logo.png">

Correct ✅

<img src="logo.png" alt="Company Logo">

Landmark Regions

  • Rule ID: landmark-main, region
  • Impact: Moderate
  • WCAG Criteria: 2.4.1 Bypass Blocks (Level A), Best Practice
  • Description: Content must be contained within landmark regions to help screen reader users navigate.

Incorrect ❌

<div>
  <h1>Page Title</h1>
  <p>Content...</p>
</div>

Correct ✅

<header role="banner">
  <h1>Page Title</h1>
</header>
<main>
  <p>Content...</p>
</main>
<footer role="contentinfo">
  <p>Footer content</p>
</footer>

Heading Structure

  • Rule ID: page-has-heading-one, heading-order
  • Impact: Moderate
  • WCAG Criteria: 1.3.1 Info and Relationships (Level A), 2.4.6 Headings and Labels (Level AA)
  • Description: Pages should have a logical heading structure, starting with an h1 and not skipping levels.

Incorrect ❌

<h3>Page Title</h3>
<h5>Section Title</h5>

Correct ✅

<h1>Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>

Link Text

  • Rule ID: link-name
  • Impact: Serious
  • WCAG Criteria: 2.4.4 Link Purpose (In Context) (Level A), 4.1.2 Name, Role, Value (Level A)
  • Description: Links must have discernible text that describes their purpose.

Incorrect ❌

<a href="page.html">Click here</a>
<a href="contact.html"><img src="mail.png"></a>

Correct ✅

<a href="page.html">View product details</a>
<a href="contact.html"><img src="mail.png" alt="Contact us"></a>

Visual & Structural Rules

These rules ensure your content is well-structured and visually accessible to all users.

Color Contrast

  • Rule ID: color-contrast
  • Impact: Serious
  • WCAG Criteria: 1.4.3 Contrast (Minimum) (Level AA)
  • Description: Text should have sufficient contrast against its background.

Language Attributes

  • Rule ID: html-has-lang, html-lang-valid
  • Impact: Serious
  • WCAG Criteria: 3.1.1 Language of Page (Level A)
  • Description: The HTML element must have a valid lang attribute that identifies the language of the page.

Incorrect ❌

<html>
  <head>...</head>
  <body>...</body>
</html>

Correct ✅

<html lang="en">
  <head>...</head>
  <body>...</body>
</html>

Document Title

  • Rule ID: document-title
  • Impact: Serious
  • WCAG Criteria: 2.4.2 Page Titled (Level A)
  • Description: Documents must have a title element that describes the page content.

Incorrect ❌

<head>
  <meta charset="UTF-8">
</head>

Correct ✅

<head>
  <meta charset="UTF-8">
  <title>Product Catalog - Company Name</title>
</head>

Form & Input Rules

These rules ensure your forms and input elements are accessible to all users.

Form Labels

  • Rule ID: label
  • Impact: Critical
  • WCAG Criteria: 1.3.1 Info and Relationships (Level A), 4.1.2 Name, Role, Value (Level A)
  • Description: Form elements must have associated labels that describe their purpose.

Incorrect ❌

<input type="text" id="name">
<select id="country">
  <option>Select a country</option>
</select>

Correct ✅

<label for="name">Full Name</label>
<input type="text" id="name">
 
<label for="country">Country</label>
<select id="country">
  <option>Select a country</option>
</select>

Button Accessibility

  • Rule ID: button-name
  • Impact: Critical
  • WCAG Criteria: 4.1.2 Name, Role, Value (Level A)
  • Description: Buttons must have discernible text that describes their purpose.

Incorrect ❌

<button></button>
<div role="button" onclick="submitForm()"></div>

Correct ✅

<button>Submit Form</button>
<div role="button" aria-label="Submit Form" onclick="submitForm()">
  <svg>...</svg>
</div>
Edit on GitHub

Last updated on

Previous

Scoring Methodology

Next

Introducrion

On this page