Web Inaccessibility Guide
Posted 2024-05-17.
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.
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.
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.
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.
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?