Simple Tips to Make Your Code Web Accessible

You can think of the web a lot like you can think of a public library. It is a giant store of information available to everyone that people from all over can go to.

However, do you see a problem with the image below?

If you cannot get upstairs, you’re probably going to have a little bit of trouble getting into the library unless you have an access ramp.

Web Accessibility in a Nutshell

Web accessibility is basically building access ramps to the web and making sure that everyone can access everything in the web equally and on the same level.

Here’s an example:

This code more or less looks fine. However, there are some problems that are not immediately apparent from just looking at the code. But when you open up the webpage, you’ll see the problem.

Not only this is ugly, there’s also the fact that if you have red-green colorblindness, you’re probably going to have a lot of trouble reading any of the actual text because it’s green on red.

This is probably not immediately apparent to most people and it does not even affect most people but it is still there and you want your website to be able to be accessed by every person.

Every person who cannot access your website because of a disability is lost business in addition to just being unfair to that person.

To combat this, the World Wide Web Consortium, which is more or less the governing body of the web or as close as can be to one, created the Web Accessibility Initiative, which sought to create the Web Content Accessibility Guidelines or WCAG.

Currently, they have published WCAG 2.0 in 2008 and that is pretty much the why most widely accepted standard for web accessibility standards. Pretty much, every country goes by some variant of this or just uses WCAG 2.0.

So what does that consist of? There are 4 main principles:

1. Perceivable – This basically means that everyone should be able to perceive the information. You shouldn’t have any information that’s hidden to a particular class of users. For example, if you are deaf you should have transcripts that you can read for audio podcasts because otherwise, that information will be completely hidden.
2. Operable – This means you need to be able to access all of the website regardless of disabilities. For example, you wouldn’t want a button that can only be activated by clicking on it and not by any sort of keyboard commands. Because then if you cannot use a mouse due to, for example a motor disability, you’re not going to be able to access that button.
3. Understandable – This one is a little bit more vague and a little bit more straightforward. Basically, all information needs to be able to be understood by the user. Your website should be predictable. It should not do just weird unexplained things. This is also just good website design besides being helpful to some people with disabilities.
4. Robust – This basically just means for unpredictable use cases, for things you haven’t tested or for different weird specs like on mobile on a big screen. Your website should still operate more or less the same and still be accessible to everyone.

Next…

There are 12 general guidelines for implementing these principles which have 61 testable criteria and there are 3 levels of conformance: A, AA and AAA.

Yes, it’s very complex and in making a site completely web accessible and implementing it as AAA, which is the highest level, is very difficult and it takes a long time.

The point is you should not worry about that too much. You should mostly focus on when you are building a website; think about the type of things that could make life easier for disabled people. Think about implementing alternatives so if you have a function that really just cannot be implemented in a way that is accessible, provide an alternative to get the same information. It does not have to be on the main site as long as you can get to it from the main site.

And even a lot of professional websites and governments only require A or AA levels of conformance. AAA is very much an ideal more so than a practical thing for large websites.

To think about what kind of disabilities you should be targeting here are some general categories:

1. Visual Disabilities
   
   This includes people who are blind, colorblind and those who cannot read very well. For these types of disabilities, you need to think about how you use color a lot.
   
   You shouldn’t have contrast between text and background that makes it difficult to see. You should make sure that all of your websites are capable of being used by screen readers, which are just things that are operated by the keyboard and just read out the content.
   
   A classic example of this is an image tag. You need to have an alt tag in your images because otherwise, people with slow internet or people using screen readers are not going to get anything information from that. It is just going to be this mystical thing that no one can look at.
2. Audio Disabilities
   
   This includes deafness and hard-of-hearing. These are the aforementioned transcripts come in a lot of handy. You want to have subtitles for videos, transcripts for podcasts, etc.
3. Motor disabilities
   
   This covers difficulties in using a mouse or keyboard. This is why you want to have your website be completely accessible solely from the keyboard so that people who cannot use a mouse can still use it completely.
4. Cognitive disabilities
   
   This one is a little bit harder to quantify specifically but basically, you just need to make your information able to be accessed by people with learning disabilities.

How Fix Your Website and Make it More Accessible?

The first thing you should do when you’re fixing a website to make it more web accessible is to make the code easy to read.

One of the most common issues of web developers and designers during coding is that they did not implement a stylesheet. If that’s the case then you’ll just have all this code inside a style tag and have some inline styling.

And for script tags, instead of putting it in a separate JavaScript file, you’ll probably just put the actual script on the website.

The first thing you should do is refactor those and take all those out and move them to a separate file. The difference between a long unreadable set of codes and just the HTML itself is huge and it makes it much easier to change things.

And the last thing: Don’t panic!

Yes, it can be a very daunting task especially when you are using some sort of editor that will give you all these warnings that your site is not accessible or you are it wrong.

Don’t worry about making everything perfect immediately because it’s not going to be. It’s very difficult to make a website completely web accessible that’s why it’s taken so long for the W3C to implement the WCAG.

Separate your HTML from your CSS and your JavaScript and consider providing alternatives.

Sometimes it is a lot easier instead of just completely changing your main site to just providing a link there for people with specific disabilities to consider using other resources and then just providing it very simply without having to change your main website.