Performance and Accessibility – Friends, Not Foes

When fast and accessible align

The Shared Goals

Performance and accessibility both want:

• Clean, semantic HTML (smaller, faster, more meaningful)
• Logical loading order (critical content first)
• Reduced JavaScript (less to download, parse, and break)
• Progressive enhancement (works for everyone, enhanced for some)

When They Conflict

Lazy loading images:

<!-- Good for performance, needs accessibility consideration -->

<img src="placeholder.jpg"

     data-src="real-image.jpg"

     alt="Description of image"

     loading="lazy">

Make sure your lazy loading:

• Doesn’t break keyboard navigation
• Provides appropriate alt text immediately
• Doesn’t cause layout shift

JavaScript-heavy interactions:

Instead of:

// Everything in JavaScript

div.addEventListener('click', complexThing);

Try:

<!-- Progressive enhancement -->

<form action="/submit" method="POST">

  <button type="submit">Submit</button>

</form>

<script>

// Enhance if JavaScript available

form.addEventListener('submit', (e) => {

  e.preventDefault();

  // Fancy Ajax stuff

});

</script>

Works without JavaScript. Better with it.