Web Accessibility Checklist for Frontend Developers

96% of websites fail to meet accessibility standards. This means millions of users face barriers when accessing online content. But as a frontend developer, you can change that by focusing on six key areas:

• HTML Structure: Use semantic tags like <header>, <main>, and <footer> to improve navigation.
• ARIA Attributes: Enhance dynamic content with attributes like aria-label and aria-live.
• Keyboard Support: Ensure full functionality using only a keyboard.
• Visual Design: Maintain proper color contrast and avoid relying solely on color for meaning.
• Accessible Media: Add alt text for images, captions for videos, and user-friendly controls.
• Testing: Combine automated tools like Axe and Lighthouse with manual screen reader tests.

Accessible websites aren't just ethical - they improve usability for everyone and can boost customer retention, acquisition, and revenue. Start with this checklist to make your web projects inclusive for all users.

HTML Structure Basics

A well-organized HTML structure makes it easier for assistive technologies to interpret content and improves navigation, especially for screen readers. Below, we break down the key HTML elements that create accessible pages.

Heading Hierarchy (H1-H6)

Headings are crucial for navigation - about 70% of screen reader users rely on them to move through lengthy pages. Follow these tips for proper heading usage:

• Begin each page with a single <h1> that reflects the page title.
• Keep heading levels in order (e.g., <h1> → <h2> → <h3>).
• Use headings to organize content logically, not just for visual design.
• Include headings in every main section of the page.

HTML5 Page Elements

HTML5 introduces semantic elements that help assistive technologies understand the structure and purpose of content. These elements do more than organize visually - they add meaning. Here’s a quick guide:

Element	Purpose	Best Practice
<header>	Page or section header	Use for introductory content; often includes an <h1>
<nav>	Navigation section	Ideal for primary navigation menus
<main>	Primary content area	Use only once per page for the central content
<article>	Self-contained content	Perfect for blog posts, news articles, or comments
<footer>	Page or section footer	Add supplementary information here
<aside>	Secondary content	For related but non-essential content

Page Landmarks

Landmark elements significantly improve navigation for users of assistive technologies, as noted by Deque University. Here’s how to use them effectively:

• Define Clear Boundaries
  Ensure all content is enclosed within a landmark region by using semantic HTML5 tags.
• Label Multiple Instances
  For repeated landmarks, add unique labels (e.g., <nav aria-label="Primary Navigation">, <nav aria-label="Product Categories">).
• Keep It Simple
  Stick to seven or fewer landmarks to avoid overwhelming users.

ARIA Implementation

Take your accessible HTML to the next level by incorporating ARIA attributes for dynamic and interactive content. According to WebAIM, ARIA attributes are especially useful when native HTML alone doesn't meet accessibility needs.

Element Labels

Clear and accurate labels are essential for screen readers. Here’s how to use ARIA labels effectively:

Label Type	Usage	Best Practice
aria-label	Non-visible labels	Use for elements without visible text
aria-labelledby	Visible labels	Reference existing on-screen text
aria-describedby	Additional context	Link to supplementary descriptions

A practical example comes from Gruppo San Donato's healthcare platform. Their team improved form accessibility by using ARIA attributes like aria-invalid, aria-describedby, and aria-live="assertive" to provide clear error messages and contextual information for form fields.

Once labels are in place, ARIA landmarks can help define distinct sections of your page.

Page Region Markers

Use ARIA landmarks only when HTML semantics fall short. Follow these guidelines for implementation:

• Use ARIA landmarks sparingly, only when native HTML elements can't achieve the same result.
• Ensure all page content is organized within defined regions.
• Assign unique labels to duplicate landmarks (e.g., "Primary Navigation" vs. "Footer Navigation").

"If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so." - WebAIM

Live Content Updates

For dynamic content, ARIA live regions ensure users are informed of updates. The aria-live attribute controls how updates are announced:

Priority Level	Usage	Application
polite	Non-critical updates	Chat messages, status updates
assertive	Important alerts	Error messages, time-sensitive notifications
off	Optional information	Background updates, decorative changes

When using live regions, set up an empty container with the appropriate aria-live value (polite for non-urgent updates, assertive for critical ones). Enhance precision by adding attributes like aria-atomic, aria-busy, and aria-relevant.

"Because an interruption may disorient users or cause them to not complete their current task, don't use the assertive value unless the interruption is imperative."

Finally, always test your ARIA implementation with screen readers to ensure it works as intended. The WAI-ARIA Authoring Practices guide offers in-depth examples, such as accordion components where buttons use aria-expanded to indicate state and aria-controls to link to associated panels.

Keyboard Support

Keyboard support is a key part of creating an accessible frontend when paired with semantic structure and ARIA practices. It ensures that interactive elements are usable for everyone, including those relying on keyboard navigation.

Tab Order

The tab order should naturally follow the DOM structure. Avoid altering this with tabindex unless absolutely necessary. Properly organizing interactive elements in the DOM ensures a logical navigation flow.

Element Type	Tab Order Behavior	Best Practice
Interactive Elements	Automatically focusable	Place them logically in the DOM
Hidden Content	Should not receive focus	Use properties like display: none
Custom Components	May need special handling	Align visual layout with DOM structure

For complex layouts, use modern CSS techniques like display: table or display: table-cell instead of outdated float-based layouts. This approach keeps tab order consistent without requiring extra markup.

Focus Indicators

Focus indicators are visual markers that show which element is currently active during keyboard navigation. These cues are critical for users who navigate without a mouse. For example, the Cauldron pattern library uses a bold purple outline (2px wide with a 2px offset) to clearly highlight focused elements.

You can define consistent focus styles in CSS:

:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.3);
}

This ensures focus indicators are visible only when needed, enhancing usability without cluttering the interface.

Skip Navigation Links

Skip navigation links let users bypass repetitive content, like menus, and jump straight to the main content. This is especially helpful for users with alternative input devices, such as head switches or mouth sticks.

Here's an example of how to implement a skip link:

<body>
  <a href="#maincontent" class="skip-link">Skip to main content</a>
  <header>...</header>
  <main id="maincontent">
    <h1>Main Content</h1>
    ...
  </main>
</body>

Style the skip link so it stays hidden until focused:

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: white;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

This approach ensures skip links are accessible and unobtrusive, improving navigation for all users.

sbb-itb-748369f

Visual Design Standards

Accessible visual design goes hand in hand with usability. It relies on proper use of colors, adequate contrast, and layouts that adjust seamlessly to different devices. When combined with clear structure and navigation, these elements create a user-friendly interface.

Color Contrast Rules

Contrast plays a key role in making text readable. WCAG guidelines specify minimum contrast ratios for various content types:

Content Type	AA Level (Minimum)	AAA Level (Enhanced)
Normal Text	4.5:1	7:1
Large Text (18pt+)	3:1	4.5:1
UI Components	3:1	Not specified

Modern browsers come with built-in tools to check contrast ratios. For interactive elements - like buttons or form fields - make sure all states (hover, focus, active) meet these contrast requirements. If you're using background images or gradients, test areas with lower contrast to ensure text remains readable.

Non-Color Information

Color alone shouldn’t communicate critical information. Missouri State University’s accessibility guidelines highlight this:

"Color is an element of visual communication that enhances design, identity and usability. Please think of color as a means to enhance and enliven the display of a page. When used as a supplement, rather than on its own, it can be a great benefit to all web users."

Here’s how to make sure information is accessible to everyone:

• Add text labels to color-coded elements.
• Use icons or symbols to reinforce meaning.
• Apply patterns or textures in charts and graphs for differentiation.
• Provide both color and text feedback for form validation.
• Use visual cues like asterisks for required fields instead of relying solely on color.

Pair these strategies with layouts that adjust smoothly across devices.

Responsive Design

Responsive design ensures websites are usable on any device. As Level Access explains, "The use of fluid, as opposed to fixed-width, layouts in responsive design makes websites more accessible to users with disabilities by dynamically adjusting the size of elements based on the screen size. This ensures that content remains readable and usable on any device."

To achieve this:

• Allow pinch zooming up to 200%.
• Use relative units (em, rem, %) to maintain consistent text sizes.
• Test your designs at different zoom levels and screen sizes.

Leverage CSS media queries to optimize layouts for all devices. This approach not only supports the growing number of mobile users - expected to reach 7.6 billion by 2027 - but also ensures accessibility for users with diverse visual needs.

Image and Video Access

Accessible multimedia is key to creating a better experience for all users. To make your images and videos accessible, focus on features like alternative text, captions, and user-friendly player controls. These elements ensure that users with various abilities can interact with your content effectively.

Image Alt Text

Alternative text, or alt text, is essential for users who rely on screen readers. According to Section508.gov: "Alternative text, also known as alt text, is descriptive text that conveys the meaning of an image in digital content. It's designed to make visual content accessible to people with vision disabilities."

Here are some tips for writing effective alt text:

• Be clear and descriptive in your language.
• Avoid phrases like "image of" or "picture of" - screen readers already announce images.
• Include specific details, such as names, locations, or actions.
• Match the tone of your website's content.
• Use empty alt text (alt="") for decorative images that don't add meaning.

For functional images, like linked logos, focus on the action they represent. For example, Siteimprove uses "Siteimprove home" as the alt text for their linked logo, clearly indicating the link's purpose.

Text alternatives are just as important for video content.

Video Text Options

To make video content accessible, consider these text-based solutions:

Text Type	Purpose	Implementation
Captions	Display spoken words and context for users who are deaf or hard of hearing	Use WebVTT format (.vtt files)
Subtitles	Translate dialogue for users facing language barriers	Add <track> with kind="subtitles"
Transcripts	Provide a full text version of the video content	Host on a separate page or use an expandable section

When adding these features:

• Place <track> elements after all <source> elements in your video tags.
• Use the srclang attribute to specify the language.
• Avoid auto-playing videos to respect user preferences.
• Check for issues using the Photosensitive Epilepsy Analysis Tool (PEAT).

Accessible video is not just about text - it also depends on user-friendly media controls.

Media Controls

Accessible media players must work seamlessly with keyboards and screen readers. Key considerations include:

• Keyboard and Screen Reader Compatibility: Ensure controls respond to the Tab key and arrow keys. They should also announce details like name, state, role, and value.
• Standard Key Commands: Allow users to play/pause with Enter or Space and adjust volume with arrow keys.

For consistent interactions, here’s a quick guide:

Control	Key Command	Function
Play/Pause	Enter or Space	Start or stop playback
Volume	Arrow Keys	Adjust volume levels
Seek Bar	Arrow Keys	Move to a specific position
Captions	Enter	Turn captions on or off

"Just including alternatives to the media you present (ex. transcript for a video) is half the battle."

User-friendly controls and thoughtful text alternatives ensure your multimedia content is accessible to everyone.

Testing Methods

Combine both automated and manual testing early in the process to identify issues and ensure compliance.

Automated Tests

Automated testing tools can detect around 20-40% of accessibility issues. These tools are particularly helpful for spotting common problems like missing alt text, poor color contrast, and incorrect ARIA usage.

Here’s a quick comparison of some widely-used automated testing tools:

Tool	Key Features	Best Used For
Axe	Browser extension, CI/CD support	Continuous testing, detailed reports
Lighthouse	Integrated into Chrome DevTools	Quick accessibility audits
WAVE	Detailed issue descriptions	Thorough documentation review
Pa11y	Command-line interface	Simple CI pipeline integration

To integrate automated tests into your CI/CD pipeline, use a configuration like this:

name: Accessibility Tests
on:
  push:
    branches: [main]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: npm run test:accessibility

While automated tools offer valuable insights, they don’t catch everything. Pair these tests with manual reviews for a more complete understanding of accessibility.

Screen Reader Tests

Automated tools are helpful, but manual testing with screen readers provides a better sense of how users interact with your site. Different screen readers interpret content in unique ways, so it’s a good idea to test with multiple options:

• NVDA: A free, open-source screen reader for Windows
• VoiceOver: Built-in on macOS and iOS devices
• JAWS: A professional tool with advanced features

When testing with screen readers, ensure that:

• The document language is correctly identified
• Form controls are labeled appropriately
• Navigation landmarks are clear and announced
• Dynamic content updates are properly communicated

Browser Testing Tools

Most browsers include built-in accessibility features that can supplement automated and manual tests. These tools are especially useful for verifying specific elements:

• Accessibility Tree: Displays how the browser structures content for assistive technologies
• Color Contrast Checker: Ensures text visibility meets WCAG standards
• Focus Indicator: Highlights keyboard navigation paths

It’s a good practice to set realistic failure thresholds when starting with automated tests. As your team gains expertise, you can gradually raise the standards for accessibility compliance.

Summary and Action Items

WebAIM's analysis reveals that 96.7% of accessibility issues fall into six main categories. Here's a practical checklist to address them:

Priority Area	Key Actions	Implementation Tips
Semantic Structure	Use HTML5 elements correctly	Apply <header>, <nav>, <main>, and <footer> to create a clear page structure.
Color and Contrast	Ensure a 4.5:1 contrast ratio	Use accessible color palettes with tools like Radix UI.
Form Accessibility	Add proper labels	Make sure all form controls have associated labels and clear instructions.
Navigation	Enable keyboard access	Test that every interactive element can be reached using only the Tab key.
Media Content	Provide text alternatives	Add descriptive alt text for images and captions for videos.
Testing Integration	Use automated checks	Incorporate tools like axe-core or Lighthouse into your build process.

In addition to the checklist, consider these steps to strengthen accessibility efforts:

1. Start with accessibility in mind by using UI libraries designed for inclusive design.

2. Automate testing during development to catch issues early:

   "Having tools that allow you to automate the scans and integrate them into your build process helps a lot because you don't have to rely on somebody remembering to do it as part of your release process– it just happens automatically."

3. Improve navigation by ensuring a logical tab order and offering clear navigation cues.

To maintain WCAG compliance, schedule regular testing - both automated and manual. Use tools like axe-core and Lighthouse for automated checks, and complement these with screen reader testing using NVDA or VoiceOver. Regularly revisit these practices within your development workflow to ensure accessibility standards are consistently met.