Web Accessibility

And that means...?

If you work in web development, you have probably heard of the term "Web accessibility", but do you know what it really is about?

When we develop a product we usually try to build something that looks good to the user, something that is easy to use and understandable, a product that makes the end users say "This is nice".

But during this whole process of designing, coding, testing and delivering the final product we can forget that there are many people out there with disabilities, who will use the system and might have troubles with it, because we didn't think about that.

This is where Web accessibility plays a role, according to W3.org

Web accessibility means that websites, tools and technologies are designed and developed so that people with disabilities can use them.

Pretty simple right? You might think that you don't need this, or that the amount of users with disabilities that use your product is not that high. Why should you invest money on reworking your website so this "small" amount of users can use it?

Some numbers

Well, let me tell you that according to the [World Health Organization],(http://www.who.int/disabilities/world_report/2011/report/en/) in 2010 there will be an estimate of 15% of the world population living with disabilities. Also The European Commission estimates that including all who have a "long-term physical, mental, intellectual or sensory impairment" one in six people in the EU have a disability - or around 80 million people.

All these numbers just keep growing, the United Nations Population Fund, says that by 2050 the amount of old people can reach the 2 billion threshold.

Still not convinced? The Click-Away Pound Survey in 2016 conducted a survey in UK and found that 71% of users with a disability will click away from websites that they find difficult to use and that those same customers have an estimated spending power of £11.75 billion. We are usually not aware of this, because these users won't complain, they will just try to find a better place to get what they want even if that implies paying more.

In a more official note, in Norway having inaccessible websites is illegal, this is enforced by a state agency called DIFI, which makes random checks on big companies websites. In 2017 a big airline company website got classified as "impossible to use". Months later as they didn't change anything, DIFI decided to give them 10 more days to comply, and in case they wouldn't the airline would would be fined 15000 Euros per day.
Norway is not the only one, many other countries ask that the government websites have to be accessible, but the extent of how much this is enforced is hard to know.

So, by not making your website accessible, you are losing clients, money and maybe breaking some laws. Isn't that reason enough to invest in web accessibility?

Ok, Ok... But how?

Let's talk a bit about how to do this.

Once upon a time (or 1997), the World Wide Web Consortium (W3C) created an initiative called Web Accessibility Initiative (WAI) with the intention of improving accessibility in the web. This initiative created the Web Content Accessibility Guidelines (WCAG) that are a set of recommendations for making web content more accessible for people and devices.

The WCAG has two stable versions WCAG 2.0 and WCAG 2.1, each of which has three different levels of criteria: A, AA and AAA where A are the most basic criteria that your website should have and AAA are the most strict. Reaching level AAA is very difficult, to the point that the WCAG says

It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.

The WCGA establishes 4 main principles that websites should have.

Perceivable

Information and user interface components must be presentable to users in ways they can perceive.
Some of the points here include the use of the right colors, text size and alternatives for time based media such as video or audio.

Operable

User interface components and navigation must be operable.
This can include keyboard usage, do the users have enough time to read and use the content? or can they find every content and determine where they are.

Understandable

Information and the operation of user interface must be understandable.
Are you providing labels and instructions when an input from the user is required? Can the language of the page be easily determined?

Robust

Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
Is your website compatible with different user agents? Are tags correctly used? Are roles and states well defined?

Baby steps

I'm pretty sure that by now you are eager to make your website accessible. There are some easy steps that you can take in order to start your journey to a more accessible website.

Alternative text

If you have <img> tags in your HTML then you must have the alt attribute. This attribute will be shown when your image is not available and will also be used by screen readers so the person listening to the content of the page knows what this element is about.
Every <img> tag has to have an alt attribute but not every alt attribute has to have a value. If the image is just for decorative purposes this can be empty.
This is a very controversial topic, but generally you shouldn't use words like "image of", "graphic of" and the text shouldn't be too long. An example of an alt attribute for this image can be:

grey Tabby kitten on grey textile
Photo by Lucija Ros / Unsplash
<img src="/cats-with-big-ears.jpg" alt="Brown Savannah cat with big ears and brown green eyes">

Colors

One of the major disabilities that affects the use of web pages is color blindness. About 8% of all men and about 0.5% of all women are suffering from color blindness. This means that there is a high chance that some of your users might not be able to distinguish clearly some of the elements in the page.

One of the easiest ways to comply with this guideline is to have a color palette with high contrast. There are many tools out there that can help you when deciding your color palette, or if you already have one in place it can be useful to check if the contrast is high enough.

color-contrast-1024x576
Photo taken from Blogelina

Labels

Do you have forms in your website? Or any other input where the user needs to provide information? If yes, these inputs, checkboxes, radio buttons, etc., have to have a label. You associate an input to a label by using the id attribute on the input and the for attribute on the label. But whatever you do, please don't use the placeholder on the input as a replacement for the label.

And much more...

These are just small changes that can bring a lot of value. There is still a lot more to do if you want to make your website accessible, like taking care of headings, using a proper HTML structure, etc. I invite you to use a screen reader and check some websites to see how it feels.

The goal is to make the web accessible for everyone, it has to be easy to use and to understand, regardless of what people use to interact with it.

"We need to make every single thing accessible to every single person with a disability."― Stevie Wonder

Tools and Resources

Color contrast checker
axe-Coconut(Chrome extension) - Check if your website is accessible -
Color blindness simulator
Screen Reader
Web AIM Accessibility Checklist

comments powered by Disqus