◆Error Codes Wiki

Browser Accessibility Errors — ARIA, Color Contrast, and Screen Reader Issues

Warningweb development

Overview

Fix web accessibility errors detected by browser tools including missing ARIA labels, insufficient color contrast, focus management, and keyboard navigation issues.

Key Details

  • Accessibility audits in Lighthouse check for WCAG 2.1 compliance (Level A, AA, AAA)
  • Common issues: missing alt text on images, insufficient color contrast, no focus indicators
  • ARIA (Accessible Rich Internet Applications) provides attributes to make dynamic content accessible
  • Screen readers (NVDA, JAWS, VoiceOver) rely on semantic HTML and ARIA for navigation
  • Keyboard navigation must work for all interactive elements (links, buttons, forms)

Common Causes

  • Images missing alt attributes (or empty alt for decorative images not marked correctly)
  • Text color contrast ratio below WCAG minimum (4.5:1 for normal text, 3:1 for large text)
  • Custom interactive elements (divs used as buttons) missing role and keyboard event handlers
  • Focus trapped in modals or not returned to the trigger element after modal close
  • ARIA misuse: using aria-label on non-interactive elements or conflicting roles

Steps

  1. 1Run Lighthouse accessibility audit: DevTools > Lighthouse > check Accessibility > Generate report
  2. 2Use Chrome's built-in accessibility tree: DevTools > Elements > Accessibility pane
  3. 3Check color contrast: DevTools > Elements > select text > Styles panel shows contrast ratio
  4. 4Test keyboard navigation: press Tab through the page — every interactive element should be reachable
  5. 5Test with a screen reader: macOS VoiceOver (Cmd+F5), Windows NVDA (free download), Chrome screen reader extension
  6. 6Fix common issues: add alt text, use semantic elements (button, nav, heading), ensure color contrast meets 4.5:1

Tags

accessibilityariawcagcolor-contrastscreen-reader

More in Web Development

browser-cors-error-explainedBrowser CORS Error Explained — Cross-Origin Request Blocked
Warning
browser-websocket-errorsBrowser WebSocket Errors — Connection Failed, Closed & Protocol Errors
Warning
browser-indexeddb-errorsBrowser IndexedDB Errors — Quota Exceeded, Blocked & Corruption
Warning
browser-localstorage-quota-exceededBrowser localStorage Quota Exceeded — Storage Limit & Alternatives
Warning
browser-service-worker-errorsBrowser Service Worker Errors — Registration, Cache & Update Failures
Warning
browser-webgl-context-lostBrowser WebGL Context Lost — GPU Rendering Failure in Browser
Warning

Frequently Asked Questions

WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold). AAA requires 7:1 and 4.5:1 respectively. Use Chrome DevTools color picker which shows the contrast ratio.