How Hub

Accessibility Review

Updated:

Categories:

Author:

Hector Jarquin

This guide outlines the step-by-step process for creating a comprehensive accessibility report for any website using free accessibility audit tools and collaborative review.

Free Accessibility Audit Tools

Primary Tools

Secondary Tools

Process

Run Accessibility Audits

  • Go to WAVE Web Accessibility Evaluator.
  • Enter the website URL and run the audit.
  • Take screenshots of the results for documentation.
  • Run Lighthouse accessibility audit via PageSpeed Insights.
  • Create a single comprehensive PDF report that includes:
    • Summary of issues found by each tool (WAVE and Lighthouse)
    • Screenshots from both tools
    • List of items that need attention with tool attribution

Extract Key Data

  • Use LM assistance to summarize and structure the findings. Example prompt:
  • Copy and paste the relevant issues, severity levels, and recommendations from all audit tools.
  • For each issue, note which tool identified it (WAVE, Lighthouse, Mouse and Keyboard, or NVDA).

Example:
This prompt is specific in the context of GitHub copilot using VS Code. And that the current directory contains accessibility-review-instructions.md.

Based on the accessibility review instructions document, create a comprehensive accessibility review for [ClientName] using the following findings from WAVE Web Accessibility Evaluator, Lighthouse accessibility testing, NVDA screen reader, and keyboard navigation testing. This is a preliminary audit report to help the client understand accessibility barriers and make informed decisions about remediation work. Focus on WCAG 2.1 AA compliance and present the information in a professional, client-facing format. Include specific code examples and clear problem descriptions, but remember this is for client review and work estimation, not detailed implementation.

Categorize Accessibility Issues

List accessibility issues by WCAG 2.1 categories and severity:

  • Perceivable (Images, colors, text alternatives)
  • Operable (Keyboard navigation, focus management)
  • Understandable (Labels, instructions, error identification)
  • Robust (Markup validity, assistive technology compatibility)

Severity levels:

  • Critical (Complete barriers to access)
  • Serious (Significant barriers)
  • Moderate (Some barriers)
  • Minor (Best practice improvements)

Identify Accessibility Violations

  • Review WAVE errors, alerts, and structural elements.
  • Note Lighthouse accessibility score and failed audits.
  • Cross-reference findings across tools for accuracy.
  • Test with keyboard navigation and screen reader (if possible).

Draft Solutions

  • For each violation, write clear, actionable solutions with code examples.
  • Reference specific WCAG 2.1 AA success criteria.
  • Focus on semantic HTML, ARIA attributes, and proper markup.
  • Include color contrast ratios and alternative text requirements.
  • Prioritize fixes by impact and implementation effort.

Create the Report

  • Use a markdown template with the following sections:
    • Executive Summary (include testing tools used in the summary)
    • Accessibility Score Overview (table format with tool scores)
    • WCAG 2.1 Compliance Summary
    • Detailed Accessibility Issues and Solutions (by category and tool)
    • Items That Need Attention (organized by tool: WAVE findings, Lighthouse findings, Mouse and Keyboard findings, NVDA findings)
    • Priority Recommendations
    • Testing Methodology
    • Prepared for / Date
  • Include screenshots and code examples where helpful.
  • Clearly attribute each finding to its source tool (WAVE, Lighthouse, Mouse and Keyboard, or NVDA).
  • Disclose all testing tools used in the Executive Summary for transparency.
  • Use professional voice and tone throughout the document, appropriate for client-facing business reports.

Review and Edit

  • Share the draft with stakeholders for review.
  • Validate findings with manual testing when possible.
  • Update the document based on feedback and site-specific requirements.
  • Ensure all recommendations include WCAG 2.1 references.

Finalize and Deliver

  • Save the final report in the project folder (e.g., clientName-accessibility-review-october-2025.md).
  • Use the report to quote accessibility remediation work.
  • Reference the instructions for future accessibility audits.

Create Issue and Branch Workflow

  • Open a new issue in your issue tracker titled Task - accessibility review - Month - Year.
  • Add a comment to the issue with the markdown report (copy and paste the document).
  • When work is approved, create a new branch in your repository named task/accessibility-review-month-year.
  • Complete all accessibility-related tasks in this branch.
  • Test fixes with accessibility tools before merging.
  • Merge the branch back to main after review and validation.

Manual Testing Checklist

Keyboard Navigation

  • Tab through all interactive elements
  • Verify focus indicators are visible
  • Test skip links and focus management
  • Ensure no keyboard traps exist

Screen Reader Testing (if available)

  • Test with NVDA (free) or JAWS
  • Verify all content is announced
  • Check heading structure and landmarks
  • Test form labels and error messages

Color and Contrast

  • Check color contrast ratios (4.5:1 for normal text, 3:1 for large text)
  • Verify information isn’t conveyed by color alone
  • Test with high contrast mode

Forms and Interactive Elements

  • Verify all form fields have labels
  • Test error message associations
  • Check required field indicators
  • Test custom controls and widgets

Tips

  • Always test on multiple pages (homepage, forms, content pages, etc.).
  • Document specific code locations and element selectors.
  • Keep the report client-friendly while maintaining technical accuracy.
  • Prioritize fixes that impact the most users.
  • Include estimated effort for each recommendation.
  • Reference WCAG 2.1 AA as the target compliance level.
  • Consider mobile accessibility in addition to desktop.

Example:

# BeOne Accessibility Review

**Prepared for:** BeOne  
**Date:** October 2, 2025

## Executive Summary

This report presents a comprehensive accessibility audit of BeOne's website using multiple testing methodologies. **Testing tools used:** WAVE Web Accessibility Evaluator, Lighthouse accessibility testing, NVDA screen reader, and keyboard navigation testing. The analysis identifies critical accessibility barriers and provides actionable recommendations focused on WCAG 2.1 AA compliance. Key areas requiring immediate attention include carousel button labeling, navigation keyboard accessibility, and color contrast improvements.

## Accessibility Score Overview

| Tool | Score | Status |
|------|-------|--------|
| Lighthouse Accessibility | 83/100 | Good |
| WAVE Web Evaluator | Multiple Issues Found | Needs Improvement |
| Mouse and Keyboard | Navigation Issues Found | Needs Improvement |
| NVDA Screen Reader | Logo and Navigation Issues | Needs Improvement |

## WCAG 2.1 Compliance Summary

| WCAG Principle | Compliance Level | Critical Issues |
|----------------|------------------|-----------------|
| **Perceivable** | Partial | Logo alt text, image alternatives |
| **Operable** | Poor | Keyboard navigation, carousel controls |
| **Understandable** | Good | Minor issues with button labeling |
| **Robust** | Poor | Broken ARIA references, invalid markup |

## Items That Need Attention

### WAVE Findings
- **Alert:** Logo has insufficient alternative text
- **Error:** Carousel pagination buttons have broken ARIA references
- **Alert:** Affiliate logos have excessively long alternative text

### Lighthouse Findings
- **Critical:** Carousel buttons lack accessible names (15 failing elements)
- **Serious:** Navigation images missing alt attributes (2 failing elements)
- **Moderate:** Insufficient color contrast on multiple CTA buttons
- **Minor:** Touch targets too small for carousel pagination

### Mouse and Keyboard Findings
- **Serious:** Keyboard navigation requires traversing entire menu to access submenus
- **Moderate:** Submenus don't close when navigating away with keyboard
- **Moderate:** Submenus escape when navigating to content
- **Moderate:** Submenus don't close on Escape key

### NVDA Screen Reader Findings
- **Critical:** Logo appears as "unlabeled graphic" to screen readers

## Priority Recommendations

### Immediate (Critical)
1. **Add accessible names to carousel buttons** - Affects carousel functionality for screen reader users
2. **Fix keyboard navigation flow** - Critical barrier for keyboard-only users
3. **Update logo alternative text** - Essential for screen reader identification

### High Priority (Serious)
1. **Add alt attributes to navigation images** - Required for image accessibility
2. **Implement proper focus management** - Improves navigation experience

### Medium Priority (Moderate)
1. **Improve color contrast ratios** - Enhances readability for all users
2. **Optimize alternative text length** - Improves screen reader efficiency

### Low Priority (Minor)
1. **Increase touch target sizes** - Improves mobile accessibility
2. **Add ARIA landmarks** - Enhances page structure navigation

**Prepared for:** BeOne  
**Date:** October 2, 2025

Hector Jarquin

One of the newest team members at Kobayashi, Hector works with the team developing user-centered experiences (UX), and has a passion for accessible, semantic, and responsive applications. Also, believes in sharing and conversing with others about the tools and practices that have helped deliver the best solutions in his developer journey.