Accessible Web design

We greatly enjoy browsing personal websites. However, we often notice a lack of thought from their Webmasters when it comes to browsing the Web in a way different than their own.

Over our time on Neocities, we learned a lot about Web accessibility and why it matters. We firmly believe the small Web shouldn't be gatekept from people who want to learn more about it, regardless of their screen size, using a screen reader, having epilepsy, and so on.

In this guide, we'll cover many things you should upgrade, add, or remove. Don't take this in the wrong way if you disagree with anything. These are merely our opinions and how we approach Web design.

Contents:

Designing with screen readers in mind

Screen readers are a form of assistive technology that reads text and image content set in a website out loud. They are essential for blind users and important for people with reading issues, such as those with dylexia. They are useful for those who are visually impaired or have difficulty reading for whatever reason.

Common desktop screen readers include:

The first two are completely free to use, while VoiceOver comes with Apple products. These tools are essential for testing out your site if you want to keep it accessible.

While writing, do not use all caps or all lowercase. Both of these can mess up with screen readers, especially the former. Some screen readers will not recognize a word in all caps as a single word, and will instead read each letter individually; Using all lowercase gives the opposite problem- some acronyms will be read as a single word.

If you want to write in all caps or all lowercase, the CSS text-transform property is recommended instead.

For example, let's say we want all major headings to be in all lowercase. The CSS code we'd use would go as follows:

h1 {
    text-transform: lowercase;
}

Alternitavely, if we wanted to write only certain parts of our text to be in all caps, we'd make a CSS class to use with the <span> or <p> tag:

.yell {
text-transform: uppercase;
}

How to use alt text

Alternative text, or just "alt text", is something that is very useful, and luckily for you, elementary to implement, no matter what your skill level for web development may be.

One of the first things that you will learn if you ever want to start to build a website is how you can use the IMG tag, this allows you to add images to a webpage, for example, a basic use of this would be as follows:

<img src="cat.png">

When putting images on your site, think about whether they're merely decorative or not. If not, make sure to add descriptive alt text so people who use screen readers can have context for what is being shown.

For example, in our page for virtual pets, you'll notice we included the color and species of each pet in the alt text if you look at the page source. With more complex images, the description will have to be bigger, because the point of alt text is to give all the necessary information about the image.

At the same time, avoid details in the image that aren't relevant to whatever is being talked about.

Adding alt text to an image is quite easy to do and all that is needed is to add a alt tag, changing what is seen above to something that looks like this:

<img src="cat.png" alt="Image of a cat">

Between the quotations of alt="" comes the hardest part: Having to describe the image. It may seem hard to think of something to write, but say what you see, by doing this, not only will you be helping people who might find it hard to see, but you can also help other people who might see fine have a better understanding of the image that they are seeing. An example of alt text in action is shown below. We added the title tag with the same text, so even if you don't have a screen reader, you can still hover over the image with your mouse (or if you're on a mobile device, simply just hold your finger on the image) and you should see a pop up appear with the text for it.

Untitled artwork by Louis Wain showing a blue cat is looking at the viewer, smiling. They have deep purple eyes with flowers around them. Artwork is public domain.

Besides using alt text on your website, a number of social media websites also make it possible for you to use alt text on their services, websites like Twitter, Instagram, and even the open-source Mastodon, allow for alt text.

Links must look visually different from regular text, so people know what is and isn't a link.

However, for truly accessible design, make sure they are distinct- we underline our links, for example. This is so people who are colorblind can also recognize what is and isn't a link. Making links different colors isn't enough.

How can this be achieved? The default answer in HTML is with underlined links, but our friend numbers came up with a cool and unique solution: using the CSS :after selector, they included an arrow after each link.

a:after {
    content: "↗";
}

On a side note, numbers went even further and distinguished outbound and inbound links, but that isn't inherently necessary for this. What's necessary is that the thing that comes afterwards is:

  1. Not an image, because if the image doesn't load properly people won't know where the links are.
  2. Not a character that is often used for other purposes. Brackets, quotation marks, and so on should be avoided in this instance.

Autoplay sounds and music

Ideally, you should never put autoplay on your site. Why is that? Well...

  1. People with screen readers will have trouble hearing them.
  2. People might be startled when they hear loud, sudden music.

Overall, don't assume your taste in music is more important that viewers' comfort (or, in some cases, eardrums). It's just plain rude.

That being said, if you really must include autoplay, there are a few things you can do to make it more user-friendly.

The first is to include JavaScript that sets the volume to be lower off the start.

<body>
    <audio controls autoplay id="volumeset">
    <source src="html-audio.mp3" type="audio/mpeg">
    </audio>

    <script>
    var audio = document.getElementById("volumeset");
    audio.volume = 0.4;
    </script>
</body>

The second is to always include audio controls, so the user can decide to lower or pause the sounds themselves.

Saving image size

Let's face it - not everyone will have good Internet speeds, you will know this all too well if you live in an area like farmland or even in a country that has not fully developed yet. But, what makes the Web special is the ability to show images embedded on the webpage itself, because of this, living in areas with slow Wi-Fi can mean that loading an image, especially a larger one, can take a long time, compared to say, someone living in the middle of a major city.

What's the middle ground? How can a website owner make their site use images but also allow it to be loaded quickly by people with slower Internet speeds?

There are programs that have been made to help shave off the file size of images - one such program is PNGGauntlet for Windows, a free tool where you drag and drop images into the window, then compress your images down in size to ones that will not only save some space on your own website file size but will also help images load faster at the end of other people's devices.

If you are on Linux, you can install Curtail to compress your images - it is available on your app store and on Flathub.

For macOS users, there are a number of programs that you can use, although none of them have been personally tested by the writer, Cass Python.

On browser, you can also use Squoosh, the online app that makes "images smaller using best-in-class codecs, right in the browser".

Emojis

First being made in Japan during the late 1990s, emojis have started to become a regaler part of our day-to-day life online. It is hard to view social media without seeing the recognizable little icons. Because more and more emojis are being added all of the time, some computers, tablets, and phones are slow to catch up - that is why it might be worth to consider to use your own emojis or even use Twitter's Twemoji or even Mutant Standard due to both being open-source, although the former follows the guideline set out by Unicode.

But why is this? Well, simply put, as stated at the start, not all devices support the most current emoji versions, so using an image instead of an actual emoji might be worthwhile, what might also be good is to mix in alt text.

Here's an example:

<img src="full_moon_face.svg" alt="The Mutant Standard version of the full moon face emoji (&#x1F31D;)">

And as a result of this, the result should look like this:

The Mutant Standard version of the full moon face emoji (🌝)

Again, we get more into why alt text matters, but this is something that may be useful to people.

Transcripts for audio

An example transcript between two people who are talking about music.

Much like how some people cannot see the images on your website, many people are unable to hear the audio on your site. There are a wide reasons why someone may not be able to hear something, this is why it is inportant for not only things such as television stations to show subtitles, but also your own website. Adding subtitles will not only benefit people who are hard-of-hearing, but also people who may wish to read along with what is being said.

That is why it was such a disapointment when YouTube, the second-most visited website, made it no longer possible for viewers to add captions to other youtubers' videos as it was "rarely used and had problems with spam/abuse", ignoring that this will hurt people who are deaf.

Admittedly, adding a transcript can take some time and may reqire making a separate page for the audio or even the details tag, and you will also need to write down what is being heard, if it has not yet been written.

Fonts

It is quite the task to make a website in without making use of text on the website, and because of this, it means that you will have to make use of a font- even if it is just your browser's default option. There are fonts that you can use that people with dyslexia, one well-known one is the self-described «world's favourite font», Comic Sans, however, this font is not considered to be all that well-liked.

Because of this, there are other fonts that you can use; OpenDyslexic might be the best-known font by people who have dyslexia.

Despite of all of this, sadly not everyone with dyslexia will benefit from a change in font, as dyslexia is kind of like a spectrum where not everyone is the same, so, because of this, if you do have dyslexia yourself, using an add-on such as Font Changer or Theme Font & Size Changer for Firefox or Font Customizer for Chrome might be a bigger benefit.

More things to consider

Or, things we wanted to add but can't write too much about, either because there's nothing to elaborate on or because I'm not too well-versed in the subject yet.

  1. Don't use seizure-inducing images, for fairly obvious reasons.
  2. Start coding with small screens in mind for users who do not have access to a computer.
  3. Have a landing page detailing accessibility concerns (for example, "This page includes autoplay and isn't mobile-friendly.").