Universal Accessibility: The Power of Progressive Enhancement
The web was designed to be a universally accessible and expressive platform, regardless of hardware, software, network infrastructure, language, culture, geographical location, or physical and mental capability. To achieve this, we need to ensure that our web applications are usable on as many browsers as possible. This is where progressive enhancement comes into play.
What is Progressive Enhancement?
Progressive enhancement focuses on the experiences of users across different devices, ensuring that they can get the value they desire from your website regardless of the device they use. It involves building an application at a base level of user experience and then adding functional enhancements when a browser supports it.
The Importance of Content
With progressive enhancement, the focus begins with the content. When the content is made readily available before additional features and enhancements are added to it, a lot more users can get more value from your website regardless of their devices. This approach ensures that users can access the content even when CSS and JavaScript are not available.
How Progressive Enhancement Works
A popular analogy to describe progressive enhancements is that of the Peanut M&M. The peanut is your content, the chocolate coating is your presentation layer, and your JavaScript is the hard candy shell. In web development, the layers include your HTML, CSS, and JavaScript.
<html>
<head>
<title>My Website</title>
</head>
<body>
<p>This is my content</p>
</body>
</html>body {
font-family: Arial, sans-serif;
}document.addEventListener("DOMContentLoaded", function() {
// Add JavaScript functionality here
});The Benefits of Progressive Enhancement
Progressive enhancement helps you to plan out your application as a functional system with the content as the priority, enabling you to build a stable application that should work on any device and browser, even those you are not aware of. It also improves performance by prioritizing your content, ensuring users can begin to use your website as fast as possible. Additionally, progressive enhancements involve using semantic HTML to mark up your content right from the start, ensuring that your content is always served and can always be read by search engine crawlers and screen readers.
Techniques for Progressively Enhanced Websites
- Separate styles from markup: Avoid inline styling and use external CSS files instead.
- Use unobtrusive JavaScript: Separate behavior from markup and move your JavaScript to external files.
- Preload fonts: Set a system font as default and then change to a web font when it is done loading.
- Use responsiveness and media queries: Present the same content in different layouts.
- Lazy load images progressively: Include a fallback
<img>element within a<noscript>tag. - Use feature detection: Check if a feature exists before loading scripts or carrying out specific actions.
<img src="image.jpg" alt="Image description">
<noscript>
<img src="fallback-image.jpg" alt="Image description">
</noscript>if ('geolocation' in navigator) {
// Geolocation is supported, proceed with geolocation-based functionality
} else {
// Geolocation is not supported, provide an alternative
}