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.
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:
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;
}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 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:
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.
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.
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 alt text. You should make sure to add alt text when possible!
In regards to accessibility, autoplay is often frowned upon. Why is that? Well...
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="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.
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.
Here's an example:
<img src="/full_moon_face.svg" alt="The Mutant Standard version of the full moon face emoji (🌝)" style="width: 150px;">
The result should look like this:
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 require 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.
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 can read well, 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 or Font Customizer for Chrome might be a bigger benefit.
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:
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.
These aren't strict rules you absolutely need to follow- as you might have noticed, this very site isn't entirely accessible. 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:
Copyright 2022 - by Cass "Owly" Python and Bruno «devils» A. of yourdevilfriends.art. Please see humans.txt for full credit and thanks.