Web Inaccessibility Guide

Posted 2024-05-17.

Leer en español...

So you tested your site on different browsers, added alternative text to your images and videos, rewrote your site using only semantic tags like <nav> and <header>, worked hard on that nice responsive design that works on every cellphone and your disabled audience can read your site with ease. Beh! It's all bollocks. I say we optimize for pain. I'll give you some ideas you can apply to exclude as many people as possible from visiting your site (besides just locking your site).

Method 1: Load everything with javascript

Excludes: Everyone who disables scripts or uses browsers without script support.

Excluding people who don't browse with scripts enabled is very easy and therefore more common than you think. One way involves simply including all your HTML inside your scripts and let javascript write it on the page for you. Design a simple HTML template and add a <div> in the page body with an id like id="lol". Your script will then do all the work:

<script>
document.getElementById('lol').innerHTML('<p>Death to the enemies of JS!</p>');
</script>

If you'd prefer to be more modern and sophisticated, follow the "single-page website model". Once again, write a basic HTML template that you'll use on your single-page website and add a script that will load a Markdown to HTML parser and another that downloads your text from some external .md file that it will then convert and write in-place.

As a devilish alternative, why not write your HTML as usual and then encrypt it with a simple cipher like base64 or rot13 for a script to decipher it as the page loads?

Unfortunately not a lot of people disable scripts so we have to get serious.

Try it!

Method 2: Use javascript to destroy the page

Excludes: Everyone who browses with scripts enabled.

The general idea of all these methods is to abuse some feature of browsers to exclude all who use them. You can modify the content of <body> by changing its innerHTML to, for example, an empty string or a message of your choice. To blank out the page, add the following code to the end of the <body> element:

<script>
	document.body.innerHTML = "";
</script>

Because almost everyone has scripts enabled, this is enough to remove most people from your page. You have plenty of other more evil options. You can easily force redirect javascript users to shock websites:

<script>
	window.location.href = "https://twitter.com";
</script>

or rapidly change the colors of the page with timers just in case you hate epileptics. Isn't javascript just great? The sky's the limit for deviousness.

Try it! (Caution: flashing background)

Method 3: Use stylesheets to make content illegible

Excludes: Everyone who browses with CSS enabled.

Huh? Disabling 99% of your possible audience wasn't enough for you? Then we can go further. You can, for example, use CSS to hide all content for people who have it enabled:

<style>
* {
	display: none;
}
</style>

Or you can use CSS 3 animations to wreak havoc. I've seen this technique used in the wild, I kid you not, by whom I assume wanted his audience to disable CSS by any means possible.

<style>
* {
	animation: lol 2s infinite;
}
@keyframes lol {
	0% {
		rotate: 0deg;
	}
	25% {
		rotate: y 90deg;
		scale: 1.5;
	}
	50% {
		rotate: 180deg;
	}
	75% {
		rotate: x 270deg;
		border-radius: 50%;
	}
	100% {
		rotate: 360deg;
	}
}
</style>

CSS 3 Media queries allow you to alter the display of the page depending on screen resolution or orientation, among others, so it's natural to use them to make your site unusable for mobile users, for example:

<style>
@media (orientation: portrait) {
	* {
		display:none;
	}
}
</style>

This hides the page if it detects that your device is in portrait mode, but you could easily make animate the contents as above or what have you.

Try it!

Method 4: Abuse backwards compatibility

Excludes: Everyone using a browser that supports the color attributes of <body> (even without CSS) and doesn't correct for bad contrast

This is the simplest method. Add the bgcolor, text, link, vlink and alink attributes to your <body> and set them to some bright annoying color like #ff00ff. If you're not already changing your site's colors with CSS, then everyone who lets their browser use page colors will only see pure magenta and won't be able to read anything.

<body bgcolor=#ff00ff text=#ff00ff link=#ff00ff vlink=#ff00ff alink=#ff00ff>

I learned this one on an old page by a Netscape hater. Given that you can also do this with CSS, it's clear that browsers don't really care if the colors that the author chose are so bad that the site can't be read.

Links is a rare example of a browser where this doesn't work because it corrects the colors of pages with bad contrast.

Try it!

Method 5: Apply the <marquee> of death

Excludes: Everyone who uses browsers based on Internet Explorer, Chrome, or Firefox (except Pale Moon) even with scripts disabled.

This one is diabolical: Enclose the content of the page in one or more <marquee> elements. Play around with the attributes that are supported by the element to cause a lot of despair. At least on Firefox a high value for scrollamount (such as 1000) is enough to make the page act as a strobe light, but I certainly invite you to be a dick like in the example... Do note that whether CSS is required to display <marquee> varies from browser to browser. 

<body>
<marquee scrollamount=1000 scrolldelay=1 truespeed>
[...]
</marquee>
</body>

In the old days the same idea was used with the <blink> tag to annoy Netscape users.

Try it! (caution: it moves fast!)

Method 6: Put all text content inside images

Excludes: Everyone with images disabled or that uses screen readers. Hell, it'll annoy pretty much everyone, frankly.

Truly, could anyone come up with anything more demonic? Design your site in an image editor and put the images on your page as-is with empty alternate text or even without alt attributes at all to make standards sleuths writhe in agony.

Is that not enough? Split your images and distribute them in tables. Add random meaningless alternate text. Let your images be animated GIFs with two frames: put the content on the first one with a short delay so it can barely be seen and make the second one blank with a long delay! Or give them both short delays so it blinks! GIFs? No... make the entire page a series of videos.

Try it!

Hopefully, dear reader, some of these ideas will help you design your sites to be outright user-hostile and bring more anguish and unhappiness to the net. Can you think of any other methods to improve despair-oriented design?

Comments? Tell me what you think in the guestbook.