loke.dev
Back to all posts

The Complete Web Accessibility Checklist for Modern Websites

Web accessibility isn't just a nice-to-have feature or a legal requirement—it's a fundamental aspect of building an inclusive web that works for everyone. Yet, many developers struggle to implement accessibility correctly, often unsure where to start or what to prioritize.

In this comprehensive guide, I've compiled a practical checklist of accessibility considerations, organized by category and priority. Whether you're building a new site or improving an existing one, this resource will help you create more accessible web experiences.

Why Accessibility Matters

Before diving into the checklist, let's understand why accessibility is crucial:

  • Inclusivity: Approximately 15% of the global population lives with some form of disability
  • Legal Compliance: Many jurisdictions require websites to be accessible (ADA, Section 508, EAA, etc.)
  • Better UX for Everyone: Accessibility improvements often benefit all users
  • SEO Benefits: Many accessibility practices improve search engine rankings
  • Brand Reputation: Shows your commitment to inclusivity and social responsibility

The Web Accessibility Checklist

1. Semantic HTML Structure

Proper HTML semantics form the foundation of accessibility. Screen readers and assistive technologies rely on semantic markup to understand page structure.

High Priority:

  • Use appropriate heading levels (<h1> through <h6>) in a logical hierarchy
  • Employ semantic elements like <nav>, <main>, <section>, <article>, and <footer>
  • Implement proper form elements with associated labels
  • Use buttons for interactive controls and anchors for navigation
  • Add appropriate ARIA landmarks when HTML5 semantic elements aren't sufficient
<!-- ❌ Poor semantics -->
<div class="header">
  <div class="title">My Website</div>
</div>
<div class="nav">
  <div class="nav-item">Home</div>
</div>
<div class="content">
  <div class="content-title">Welcome</div>
  <div class="text">This is my website.</div>
</div>
 
<!-- ✅ Good semantics -->
<header>
  <h1>My Website</h1>
</header>
<nav>
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</nav>
<main>
  <h2>Welcome</h2>
  <p>This is my website.</p>
</main>

Medium Priority:

  • Use definition lists (<dl>, <dt>, <dd>) for name-value pairs
  • Implement <figure> and <figcaption> for images with captions
  • Use <time> element for dates and times
  • Employ <blockquote> and <cite> for quotations
  • Implement <details> and <summary> for expandable content

2. Keyboard Accessibility

Many users navigate websites using only a keyboard, including people with motor disabilities, power users, and those using screen readers.

High Priority:

  • Ensure all interactive elements are keyboard accessible
  • Maintain a logical tab order that follows the visual layout
  • Provide visible focus indicators for all interactive elements
  • Implement proper focus management for custom widgets and modals
  • Ensure keyboard traps are avoided (user can navigate away from all elements)
/* ❌ Removing focus outlines without alternatives */
:focus {
  outline: none;
}
 
/* ✅ Enhanced focus styles */
:focus {
  outline: 2px solid #4d90fe;
  outline-offset: 2px;
}
 
/* ✅ Even better: only remove outlines if another focus indicator exists */
:focus:not(:focus-visible) {
  outline: none;
}
 
:focus-visible {
  outline: 2px solid #4d90fe;
  outline-offset: 2px;
}

Medium Priority:

  • Add skip links to bypass repetitive navigation
  • Implement keyboard shortcuts for frequently used actions (with proper documentation)
  • Ensure dropdown menus are keyboard operable
  • Test and optimize keyboard navigation flow

3. Text and Typography

Clear, readable text is essential for all users, especially those with visual or cognitive impairments.

High Priority:

  • Use sufficient color contrast (WCAG AA requires 4.5:1 for normal text, 3:1 for large text)
  • Ensure text can be resized up to 200% without loss of content or functionality
  • Avoid using text within images for important information
  • Maintain a reasonable line length (around 66 characters per line)
  • Use relative units (em, rem) instead of absolute units (px) for text sizing
/* ❌ Fixed font sizes */
body {
  font-size: 14px;
}
 
/* ✅ Responsive typography */
:root {
  font-size: 100%; /* Typically 16px in most browsers */
}
 
body {
  font-size: 1rem;
  line-height: 1.5;
}
 
h1 {
  font-size: 2rem;
}
 
@media (min-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }
}

Medium Priority:

  • Implement proper spacing between paragraphs and lines
  • Choose fonts that are highly legible
  • Avoid justified text alignment (which can create "rivers" of white space)
  • Ensure sufficient contrast between text and background patterns/images
  • Consider offering a high-contrast mode or text-size adjustment controls

4. Images and Media

Visual and audio content needs alternatives for users who cannot see or hear them.

High Priority:

  • Add descriptive alt text for all informative images
  • Use empty alt attributes (alt="") for decorative images
  • Provide captions and transcripts for videos
  • Ensure no content flashes more than three times per second (seizure prevention)
  • Add text alternatives for complex visualizations and infographics
<!-- ❌ Missing or unhelpful alt text -->
<img src="chart.png" />
<img src="chart.png" alt="chart" />
 
<!-- ✅ Descriptive alt text -->
<img
  src="chart.png"
  alt="Bar chart showing sales growth of 25% in Q1 2023 compared to Q1 2022"
/>
 
<!-- ✅ Decorative image with empty alt -->
<img src="decorative-divider.png" alt="" />

Medium Priority:

  • Implement audio descriptions for videos when necessary
  • Ensure media players have accessible controls
  • Provide sign language interpretation for important video content
  • Allow users to pause, stop, or hide any moving, blinking, or auto-updating content
  • Optimize image text for screen readers (avoid text in images when possible)

5. Forms and Interactive Elements

Forms are often critical for user interaction but can present significant barriers if not implemented accessibly.

High Priority:

  • Associate form labels with their controls using for and id attributes
  • Provide clear error messages and validation feedback
  • Group related form elements with <fieldset> and <legend>
  • Ensure form elements have descriptive names
  • Implement proper ARIA attributes for custom form controls
<!-- ❌ Inaccessible form -->
<div>
  Email:
  <input type="email" placeholder="Enter your email" />
</div>
 
<!-- ✅ Accessible form -->
<div>
  <label for="email">Email Address</label>
  <input type="email" id="email" name="email" aria-describedby="email-hint" />
  <p id="email-hint" class="form-hint">
    We'll never share your email with anyone else.
  </p>
</div>

Medium Priority:

  • Provide autocomplete attributes for common form fields
  • Implement accessible date pickers and custom select elements
  • Add clear instructions at the beginning of forms
  • Ensure error messages are linked programmatically to their form fields
  • Test forms with keyboard-only navigation and screen readers

6. Color and Visual Design

Visual design choices significantly impact accessibility, particularly for users with visual impairments.

High Priority:

  • Don't rely solely on color to convey information
  • Ensure sufficient contrast for UI elements (3:1 minimum for interactive elements)
  • Test your site in grayscale to check color dependency
  • Provide focus indicators that meet contrast requirements
  • Ensure text overlaid on images or gradients maintains proper contrast
/* ❌ Color-only indication */
.error-input {
  border-color: red;
}
 
/* ✅ Multiple indicators */
.error-input {
  border-color: #d9534f;
  border-width: 2px;
  background-image: url('error-icon.svg');
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 32px;
}

Medium Priority:

  • Consider users with color vision deficiencies in your color palette
  • Provide high contrast mode or theme options
  • Ensure hover and focus states are distinct and visible
  • Avoid low-contrast design elements for important UI components
  • Test with color blindness simulators

7. ARIA and Advanced Semantics

ARIA (Accessible Rich Internet Applications) attributes enhance accessibility when HTML alone isn't sufficient.

High Priority:

  • Use ARIA landmarks to identify page regions (role="banner", role="navigation", etc.)
  • Add appropriate ARIA attributes for custom widgets and controls
  • Implement proper ARIA states for interactive elements (aria-expanded, aria-pressed, etc.)
  • Ensure dynamic content updates are announced to screen readers
  • Use aria-label or aria-labelledby for elements without visible text
<!-- ❌ Custom dropdown without ARIA -->
<div class="dropdown">
  <div class="dropdown-toggle">Select an option</div>
  <div class="dropdown-menu">
    <div class="dropdown-item">Option 1</div>
    <div class="dropdown-item">Option 2</div>
  </div>
</div>
 
<!-- ✅ Custom dropdown with ARIA -->
<div class="dropdown">
  <button
    class="dropdown-toggle"
    aria-haspopup="listbox"
    aria-expanded="false"
    id="dropdown-label"
  >
    Select an option
  </button>
  <ul
    class="dropdown-menu"
    role="listbox"
    aria-labelledby="dropdown-label"
    hidden
  >
    <li role="option" class="dropdown-item">Option 1</li>
    <li role="option" class="dropdown-item">Option 2</li>
  </ul>
</div>

Medium Priority:

  • Implement ARIA live regions for important dynamic content
  • Use aria-describedby to associate descriptive text with form controls
  • Add aria-current for indicating current page or state
  • Implement proper focus management with aria-activedescendant for composite widgets
  • Use ARIA roles judiciously, preferring native HTML elements when possible

8. Responsive Design and Zoom

Accessible websites must work well at different screen sizes and zoom levels.

High Priority:

  • Ensure content is accessible at 320px width (mobile devices)
  • Test functionality at 400% zoom in desktop browsers
  • Implement responsive designs that reflow rather than requiring horizontal scrolling
  • Ensure touch targets are at least 44×44 pixels for mobile users
  • Maintain readability and functionality across device sizes
/* ❌ Fixed layouts */
.container {
  width: 1200px;
}
 
/* ✅ Responsive layouts */
.container {
  width: 100%;
  max-width: 1200px;
  padding: 0 1rem;
}
 
/* ✅ Adequate touch targets */
.button {
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 1rem;
}

Medium Priority:

  • Test with screen magnification tools
  • Ensure content order makes sense when linearized (for screen readers and mobile devices)
  • Implement appropriate viewport meta tags
  • Consider device-specific interaction patterns (touch vs. mouse)
  • Test with different pixel densities and screen resolutions

9. Document Structure and Navigation

Clear document structure helps all users navigate and understand your content.

High Priority:

  • Implement a logical heading structure (h1-h6)
  • Use descriptive page titles that identify the current page
  • Provide breadcrumb navigation for complex sites
  • Ensure link text is descriptive and makes sense out of context
  • Add proper landmark roles or elements to identify page regions
<!-- ❌ Non-descriptive links -->
<a href="/pricing">Click here</a> to see our pricing.
 
<!-- ✅ Descriptive links -->
<a href="/pricing">View our pricing plans</a>

Medium Priority:

  • Implement a site map for complex websites
  • Add a search function for sites with lots of content
  • Ensure consistent navigation across pages
  • Provide multiple ways to find content
  • Consider implementing a table of contents for long documents

10. Testing and Validation

Regular testing is essential to ensure accessibility standards are met.

High Priority:

  • Test with keyboard navigation
  • Validate with automated tools (Axe, WAVE, Lighthouse)
  • Test with screen readers (NVDA, JAWS, VoiceOver)
  • Perform manual accessibility audits using WCAG criteria
  • Test with actual users who have disabilities when possible

Medium Priority:

  • Implement accessibility testing in your CI/CD pipeline
  • Create and maintain an accessibility statement
  • Document known accessibility issues and workarounds
  • Perform regular accessibility reviews of new features
  • Test across different browsers and assistive technologies

Implementing the Checklist in Your Workflow

To make accessibility an integral part of your development process:

  1. Start Early: Address accessibility from the beginning of your project
  2. Prioritize Issues: Focus on high-priority items first
  3. Automate When Possible: Integrate accessibility testing into your build process
  4. Educate Your Team: Ensure everyone understands the importance of accessibility
  5. Iterate: Continuously improve accessibility over time

Tools to Help You Implement Accessibility

Here are some tools to help you implement and test accessibility:

Conclusion: Accessibility as a Continuous Process

Web accessibility isn't a one-time task but an ongoing commitment. By using this checklist as a guide, you can systematically improve the accessibility of your websites and applications, creating better experiences for all users.

Remember that perfect accessibility is an aspirational goal—focus on making continuous improvements rather than achieving perfection immediately. Each accessibility enhancement you implement helps make the web more inclusive for everyone.

What accessibility challenges have you faced in your projects? Share your experiences and solutions in the comments below!

Want to learn more about web accessibility? Check out my other articles on creating inclusive digital experiences and implementing accessibility best practices.