Progressive enhancement is a technique that helps to ensure your software is robust and accessible.
Start with a minimally viable version of your web design, and ensure it functions as necessary.
Then, layer extra functionality and styling, so more capable browsers can benefit.
How Does Progressive Enhancement Work?
Because of its extremely distributed nature, the web has always needed to support a huge range of devices.
At the heart of everything is HTML.
As its a forgiving language, browsers will display HTML as well as they understand it.
Typically, theyll ignore anything they dont support.
This can be useful from a developers point of view, but it can cause problems for readers.
It will be friendlier to users of screen readers andterminal-based browsers.
The principle states that, no matter what, your website should function as well as possible.
In practice, this typically applies to JavaScript.
A very common case is event handling.
Imagine a page that loads additional content on demand.
This could be a manual infinite scroll, a comment embed, or similar.
The buttonsonclickattribute contains JavaScript code that will run when somebody clicks the button.
However, if JavaScript is unavailable, this button will do nothing.
A user will be left clicking this button with no feedback and no idea of what is going wrong.
By introducing the dependency on JavaScript using JavaScript itself, you might be certain it will work.
And theres a functional default behavior that works, in the form of the standard link to/page/2.
Is Progressive Enhancement Really Necessary?
Everyone uses browsers with CSS and JavaScript, so why bother catering for a situation that doesnt arise?
Well, there are several reasons you should adopt the good practice of progressive enhancement.
A Progressive Mindset Works Wonders
Above all, progressive enhancement encourages you to adopt a content-first approach.
Progressive enhancement is just one key component of good accessibility and usability practice.
