Web Design Accessibility

Written by Cass «Owly» Python and Bruno «devils» A.

One great thing about using the Internet and World Wide Web is that anyone, regardless of their walk of life, is able to use it, so because of this, it also means that people will sometimes struggle with viewing and interacting with the way that the webmaster has made a website, this can sometimes be down to the site using something that is no longer supported (such as Flash), or the website creator did not include an accessibility tool.

In this guide, we will break down the ways where a web designer can better help their website become more accessible for everyone. While this page was written for webmasters, anyone can read it and make notes.

Contents:

• Designing with screen readers in mind
• Links must look like links
• How to use alt text
• Autoplay sounds and music
• Saving image size
• Emojis
• Transcripts and Subtitles
• Fonts
• Flashing GIFs
• Spoilers and sensitive content
• Dates and Time
• Final thoughts

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 dyslexia. They are useful for those who are visually impaired or have difficulty reading for whatever reason.

Common desktop screen readers include:

• NVDA for Windows
• Orca for Linux
• VoiceOver for macOS

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.

To help people with screen readers, doing things such as not using all caps or all lowercase is a great help. Both of these can be messed 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;
}

This will make all the text that is in-between the <h1> tag in all caps.

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;
}

To use this one, use the above code it in your CSS file that is linked on the page and when you use <yell>, all of the words inside of it will be in block letters. An example is seen below:

When I saw what was written on the mirror, my heart missed a beat. In red writing, the words <yell>I know what you are</yell> were scratched in with blood.

Because of the <yell> tag being used, the example text will be shown as the following to people viewing the page:

When I saw what was written on the mirror, my heart missed a beat. In red writing, the words I know what you are were scratched in with blood.

Useful, right?

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 them without any issues. Making links different colors isn't enough.

How can this be achieved? The default answer in HTML is with underlined links, but 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.

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 the 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.

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, but at the same time, avoid details in the image that aren't relevant to whatever is being talked about or shown.

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 looking at. 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.

The full code for the image is seen below:

<img src="cat.png" alt="Untitled artwork by Louis Wain showing a blue cat looking at the viewer, smiling. They have deep purple eyes with flowers around them." title="Untitled artwork by Louis Wain showing a blue cat looking at the viewer, smiling. They have deep purple eyes with flowers around them.">

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, Mastodon, etc., allow for this. You should make sure to add alt text when possible!

Twitter also has what it calls an image description reminder where if you try and post an image or a GIF without alt text, it will remind you to add alt text.

In regards to accessibility, autoplay is often frowned upon. 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.

That being said, if you want to 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="my_song.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.

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 writers of this guide.

On browser, you can also use Squoosh, the online app that makes «images smaller using best-in-class codecs, right in the browser» . Also on browser, it's possible to compress GIF files using EZGIF.

First being made in Japan during the late 1990s, emojis have started to become a regular 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 perhaps 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. The idea of a website having its own emojis isn't a strange thing. Sites like Twitter use their own emojis.

While it's really not the end of the world, there can be unforeseen issues with someone not using their own emojis, such as the emoji showing up as a rectangle or the replacement character (�), there are also issues like two users on two different devices might not see the exact same emojis, now that would be terrible.

Here's an example of how to use an emoji on your website:

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

The result should look like this:

You might want to define the width of the emojis if you're using SVG files, as they're originally quite large. Here's what it will look like in CSS:

.emoji {
width: 1rem;
}

The result will look similar to this:

With the code looking something like this: <img src="demon.svg" alt="Moon emoji" title="Moon emoji" class="emoji">

Much like how some people cannot see the images on your website, many people are unable to hear the audio on your site or video. There are a wide number of reasons why someone may not be able to hear something; they may have a hearing loss issue, their audio on their device might be broken, or they just might not be in an area where playing audio would be okay to do, like in public. This is why it is important for not only things such as television stations to show subtitles but also your own website (and also stuff like YouTube videos). 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 disappointment 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, but this will greatly help people who cannot hear what is being played. To add subtitles on a YouTube video that you made (and keep in mind that this could have changed when you are reading this), you need to go into YouTube Studio, click on «content», click on «details» on the video that you want, then finally on subtitles - from there it should be easy to understand.

If you own a website and have something that would benefit from adding a transcript, there are a few ways to do that. If the audio is short, you could probably get away with adding alt text to the audio file player if it is visible, for example:

If you put something like this on your website...

<audio controls src="fair_use.mp3" alt="Singing:
I just got a letter saying that I better desist
Some legal mucus
Seems that Mr. Lucas is pissed

Whatever happened to fair use?
(You know?)
Whatever happened to free speech?
(Where'd it go?)
I'm only using my First Amendment right
You know I won't go down without a fight, without a fight" title="Singing:
I just got a letter saying that I better desist
Some legal mucus
Seems that Mr. Lucas is pissed

Whatever happened to fair use?
(You know?)
Whatever happened to free speech?
(Where'd it go?)
I'm only using my First Amendment right
You know I won't go down without a fight, without a fight">
</audio>

It will become like this (hover over the audio).

Song: Lemon Demon - Gonna Dig Up Alec Guinness (2005)

Sometimes it might not be possible to add just a simple alt text to an audio file, but there are other ways to show the transcript on a website. You could have a popup appear, you could link to another page, anything really.

Writing subtitles is not hard. For subtitles, they should be accurate as possible to what is being said in the video or audio and well timed so it is not desynced. There are some other things to remember, such as to also include text for the sound effects that may be in the video or audio so that people who might not be able to hear the audio can still have the context of what is going on.

It is quite the task to make a website in without making use of text on the site, 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, you as a webdev will have to decide how the viewer will see your website (no pressure!). There are fonts you can pick that people with dyslexia can better help read with, 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 a bit of a spectrum- no dyslexic person has the same experience:- 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 might help you. If you're a Chrome user, then Font Customizer might be a bigger benefit.

Make sure the size isn't too small - 1em (which is the standard font size) is quite good, co-author Bruno recommends not going under .8em as the text might be too small for users to read. Remember, just because you can read small text, that doesn't mean everyone can - even users that aren't visually impaired might have trouble reading tiny text.

Color is equally important. The colors must contrast against each other in a way that doesn't cause eye-strain. So, we recommend avoiding bright text on bright backgrounds, pastel text on pastel backgrounds, et cetera.

Finally, to make things easier for dyslexic users, there are many things you can change to make the text easier to read, such as word/letter spacing, avoiding justified text... This is covered in-depth by solaria's readability guide, I highly recommend checking it out!

Photosensitive epilepsy is a condition where seizures are triggered by flashing lights or contrasting light and dark patterns. These kinds of patterns can also affect epileptic folk whose epilepsy isn't photosensitive, making them feel unwell, disorientated, or uncomfortable.

Anyone with epilepsy can tell you that seizures are not pleasant, regardless of type. Tonic-clonic seizures (formerly known as grand-mal seizures) can be especially harmful, as one loses consciousness and control of their body. In rare cases, they can be potentially fatal.

There's ways to help those with epilepsy have an easier time navigating the Web when developing a website:

• Make sure not to include flashing GIFs where they are not needed, or at least avoid putting them in large numbers in the same page.
• Slow down GIFs using your preferred GIF editor. A good one is the browser-based EZGIF.
• Always include warnings when linking to a page with seizure-inducing GIFs or video.
• Make sure your GIF is not between 3-30 hertz (flashes per second), as those are the most common rates to trigger seizures.

There's also a way to blur an image before it's hovered with CSS, which can come in handy for many flashing GIFs.

.flashing {
    -webkit-filter: blur(5px); /* For Safari 6.0 - 9.0 */
    filter: blur(5px);
}

.flashing:hover {
    -webkit-filter: none;
    filter: none;
}

Below is a blinkie taken from blinkies.cafe that is friendly to most users with epilepsy. We applied this tip to it, so it'll only be fully visible when hovered.

The code for this is quite simple, and looks like the following:

<img src="blinkie.gif" class="flashing">

Other than that, you can also use Freezeframe.js to freeze GIFs, letting the user see them in action by hovering or clicking the image. This tutorial by BechnoKid explains how to use it in personal websites!

When writing about sensitive topics or even trivial things such as movie spoilers, you might be tempted to use the details tag to hide the offending text. However, here's a way to do so without having to click anything to showcase hidden text...

Using the span tag and some CSS, we can create text that will only be shown when it's hovered over. The background color should be the same as the text color.

.spoiler {
    background-color: #fff;
}
    
.spoiler:hover {
    background-color: transparent;
}

The result will look like this: you just lost the game.

For this, the code used a span tag, so like this: <span class="spoiler-text">This text will be hidden!</span>.

One thing that all people will recognize while being online for any amount of time is what date format people use. Unless your website was made only for people in a certain country, there will no doubt be confusion on what date formats are used.

Okay, but what are we on about here? The long and short is that some countries will do day/month/year, some will do month/day/year, while others will do something else, so due to this (and the fact that almost anyone can get online), it is only a matter of time until someone will be confused. One example of this would be what date is 12/10/1993? Well, some would say the 12th of October 1993, while others would say the 10th of December 1993.

How do we fix people not being confused? Well, we just showed you an example in the form of writing out the whole date; don't write 12/10/1993, write 10th of December 1993!

This is perhaps the most accessible and clear way of writing dates, but there is also another way, that being ISO 8601! Instead of putting something that can be interpreted in more than one way, ISO 8601 makes it so there is zero confusion. Dates will be written as YYYY-MM-DD, for example, 1993-12-10.

At first, this may be confusing, but once you understand it, this format is very easy to get the hang of (but with that said, perhaps only use this on an audience who will not be confused (we're talking nerds)).

There are, of course, other ways to write dates so as to not confuse people. 10/Dec/1993 is quick to understand, for example.

These aren't strict rules you absolutely need to follow. At the end of the day, one must take into consideration both accessibilty and their own vision and arrive at a compromise.

It's good practice to make your website mobile-friendly, for example, but the resolution of a phone goes against many Webmasters' personal goals. A good way to counter potential accessibility issues is to have a landing page detailing them.

As a final note, here are a few useful links related to this topic, for both Webmasters and Websurfers alike:

• How to Turn Off Autoplay in Your Browser
• Toggle Animated GIF extension for Firefox
• A Field Guide to Web Accessibility
• WAVE Web Accessibility Evaluation Tools

Want to support OwlyFans? See our NFTs!

Copyright 2022 - by Cass «Owly» Python and Bruno «devils» A. of yourdevilfriends.art. Please see humans.html for full credit and thanks. Peace and love.

The song used for Transcripts and Subtitles is «Gonna Dig Up Alec Guinness» by Lemon Demon from the album «Damn Skippy» (2005). I, Cass, am doubtful that the use of this song would fall under fair use in the USA or fair dealing in the UK, but according to the ReadMe.txt from the official website, «feel free to use any of this music in any video/animation projects for school or for fun».