Skip to content Accessibility

CSS Naked Day 2021

My first CSS naked day and why semantic HTML is important.

Today is CSS naked day! For 24 hours my website is unstyled – that is without any author stylesheets.

Screenshot of the Git diff deleting 3 lines of code.
Git commit temporarily removing CSS from this website.

The only CSS present is the user-agent stylesheets defined by your browser.

Screenshot of my homepage without any CSS. Black text and blue links on a white background.
The homepage of callumhart.com without any authored stylesheets.

Why do this? #

Removing CSS reveals the content hierarchy embedded within the HTML.

Good HTML, known as semantic HTML is very important for accessibility. Picking the appropriate HTML element for a given piece of content goes a long way for assistive technologies such as screen readers.

Screen readers aren't the only beneficiaries. If our CSS fails to load all users will appreciate our deliberate selection of HTML. Non-human users such as web crawlers and RSS readers will also have an easier time digesting our content.

In short: Semantic HTML surfaces the most important content, whilst facilitating progressive enhancement.

About the author

I'm Callum, a Front-end Engineer at Nutmeg. Previously I wrote code for KAYAK, American Express, and Dell. Out of hours I publish blog posts (like this one) and tweet cherry-picks.

Feel free to follow or message me at @_callumhart on Twitter.