How to test accessibility of html page

HtmlHow-ToBeginner · 4 min read

How to Test Accessibility of an HTML Page: Simple Steps

To test the accessibility of an HTML page, use browser tools like Chrome DevTools Accessibility pane and automated checkers such as axe or Lighthouse. Also, perform manual tests like keyboard navigation and screen reader checks to ensure all users can access your content.

📐

Syntax

Testing accessibility involves using tools and manual methods to check if your HTML page is usable by people with disabilities.

Automated tools: Run scans that highlight accessibility issues.
Manual checks: Use keyboard only navigation and screen readers.
Browser DevTools: Inspect accessibility tree and ARIA attributes.

javascript

/* Example command to run axe accessibility scanner in browser console */
axe.run(document, {}, function(err, results) {
  if (err) throw err;
  console.log(results.violations);
});

Output

Array of accessibility violations found on the page, if any.

💻

Example

This example shows how to use Chrome DevTools Lighthouse to test accessibility:

Open your HTML page in Chrome.
Press F12 to open DevTools.
Go to the Lighthouse tab.
Select Accessibility and click Generate report.
Review the report for issues and suggestions.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accessibility Test Example</title>
</head>
<body>
  <h1>Welcome to Accessibility Test</h1>
  <button aria-label="Close dialog">Close</button>
  <a href="#main-content" accesskey="m">Skip to main content</a>
  <main id="main-content">
    <p>This page includes ARIA labels and keyboard shortcuts.</p>
  </main>
</body>
</html>

Output

A simple webpage with accessible features like ARIA label and skip link.

⚠️

Common Pitfalls

Common mistakes when testing accessibility include:

Relying only on automated tools and skipping manual checks.
Missing alt text on images or using empty alt attributes incorrectly.
Not testing keyboard navigation, which is essential for users who cannot use a mouse.
Ignoring color contrast issues that affect users with vision impairments.

html

<!-- Wrong: Image without alt text -->
<img src="logo.png" alt="">

<!-- Right: Image with descriptive alt text -->
<img src="logo.png" alt="Company logo">

Output

The right example provides meaningful alt text for screen readers.

📊

Quick Reference

Test Method	Description	Tools/Techniques
Automated Scanning	Run tools to find common issues	axe, Lighthouse, WAVE
Keyboard Navigation	Check if page works without mouse	Tab key, Shift+Tab, Enter, Space
Screen Reader Testing	Listen to content read aloud	NVDA, VoiceOver, JAWS
Color Contrast Check	Ensure text is readable	Contrast checker tools
Manual Code Review	Check semantic HTML and ARIA	Browser DevTools, code editor

✅

Key Takeaways

Use both automated tools and manual testing to cover all accessibility aspects.

Always test keyboard navigation to ensure users can interact without a mouse.

Check images have meaningful alt text for screen readers.

Use browser DevTools and Lighthouse for quick accessibility reports.

Fix color contrast issues to improve readability for all users.