totally nerdy WWW guidelines for the paranoids

### do as little colorizing as possible

The best color is you don’t give it a color. This is how you make sure it looks perfect under every client side configuration. Even the minimalist paranoids may screw this up. ¹

The best colorscheme is no colorscheme. Leave the job to the client side.

### do not use a tailored `<div>` if html element does the job

div has no semantic meaning. It’s just an arbitrary thing that is linked to a style via its class, id or selector. This makes it harder for screen readers to parse the page – the screen reader doesn’t digest the page as you do, it needs to understand the page structure. If it sees a <h1> it knows here starts a chapter. If it sees a <strong> it knows something is emphasized. It doesn’t know your title unless you put a <title>. All of these matter to a visually-impaired person. And there ain’t too many of them to learn².

The second point is, while the html elements are well-defined in the W3C specifications and well supported by most (even TUI based) browsers, your homebrew <div>s are not.

Continuing on the last point.

at least try to access your site with a screen reader : and it will turn out to be total crap; be ashamed.
If you have time, please check out the ARIA³ labels.

### never use a dark theme

This may hit like a hot take. Many “geeks” are obsessed with the dark theme. I agree that dark mode is cool. And I strongly agree that black-on-white can be painful to read in dark environment – that’s why I have the Dark Reader plugin in my browser.

That said, from the accessibility perspective, it’s not up to you, the site owner, to decide whether to present dark or light theme, or anything in between. There are people who prefer dark mode and there are people who prefer otherwise. However, while it’s trivial to turn a light-themed page into dark mode, it’s not easy to do the other way around with a browser plugin.

As said in the first point: do as little theming as possible and leave the decision to the client side.

### sanity check: is your page readable in w3m?

Just open your site from a terminal browser like w3m or lynx. If the site is barely readable, your site is broken.

Even worse, if your site require JavaScript to work properly, your site is totally broken. Of course there are applications where JS is indeed needed. I’m not denying those. But at least you should have a <noscript> alt text.

### sanity check II: try no-style

CSS (and in some cases, JavaScripts) are there to make things look better, not to make a broken piece of shit tolerable. Now (if you are using firefox), go to menu - view - page style - no style. Is your site totally broken?

If yes, you need to relearn html.

### serve assets yourself

This is simple: if your site need a specific font, a style sheet, or (:frown) a script, serve them locally. Do not let me fetch trivial stuffs from a 3rd party.

There may be exceptions for media files due to bandwidth and storage limits. If you have to use CDNs, object storage etc. Make sure you are not accidentally tracking yours users.

### put alt text in the content body, not as media attribute

This is my personal take. While it’s a politically correct (in a positive tone) to use alt text, many people use it in a way that bothers me.

Like, people post an image on social media with no comment at all what they mean by sharing this image. Understanding an image is somehow subjective, everyone can draw their conclusion and it’s very likely different than that of the people who post it.

On the other hand, they are well behaved netizens who write thorough alt text… Which is more than just descriptive! It’s really bizarre that even people who can see the media need to click into the alt text to understand what it’s about.

What about, simply put your alt text EXPLICIT, so that everyone can just see it?

shrik3 says 2 mins ago:
-----------------------
hahaha. [image]

alt text: // what the image is about //

This also (potentially) makes it easier for a blind person to read your story: they are reading a full story from top to the bottom, instead of having a clueless text with few attached images and forced to check for the alt text.

If the image is contextual (like those on the news) it can be helpful. But literally, what’s the fucking point of a decorative banner image? It’s there only to waste space and bandwidth. It doesn’t make your post look better, it doesn’t help the reader to grasp the idea or to understand your content…

Also, I’ll fart in your general direction, if you use AI-generated banner image.

### hyperlinks

The problem of a hyperlink like this is that there is no indication to the slightest where it could lead to (unless you inspect it before you click, but how many people are bothered to do so?). I suggest at least not using a link text “like this”, “here”, “an example”.. Use something more descriptive. And use footnotes if you can.

More dangerously, the hyperlinks could hide tracking elements if the author is ignorant, or even phishing attempts if the author is malicious.

Does this link lead to where it claims?
https://google.com

<a href="https://phishing.example.com">https://your-bank.example.com</a>

Actually this is one thing on my WWW wishlist: if a hyperlink looks like an URL, it should point to exactly what the text says.

### broken links are terrible

It’s frustrating to follow a reference link only to find the server is down or the page is gone. There are two things you can do:

link to a page snapshot from the internet archive. If the page you are referencing is not yet archived, just request it.
always include the full title and author in your reference (e.g. in the footnote). If it is from a publication, use proper bibliography format.

### don’t tell me what font to use

Perhaps you could specify font families like monospace, serif .... But don’t tell me which exact font I should use to read your text, unless that page is essentially aesthetics oriented⁴

### specify a license

…

### HTTPS

Do I need to elaborate on this one?

### more

Color Encoding is Ableism /take/#color-encoding-is-ableism
this is a motherfucking website http://motherfuckingwebsite.com/
this is a better motherfucking website http://bettermotherfuckingwebsite.com/
this is the best motherfucking website https://bestmotherfucking.website/

https://github.com/KeenRivals/bestmotherfucking.website/issues/76 ↩︎
https://www.w3schools.com/TAGs/ ↩︎
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA ↩︎
one positive example I could think of is the oldschool pc fonts site: https://int10h.org/oldschool-pc-fonts/ .. Because why not! Also I have a few pages that uses nerdy styles like my about page … ↩︎

[+] click to leave a comment [+]

the comment system on this blog works via email. The button
below will generate a mailto: link based on this page's url 
and invoke your email client - please edit the comment there!


- keep the subject as is!
- plaintext email only
- email address will NOT be disclosed
- comments will be made public; specify otherwise if you don't.
- to take down a comment, request via same email or signing key
- optionally, specify a display name (default anonymous)
- optionally, encrypt the email with my public key
- optionally, sign your email

>> SEND COMMENT <<