Progressive Enhancement can mean different things to different developers. To me, it means building in a way that doesn’t lock out devices or browsers from consuming the primary content of a site. Let’s get into some specifics.
The short list
Start with semantic HTML
HTML5 introduced a number of semantic elements (header, footer, main, etc.) to complement those that already existed. Some items to keep in mind:
- Use only one
<main>element, which should wrap the primary content of the page - Only use one H1. The w3c updated it’s recommendation this year. Regardless of sectioning, you should only use one H1
- Place your primary header and footer inside
headerandfooterelements - Save the
navelement for your primary navigation. Not every list of links is a nav.
Use ARIA landmarks
Even though the W3C Validator gives a warning stating it’s not necessary, some accessiblity experts I’ve talked to believe we should (at least for now) still be adding ARIA landmark roles to semantic HTML 5 elements such as ‘header’ and ‘main’. They can help assistive devices get around your site in an efficient way. Check out the w3.org docs to get started.
Include skip links
Skip links provide quick navigation to keyboard and assistive device users. Make sure they’re near the top of your page.
Test keyboard navigation
Not all accessibility issues are due to visual problems. There are a lot of users out there that either rely on (or prefer) to navigate without a mouse. Make sure the tab order makes sense, and that menues, including drop-downs, are navigable via keyboard.
All tasks can be completed with js off (or broken)
Even though it may seem most users have javascript on, it’s not safe for developers to assume so. Shoddy network connections can often cause requested resources to fail. If those failed requests include some or all of your javascript, the user could be left an unusable website. And as mobile becomes even more ubiquitous as time goes on, we should remember browsers such as Opera Mini that have somewhat limited javascript support.
Build mobile first
By starting with mobile styles and adding layout with media queries, browsers that don’t support advanced layout (be they Flexbox or CSS Grid) should still get a perfectly readable site.
Don’t forget about performance
Believe it or not, performance, accessibility, and progressive enhancement are all very closely related. Slow and bloated sites can fail to load on some mobile devices. Use srcset to layer on larger images, but use small, highly optimized images by default. For background images, provide multiple versions so mobile devices aren’t loading 2000px wide full-width background images.
It’s all in the approach
By building with progressive enhancement, not only will underpowered and/or old browsers still be able to read your content, but if something goes wrong with the network connection, your site will still be usable. Us developers need to constantly remind ourselves that not everyone is like us, with new phones, powerful laptops, blazing internet connections, and large external screens. By using progressive enhancement with a focus on performance, you may open up your site/product to a whole new audience.