The Relationship Between Page Speed and Accessibility

Performance and accessibility are often treated as separate concerns, but they're deeply connected. A fast website is more accessible, and accessible design patterns often improve performance.

How Speed Affects Accessibility

Assistive Technology Users

Screen readers and other assistive technologies must process the DOM:

• Large DOM → slower screen reader navigation
• Heavy JavaScript → delayed content announcement
• Layout shifts → screen reader loses position
• Slow loading → timeout issues with assistive tech

Users on Low-End Devices

Accessibility isn't just about disabilities:

• 65% of the world uses low-end mobile devices
• Many users have older hardware that struggles with heavy JavaScript
• Rural areas have slow, unreliable connections
• Data-capped plans penalize heavy pages

Cognitive Accessibility

Slow, janky websites create cognitive burden:

• Loading spinners increase anxiety
• Layout shifts are disorienting
• Slow interactions feel broken
• Heavy pages drain battery (especially important for powered wheelchair users)

How Accessibility Improves Performance

Semantic HTML Is Lighter

<!-- Inaccessible AND heavy -->
<div class="btn" onclick="handleClick()" role="button" tabindex="0"
     onkeypress="if(event.key==='Enter')handleClick()">
  Click Me
</div>

<!-- Accessible AND lighter -->
<button onclick="handleClick()">Click Me</button>

Semantic HTML:

• Requires less JavaScript (built-in keyboard handling)
• Generates simpler DOM (fewer wrapper divs)
• Needs less CSS (browser default styles work)

Alt Text Prevents CLS

<!-- Missing alt + dimensions = CLS + inaccessible -->
<img src="photo.jpg">

<!-- Alt + dimensions = no CLS + accessible -->
<img src="photo.jpg" alt="Team photo at the office" width="800" height="600">

The width and height attributes that prevent CLS also help screen readers understand image dimensions.

Reduced Motion Improves Performance

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Respecting prefers-reduced-motion:

• Reduces CPU usage (fewer animations)
• Reduces battery drain
• Improves TBT (less main thread work)
• Helps users with vestibular disorders

Skip Navigation Reduces Interaction Delay

<a href="#main-content" class="skip-link">Skip to main content</a>

Skip links help keyboard users navigate faster — this is both accessible and performant (fewer tab stops before main content).

Overlapping Lighthouse Audits

Many Lighthouse audits improve both performance and accessibility:

Audit	Performance Impact	Accessibility Impact
Image alt text	Prevents CLS (with dimensions)	Screen reader support
Heading hierarchy	Better document structure	Navigation landmarks
Color contrast	N/A	Visual accessibility
Link text	N/A	Screen reader context
Image dimensions	Prevents CLS	Layout stability
Font sizing	Reduces CSS	Readability
Reduced motion	Reduces CPU work	Vestibular disorders
Semantic HTML	Smaller DOM	Assistive tech support
Keyboard navigation	Less JS needed	Motor disability support

Best Practices for Both

1. Use Native HTML Elements

Native <button>, <input>, <select>, and <a> elements are both accessible and lightweight. Custom components require additional JavaScript for accessibility.

2. Optimize Images Properly

<img 
  src="hero.webp" 
  alt="Developer working on performance optimization"
  width="1200" 
  height="630"
  loading="eager"
  decoding="async"
>

This is both performant (proper format, dimensions, decoding hint) and accessible (descriptive alt text).

3. Ensure Content Works Without JavaScript

Progressive enhancement ensures:

• Content is available to all users (including assistive tech)
• Page is usable on slow connections before JS loads
• SEO crawlers see full content

4. Test on Real Devices

Test on:

• Low-end Android phones (performance)
• Screen readers (accessibility)
• Keyboard-only navigation (accessibility)
• Throttled network (performance + accessibility)

Lighthouse Scores Comparison

Approach	Performance Score	Accessibility Score
Page builder + no a11y	25-40	60-70
Custom code + no a11y	60-80	70-80
Custom code + a11y focus	70-90	90-100
Semantic HTML + optimized	85-100	95-100

Monitor Both Performance and Accessibility

BadPageSpeed tracks your Lighthouse performance scores. Pair it with accessibility testing for a complete picture.

Monitor your performance →