Ultimate Motherfucking Website

Seriously, none of you can write valid and Accessible HTML?

Just a few Semantic HTML elements and a tiny bit of WAI-ARIA is all it fucking took to turn your shitty site into a fully accessible one.

Did any of you even run an automated accessibility checker when you built your sites, no I thought not. Never mind taking the time to learn about accessibility for the 60% of errors accessibility checkers can't find.

The web is not inherently accessible as it is built by people and people don't take the time to learn this shit. We have all the tools to make the web accessible, you just have to use them!

Oh and I fixed the CSS so that the critical styles are inlined (which is all of them on a tiny site like this). You know, like you are supposed to.

This meant I could add a total of 25 CSS properties (still way less than 14kb, not that you would know why using that as a rough guide for size is important). It gives the site a little bit of visual appeal and structure. Still lightning fast, in fact it is faster than the "perfect" site.

I did even more things:

I fixed your shitty line spacing, not one of you got that right! Your heading and paragraph spacing were all fucked up
Now it is nice on all screens, instead of being pressed up against the side on a mobile
Still looks great in all your shitty browsers, yes even Internet Explorer 7!
Still won’t bleach your fucking eyeballs at night if your modern browser thinks you like dark things. But now the dark theme colours are less boring.
The motherfucker’s ~~still~~ actually accessible to every dick head that visits your site.

A little more accessibility

Well done, one of you finally added a lang attribute to the HTML.

But why on Earth are you not using sectional elements? Go read up on <main>, <aside>, <footer> etc.

Oh and by the way, I also added the following accessibility features:

I made sure acronyms were explained the first time they are used, see the fucking Glossary
I used semantic HTML for things like the published date etc. because I am not an amateur like you fuckers seem to be.
I labelled the sections of the document using WAI-ARIA (aria-labelledby) to make life easy for people who use a screen reader.
I used REM units for the fonts, so they change correctly according to user preference - are you lot from 1990 with your fucking pixels (px)?

You know what, go read my fucking article 101 Digital Accessibility tips and tricks, it looks like you need some fucking guidance.

To my knowledge this site is WCAG AA compliant, valid HTML, valid CSS...it is just fucking magical basically.

Why not follow best security practices?

Look I get it, this is a simple static site so security headers won't do much.

But seriously, your websites were meant to be an example of how websites are meant to be when done properly, so why not include them and lead people to the light?

Here, this site score 120 out of 100 (yup, we got bonus points as we are that fucking great!) in Mozilla Observatory

For the sake of a few minutes work why not make your site as safe as possible and get into the habit?

A fucking glossary of terms

Why do you assume that everyone knows what abbreviations mean?

What about people who struggle with association? What about people with poor memory? What about people who are new to development (as accessibility doesn't have to be about people with disabilities you know!)

You should always describe abbreviations the first time you use them in an article.

Sure you could use the <abbr> element, but it is shitty, so why not provide a glossary?

Look I even added it in a <dl> element so it is semantically correct. Not that I expect any of you to know what a <dl> element is after seeing your shit show of an attempt at writing a website.

Abbreviations and explanations

HTML

short for Hyper Text Markup Language, previously used by a load of amateurs to poorly structure their web page. Used to perfection here.

CSS

short for Cascading Style Sheets. Use to make the site look less ugly. Unfortunately it is also used by amateurs who fuck everything up and make the web less accessible.

WAI-ARIA

short for Web Accessibility Initiative - Accessible Rich Internet Applications, used to make stuff accessible for everybody. That is probably why you have never heard of it, you don't care about people with disabilities now do you?

short for JavaScript. Some people try and make the web less boring using this programming language, but we didn't do any of that here as we are trying to prove a point!

A screen reader converts the HTML on the page into speech or text with additional context for people who use assistive tech. The HTML, WAI-ARIA and to some extent the CSS used on a site can have a big impact on people who use assistive technology and you end up adding unnecessary barriers if you code it poorly, just like all the other crappy motherfucking websites before this one.

REM units

R stands for Root (as in the document root). "EM" doesn't stand for anything and nobody seems to know what it actually means in a way you could possibly use, but 1rem is 16px by default and that is enough information for now surely? Here, go read about REM units here.

WCAG

short for Web Content Accessibility Guidelines. Basically a set of guidelines on how to make your website accessible. The "AA" part just refers to the level of compliance, "AAA" being the best. WCAG is a bit wordy but all the documentation is there, so what is the fucking excuse? Go read some of it now!