Do Hackers care about Accessibility? 👹

This is the story of my first website ever. It had all the cool turn-of-the-century features you could wish for. A guest book, visitor number statistics, probably at some point it had one of these under construction signs that everyone loved so much. There wasn’t really anything you could do on my website except for writing into my guest book or checking my visitor number statistics. It was useless.

Still, I loved it. Every day, when I returned home from school, I turned on my computer to check my website. Did anyone leave a guest book entry? What about them visitor numbers? Like I said, this was all you could do.

Blissful

I don’t even know why anyone would have left a guest book entry. The only people that knew about the site in the first place were my friends. They could have just written me on MSN, ICQ or any of the other hip messaging tools of the day (SMS was also big). But these were the early 2000s, so writing an online guest book entry was probably the coolest way to send a message!

Obviously, my visitor numbers kept rising. Mostly of course, because I myself was visiting my own site several times a day. But that was beyond the point. They were rising.

No matter how useless it was. It was my own personal website. I had my own domain! I built it myself with a Content Management System that was the shit back then (Joomla!). At least I thought it was the shit.

Nothing compares to looking at what you've built and thinking to yourself "I made this". Pure bliss.

The darkest day of my first website (literally)

One day I returned from school to follow my usual routine of checking my guestbook and visitor numbers. I turned on my computer. I opened my browser. I entered my domain name into my browser’s address bar. I expected to see my beautiful, very retro web design but saw something else. The background color of my website had been changed to the darkest black imaginable. The link to my guest book was gone. The visitor statistics were removed. An ominous music started playing in the background.

This might sound like I'm narrating a movie plot when all of a sudden this music sets in and I realize that my dreams have been shattered. But I mean this literally. When I opened my website, this weird music started playing.

I got hacked

In the center of the website was an image of a little devil in cartoon style. It had a horrible smirk on its face that seemed to say “I got you”. The little devil was sitting on a headline that simply said “Hacked”, followed by a text saying “L3oN Was HerE” in mixed casing. Below that was a paragraph of a language I couldn’t identify, again in mixed casing.

After the paragraph was a small icon of a crown, followed by what seemed to be the name of my hacker. They were even polite enough to leave their email address. Maybe they were thinking I could reach out, in case I wasn’t happy with their services of hacking my precious website. All the text that the hacker left, was in mixed casing. What’s up with that? I remember it was a common theme among conspiracy theorists in the days of COVID-19.

Seems like hackers of the 2000s were into it too.

Accessibility audit of my hacker’s web design

Ok, I figured why not make a little accessibility audit of the website that this hacker designed for me and replaced my personal website with? If you want to follow along my observations, feel free to visit the only snapshot of my website on The Wayback Machine.

Unfortunately there’s no way to find out what my website looked like in the good days, before it was hacked. No way to glance one last time into my lovely little guestbook.

In case you believe that such a plain and simple website with an image and a bit of text should be accessible out of the box, you’re wrong. So very wrong.

Page Language

Judging from the page’s title “OwnZ By L3oN”, the text of the image and the paragraphs I would believe that the default language of the website should be in English.

They could have set the language properly which helps screen readers pick the correct language setting.

<html lang=”en”>

There’s one paragraph that is written in another language. I figured out it’s Turkish. This part needs to be marked up accordingly so that screen readers can switch their language settings.

<b lang=”tr”> MilleTin DERdi BEN BEn OLMUşUM DEmekkİ ZAmaNıNDA İYi KOYmuŞUm</b>

Text readability

In general the white text on the black background has a high contrast and is very readable. Nice.

Text readability really suffers though because of the mixed casing. That could be further improved.

<b>Milletin derdi ben ben olmuşum demekki̇ zamanında i̇yi koymuşum</b>

Image alt texts

The website used 2 images, none of which had alternative text present. Depending on screen reader, the image would either be announced as "image" without further information or its filename would be read out.

Let's start with the little devil sitting comfortably on the "Hacked" headline. When I focus the image with my screen reader it just reads "unssstitled1cn1.jpg". Not very descriptive.

Here is my improved version:

<img src="media/unssstitled1cn1.jpg" alt="The word hacked in upper case letters with a little red cartoon-style devil sitting on the letter C">

Another image has been used. It appears next to what seems to be the signature of the hacker. It's a little crown icon. My screen reader just reads "tacgt3.png". This icon is only decorative and doesn't really convey any meaning. Using an empty alt tag on the image, this icon will just be ignored for screen readers.

<img src="media/tacgt3.png" alt="">

Title

Let's now look at the title of the page. What is it about? Right now it only says "OwnZ By L3oN". I think I could have better identified what has happened to my website if the title had been clearer.

After all, this is the name of the browser tab.

<title>Your domain was owned by L3oN</title>

Landmarks

Apart from that, the website doesn't really have any landmarks. There isn't a lot of content, but still I believe that landmarks could make the whole experience a bit more charming. If we added at least a main landmark that wraps around the entire content, screen reader users would be able to skip to the beginning of the content, in case they want to read it again.

<main>
    <img ...>
    <p>L3oN was here</p>
    ...
</main>

We can add even more landmarks. The signature of the hacker could easily be put into a <footer> element, and the music controls could also be its own thing. As they don't relate to the main content, I would put them into an <aside>.

Horizontal line

Following the first text "L3oN was here" is a horizontal line in green that is supposed to be a stylistic element. They actually implemented this line by inserting several underscore elements. My screen reader actually reads them as "underscore, underscore, underscore". Using the <hr> element seems tempting. This element has been historically used to insert a horizontal line, these days it actually has semantic meaning.

According to the MDN Web Docs on hr it can be used as a "thematic break". Let's face it, the hacker wasn't really creative when it comes to content. They only meant to say "I was here, hacking your website", added some drama to the scene using this spooky piece of music, added a quote and left with their email address.

So theoretically, the horizontal line is a thematic break. They wanted to compliment their message with a nice quote. It doesn't relate to the actual content, so I think it's quite suitable here.

Table-based layout

I noticed that the whole content was wrapped in a table. Tables were a quite popular layout technique of the early web. Semantically though this hurts.

So get rid of all the tables when it comes to layout!

Audio

What really annoyed me when I first witnessed the hack was the music that started playing without my consent. That's definitely a bad practice! There is no way to stop the music. Audio controls can really improve the experience.

<audio> elements can be wrapped within <figure> elements to represent "self-contained content". A fallback for browser that don't support the <audio> element is also quite convenient. Thanks again, MDN Web Docs on audio.

<figure>
    <figcaption>Play ominous music</figcaption>
        <audio controls="" src="media/ghost-town-dark-melody-loop.wav">
            <a href="media/ghost-town-dark-melody-loop.wav">Download ominous music</a>
        </audio>
</figure>

Accessible hacking

I really regret that I haven't reached out to the hacker back then. Today I would ask them "why?". Why did you have to do that? I loved that website. Sometimes I like to tell myself that this traumatic experience is the reason why it took me almost two decades to build another personal website.

Unfortunately, the email address doesn't work anymore, so I can't reach out to interview them.

If you want to check out the accessible version of the hack I have built while writing this blog post, feel free. If you want to make it even more accessible you can contribute on Github. Especially, since I'm a real CSS noob.

Someone hacking your website could at least have the decency of making their hack as accessible as possible. But hackers probably have more important things to do...