3 Simple Steps to Make Your Website Accessible to Everyone

Published in

REWRITE TECH by diconium

7 min readFeb 2, 2022

I believe that getting access to information by every individual is a human right. So, let’s see some simple steps on how to improve the quality by making the web-world accessible and easy for everyone.

Web Accessibility Entry — Photo by Daniel Ali on Unsplash

I would like to start with this very sensible little story:

“It had snowed the night before, and one of the students waited in his wheelchair while the janitor shoveled the front steps. The janitor said, “I’ll shovel the wheelchair ramp after I’m done with the steps.” The student said, “If you clear the ramp first, then everyone can get in.”

Aim of this post: How can we make the SMILE stay when people use the Web?

STEP 1: Understanding the Basics of Accessibility

As a first step, let’s understand some basics of Accessibility and Accessibility Testing.

What is Accessibility in Web world or A11Y?

Web Accessibility is an inclusive practice of making websites usable by everyone, regardless of ability or disability. A11Y is an abbreviation for “Accessibility” (A followed by 11 letters and Y)

What is WCAG and why?

Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in cooperation with individuals and organizations around the world, with the goal of providing a single shared standard for web content accessibility.

This is designed to meet the needs of individuals, organizations, and governments internationally. The WCAG documents explain how to make web content more accessible to people with different disabilities.

Also, the latest version WCAG 2.1 became a W3C Recommendation in June 2018, which, in turn, inherit requirements from WCAG 2.0

We have 4 Principles and 3 levels defined by WCAG to consider in Accessibility Testing.

Before seeing the defined WCAG Principles and Levels, have you ever imagined who are the different personalities visiting our Web pages on daily basis?

Design and Develop Web easy for everyone — Photo by Ben Kolde on Unsplash

- A visually impaired user can visit the website

- A hearing-impaired user can look for information in videos

- The user with color blindness visits the website

- The hand injured user may not use the mouse

- The users with cognitive impairment might have difficulty in understanding

- And various ability barriers(eg. a person lost his glass)

It’s around 1 out of 5 users are facing difficulty accessing the information from the Web globally.

The 4 PRINCIPLES of Accessibility:

Perceivable — The information in the web pages is available through sight, hearing, or touch.

Operable — The web pages should be compatible with devices like keyboards or mouse.

Understandable — Easy to comprehend by everyone

Robust — Works across different browsers, assistive technologies, mobile devices, old devices/browsers, etc.

These are the 4 Principles one should have in mind when gathering Requirements / Designing / Developing / Authoring / Testing web pages.

The 3 LEVELS of accessibility compliance defined in WCAG:

A: Essential (30 Success Criteria)

If this isn’t met, assistive technology may not be able to read, understand, or fully operate the page or view.

AA: Ideal Support (50 Success Criteria)

Required for multiple governments and Public body websites. The A11Y Project strives for AA compliance.

AAA: Specialized Support (78 Success Criteria)

This is typically reserved for parts of websites and web apps that serve a specialized audience.

VENN DIAGRAM OF SUCCESS CRITERIA

STEP 2: Why is Accessibility a need by 2025? Understanding the Laws and Regulations:

Why is Web Accessibility topic getting more and more attention in recent years in the EU?

The EU’s Web Accessibility Directive has become law in 2016. It includes a wide range of systems including personal devices such as computers, smartphones, e-books, and TVs, as well as public services like television broadcast, ATMs, ticketing machines, public transport services, banking services and e-commerce sites.

What are the new laws, regulations coming in?

The laws, regulations and administrative provisions necessary to comply with this Directive have to be adopted and published by the Member States by 28 June 2022. Three years later, in 2025, the requirements of the European Accessibility Act must have been implemented.

What happens if Web Pages are not complying with these regulations?

The user can file lawsuits against Web accessibility, and it could result in a large amount of fines to be paid.

You can see, it’s already legal in some countries like US, UK for Private business and there are reports for dramatically raising Web Accessibility lawsuits.

STEP 3: How can we measure the Accessibility of our Web pages? Tools?

Yes, we do have various TOOLS to measure the Accessibility of our Web pages. Let me share some interesting Browser own add-ons and Browser plugins available and useful for Testing.

Google Chrome Lighthouse:

As a very quick measure, we can use the Chrome browser own add-on “Lighthouse” to see the accessibility of the Web pages.

Where and how can you generate the report?

Let’s see how accessible is our diconium Web page. I know now, you are curious to see it. Let’s get started.

Open the diconium.com using chrome browser. Open console and click on Lighthouse tab. Now choose the category as “Accessibility” and Device as “Desktop”

Click on Generate Report. It takes few seconds to show the report,

Diconium page — Lighthouse report for Accessibility

Can’t wait for the results? Me either,

Here you go,

It’s not bad and showing a decent score of 80 out of 100.

Do you still want to analyze where you can improve the accessibility score and make the results green? It’s easy, you can see below the score what areas can be improved.

Example: In the above page, the links don’t have accessible names. So, when a visually impaired person uses assistive technology and visits our page, it reads as a “link” but not enough information on what is the link for.

WAVE Plug-in:

Have you ever heard of this browser extension, WAVE?

How can you add this extension to your browser?

You can simply browse for it or click here and you can add this extension for your specified browser.

Let me show you how we can do it for Chrome browser.

Click on Add extension and you can see the WAVE icon in the browser toolbar as below

Just a click on the icon opens an overlay which shows you the accessibility Summary for your web page.

Diconium page — Accessibility results using wave plugin

I personally find each section is very user friendly to locate the exact error and to fix it.

Summary page shows you the Errors, Contrast Errors, Alerts, etc. When you click on Detail’s tab, it shows you the details of the error in more detail. When you click on specific error, it takes you to that specific error in page and you can also see the code from there.

Is it not an interesting feature for developers ? A quick way to fix and improve the accessibility of the page in few clicks.

You can also see Reference about the details of error, Structure of the page and Contrast.

I think, now you got an idea, how SIMPLE and QUICK to check the accessibility of our Project Web pages.

I also want to emphasize that, these tools help to test accessibility of web pages but still we should be doing some Exploratory testing (using different assistive technologies) for different personalities to have a better Web experience for everyone.

I’m sure, some of you already started looking accessibility score for your Project Web pages.

Happy Testing 😊

It’s not late yet. So, let’s start together to think about implementing these requirements in a cost-effective way by engaging the right people (Product Owners, Consultants, UX designers, Authors, Developers, Test team) and make the Web ACCESSIBLE and EASY for everyone!

Thanks for reading !

Please post your questions and I am glad to answer them.

Please let me know in comments if you like to know about other topics like, How to start testing different Success Criteria ? Mobile Accessibility Testing ?