Skip to main content

Training This is a not a real service, this is for training purposes only. You can give your feedback on this resource by email

Back to calendar

Day 20: Progressive enhancement for accessibility and why it matters

Progressive enhancement is a design approach that ensures everyone can access the essential content and functionality of a website, regardless of their device, browser, or abilities.

Government websites and services must use progressive enhancement, even if part of the service uses JavaScript.

What is progressive enhancement?

Progressive enhancement starts with a solid foundation of HTML to deliver content and core functionality. Enhancements like Cascading Style Sheets (CSS) for styling and JavaScript for interactivity are layered on top, ensuring that the site works for everyone even if advanced features are unavailable.

A Christmas tree analogy

Think of a Christmas tree: at its core, it’s a plain, green tree. It serves its purpose as a Christmas centerpiece (or even just a lovely piece of nature), bringing warmth and festivity into the home, even if it’s undecorated.

The tree itself represents the core HTML—a solid, functional foundation that everyone can enjoy.

The decorations and lights are like CSS, making the tree visually appealing and festive but not essential.

The twinkling lights or ornaments that play music are like JavaScript—nice enhancements that bring interactivity and extra magic, but if they stop working, the tree is still functional and beautiful.

two Christmas trees, one is undecorated in a pot with a robin sitting on it, the other is fully decorated with tinsel, baubles and lights.

Why it matters for accessibility

Progressive enhancement matters for accessibility because it:

  • ensures universal access, especially for users on older devices or with limited internet connections
  • makes websites compatible with assistive technologies like screen readers and braille displays
  • provides a reliable experience even if CSS or JavaScript fails
  • improves resilience to browser and technology disruptions

JavaScript and accessibility

JavaScript is a programming language that allows developers to create interactive webpages and applications. If implemented correctly it can enance accessibility but only if people can access it.

Why JavaScript can be accessible but isn’t always available

JavaScript can make websites more accessible by:

  • creating dynamic, interactive features like pop-up alerts and form validation
  • improving usability for users with disabilities when combined with proper ARIA (Accessible Rich Internet Applications) roles

However, these enhancements depend on users being able to access JavaScript. If it fails to load or run, users are left without these improvements—and in some cases, without basic functionality.

For example:

  • If a JavaScript-powered button doesn’t fall back to a standard HTML <button>, keyboard-only users might be unable to activate it
  • If an accessible form validation feature relies entirely on JavaScript, users without JavaScript will never know if their input is valid

Why JavaScript can fail to run or load

JavaScript can fail to load or run for many reasons beyond the control of users, such as:

  • temporary network errors
  • third-party browser extensions like ad blockers
  • third-party supplier downtime, such as issues with content delivery networks (CDNs)
  • DNS lookup failures
  • bugs introduced by browser updates
  • bugs introduced by third-party JavaScript running on the same page
  • corporate firewalls blocking, removing, or changing content (for example, in banks or government departments)
  • mobile network providers changing content to speed up load times or reduce bandwidth usage
  • personal firewalls or antivirus software blocking or altering content
  • unsecure connections, where internet providers insert their own code that conflicts with your page

If your website relies entirely on JavaScript without providing a fallback, users could be left unable to interact with it.

Additionally, some users may deliberately turn off JavaScript in their browsers for privacy, security, or performance reasons. You should respect their decision and ensure that your website remains functional without JavaScript.

Challenges with single-page applications (SPAs)

Single-page websites or applications dynamically update content without reloading the entire page, While this improves performance and interactivity, it can create barriers for users with disabilities and are generally not recommended for government or accessible web services for the following reasons:

  • users of assistive technology would be unaware of changes in context, for example, when moving to a new page. SPAs load new content dynamically without a full page refresh, meaning screen readers and other assistive technologies may not detect the change.
  • focus management is often not handled properly when moving between pages this can make it difficult for keyboard users and screen reader users to navigate the page effectively and could lead to confusion about where they are on the site.
  • navigation becomes problematic as users may be unable to use the back or forward buttons in their browser to revisit previous pages. This can also affect users who rely on browser history for navigation.
  • error recovery can be difficult especially if there is an interruption to the network connection or other technical issues. Without full page reloads, users may struggle to recover from errors or lost states within the application.
Make sure JavaScript builds on HTML. When implemented well, JavaScript can enhance accessibility. But always start with a solid HTML foundation and ensure the website remains functional even if users cannot access JavaScript.

A festive example: progressive elf-hancements

An elf holding a toy car next to a stack of presents

Imagine a toy car, you pull it back, release it, and it zooms forward. This basic functionality is reliable and doesn’t require additional components like batteries. Everyone can play with it as long as they know how to pull it back.

Now imagine the car has an optional battery-powered feature. With batteries, it can drive forward automatically, light up, or even make sound effects. These features are exciting and add extra fun, but they aren’t essential to the car’s main purpose: to roll forward when you interact with it.

Similarly, in progressive enhancement:

  • the pull-back functionality represents core HTML, the basics it needs to function
  • the battery-powered features, like lights and sound, are like CSS and JavaScript—enhancements that add value but aren’t essential

How to apply progressive enhancement

To apply progressive enhancement:

  • start with clean, semantic HTML for core content and functionality
  • use CSS to enhance the visual experience without compromising usability
  • add JavaScript for interactivity, but ensure non-JavaScript fallbacks are available
  • test your site with tools and techniques for accessibility
By embracing progressive enhancement, you create a robust and inclusive web experience that works for all users, no matter their circumstances.