“Accessibility” is a tricky word. It’s long and a bit difficult to spell (even worse if you weren’t the first pick on spelling bee contests, which is totally my case), so difficult that it is often abbreviated to “A11y” –as in “a”, then 11 characters, then “y”.
Yeah, even the short version is hard to explain.
However, the meaning of the word, at least in web development, suggests the entire opposite: “accessibility”, in terms of web development, means adjusting every single resource of a website so it can be used by literally anyone, even by people with some kind of hearing, movement, sight, or cognitive disability; or impairment.
Bear in mind that impairment might not only be physical or permanent. An impairment could be situational or temporary as well and might affect people without a disability. For example, a website that works perfectly on a smartphone but struggles to run on a tablet has an accessibility problem.
Therefore, accessibility is basically used to improve the navigation experience for everybody: from those who can see and use a keyboard normally, to those that rely on text-to-speech versions to access their favorite website or work from their computers.
So, how can you improve your website to make it more accessible? Let’s check out!
First, improve visual accessibility
Take a look at the following image:
At first sight, it looks okay, but in fact it has several accessibility problems:
- The contrast of the text is very, very low. Imagine somebody with a vision problem. It’d be absolutely tedious to read!
- The labels on the sides are too distant from each other. Imagine someone that needs to zoom in on the text to read with clarity, how would they establish a relationship between one label and the other?
- And what about that checkbox? It’s too far away from the “remember details” label that goes along with it! Imagine someone using this website with a text-to-speech version: smartphones, by definition, are smart, but not smart enough to read the label and then put the checkbox closer to the text.
Now, let’s make a couple of adjustments to make sure that the website is more accessible by people with a disability or impairment:
As you can see, the labels are closer to each other, which eases the reading process, the text is darker, and the checkbox is now associated with the label. This is just a simple example of how small details can make a huge difference.
What about HTML optimization?
When we talk about accessible HTML, we talk about semantic HTML, which is using the correct HTML elements for their intended purpose in every part of your website. For example, when including text on a page, you might want to separate paragraphs into several subheadings. The proper way to do this when writing in HTML code is to mark headings as <h1> and subheadings as <h2>.
However, some people write text using presentational HTML and line breaks, which is a horrible experience for people using screen readers. You can find an example of good HTML semantics here, and an example of bad HTML semantics here.
Another way to improve the semantics of your HTML code is to set up your website to be completely navigable by keyboard, using commands like Tab key, Enter, and Shift. That’ll help people with a motor disability or impairment, which is people that are not able to move the mouse fluidly and use technology like eye-tracking devices to interact with their computer. A better example of this type of website navigation can be found here.
Finally, let’s talk about accessible multimedia
A good website needs to make sure that its multimedia files are accessible by anyone. Of course, you cannot guarantee the accessibility of every video or image -after all, they’re mostly visual objects-, but there are several ways to improve navigation for people with visual, hearing, or cognitive problems. For example:
- You can make sure that every image has an alternative text available for screenreaders to pick up and read it out loud for their users.
- If there’s a video or an audio file, make sure that there are subtitles available for people with hearing issues or people who don’t speak the language. A transcript and description of the scene you’re trying to show in a video could be picked up by people who use screen readers, which serves to not exclude blind people from the experience.
Making an accessible website doesn’t have to be confusing or involve more work than doing a non-accessible website, as long as you set it up to be accessible from the start. The S-FX team is here to help you accomplish that goal. We specialize in the creation of accessible websites that allow our clients to display their services to everyone.
Send us an email and let us know about your project!