Progressive Enhancement
Derived from the U. S. Web Design System Design Principles.
When creating web pages, the only part that you can rely upon is HTML. Briefly, each extra layer (images, styling, behaviour, video, audio) of the page are optional. If you build pages with the idea that parts other than HTML are optional, you will create a better and more robust web site. This attitude is called progressive enhancement.
First, just make it work
Any new page or feature should work with HTML only. No images, no CSS, no JavaScript; nothing but HTML. The only interactive elements are those implemented with forms and server-side processing.
HTML-only gives a baseline experience which will allow your site to work for as many people and devices as possible, including older, legacy browsers and devices.
Second, make it work better
From the HTML-only baseline, extra layers can be added. You can add images, or apply advanced styling. Interactions can be made smoother and faster without the need to refresh the entire page. Validation of submitted data can be performed before it hits the network. Charts and data tables can be turned into visualizations with interactive elements.
However, it is important that each addition is seen as just that: an addition. Something extra that the more modern browsers are capable of delivering on top of an already accessible and usable experience.
It isn't about "JavaScript off"
A common misunderstanding is that this is about a conscious choice made by the reader, which we can ignore or treat as an error or mistake. That is false. It isn't a case of "just fix your browser."
There are many scenarios where the extra layers can fail to load, including temporary network errors and DNS lookup failures. The server that the resource is found on could be overloaded or down, and fail to respond in time or at all. Your reader might pass under a bridge or out of range of a satellite.
On top of failures there is deliberate filtering of the internet. Many large institutions (e.g., banks and financial institutions, some government departments) have firewalls that block, remove, or alter content from the internet. Mobile network providers have been known to resample images and otherwise alter content in order to make the load times faster and reduce bandwidth. Some antivirus and personal firewall software will alter and/or block content.
And, of course, there are people who do turn off features in their browsers deliberately. We should respect their decision and still provide them with a usable and useful service.
It isn't only about JavaScript
Another common misunderstanding is that progressive enhancement is only about JavaScript. Anything more than HTML is an enhancement and should be treated as such.
Adding an image to a page requires suitable alternative text (and may also need a longer description) for people with visual impairment, and for when the image fails to load.
Styling cannot be the only method by which information is shared. "Text in bold" is not enough when you can't differentiate bold from normal text. "Red items are required" is not enough when you don't have the colors applied, cannot see the colors, or cannot distinguish them because of color blindness.
Video and audio without transcripts and/or subtitles are unsuitable for hearing impaired people. Information appearing in a video in a visual-only form (e.g., a question then answered by the people on screen in an interview) is unsuitable for people with visual impairments.
Making an interactive element that requires a mouse (e.g., a hover effect, a drag and drop operation) is unusable by someone who only uses a keyboard or a touch-only device such as a smartphone or tablet.
Further reading
The following links exit the site
- USWDS Design Principles
- Progressive enhancement on Wikipedia
- Understanding progressive enhancement on A List Apart
- For a Future-Friendly Web on A List Apart