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>Last updated on