Is accessibility essential to create high-quality websites ?

Published in

Chaya Thilakumara

6 min readApr 16, 2019

“The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.”Tim Berners-Lee, W3C Director

The World Wide Web Consortium (W3C) develops international Web standards. The W3C Web Accessibility Initiative (WAI) develops guidelines on web accessibility.

Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more accessible.Following these guidelines you will be able to make web content more accessible to a wide range of people. As an example people with different disabilities, people with blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and the people with combinations of these different disabilities.

“More than a billion people are estimated to live with some form of disability, or about 15% of the world’s population (based on 2010 global population estimates). The estimated number of people visually impaired in the world is 285 million, 39 million blind and 246 million having low vision; 65 % of people visually impaired and 82% of all blind are 50 years and older.”

These guidelines provide recommendations to create web content more accessibility on desktops, laptops, tablets, and mobile devices not only to the people with different disabilities but this is highly important to users in general.

WCAG 2.1 extends Web Content Accessibility Guidelines 2.0 [WCAG20], which was published as a W3CRecommendation December 2008.

WCAG 2.1 principles and guidelines

Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.Examples : 
* All images on a web page are given alt text tags that describe what is happening in the image in the context of the page.
* Use sound effects to signify a right or wrong answer, there is also a text description included that says whether the answer was correct.

All images on a web page are given alt text tags that describe

Guideline 1.2 Time-based Media: Provide alternatives for time-based media.Example :
* A video tutorial inserts an audio description in between the presenter talking to explain what the presenter is doing when they 
aren’t describing their activities.

A video tutorial inserts an audio description

Guideline 1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.Examples: 
* Required fields in a form are not only distinguished by a red outline, but also an asterisk character. Complimentary instructions state the purpose of the asterisk.* A multi-page text uses an arrow icon to signal where to click to continue on to the next page. In addition to the icon, the arrow is labeled ‘continue’ and includes directions for how to navigate to the next page.

Required fields in a form are not only distinguished by a red outline, but also an asterisk character

Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.Examples:
* All visual text and images have a contrast ratio of 4.5:1.
* Text on a webpage can be zoomed in up to 200% without the loss of context or functionality.

All visual text and images have a contrast ratio of 4.5:1

Principle 2: Operable-User interface components and navigation must be operable.Guideline 2.1 Keyboard Accessible: Make all functionality available from a keyboard.Examples:
* Any drag and drop feature also supports cutting and pasting to move the objects.* An application or pop-up that shows up on a user screen has the ability to be closed via a button on the keyboard, not just clicking on the X symbol with a mouse.

Any drag and drop feature also supports cutting and pasting to move the objects

Guideline 2.2 Enough Time: Provide users enough time to read and use content.Examples:
* If your website goes inactive after a specified period of time, it asks if the user needs more time before timing out.*Any animation on the website comes with a pause and restart button.

Any animation on the website comes with a pause and restart button

Guideline 2.3 Seizures: Do not design content in a way that is known to cause seizures.Guideline 2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are.Examples:
* Users can bypass a block of content that’s repeated on many pages, like header graphics or advertising frames. There’s a link that jumps straight to the main content of the page.* Each webpage has a title that makes it obvious what the topic or purpose of that page is.

Each webpage has a title that makes it obvious what the topic or purpose of that page is

Principle 3: Understandable — Information and the operation of user interface must be understandable.Guideline 3.1 Readable: Make text content readable and understandable.Example:
* You use different type of content, like images, video, audio, etc. to clarify the meaning and context of the text.Guideline 3.2 Predictable: Make Web pages appear and operate in predictable ways.Examples:
* Your navigation remains consistent across the entire website.* If components of your site have the same functionality, they are labeled consistently on every page they are found.Guideline 3.3 Input Assistance: Help users avoid and correct mistakes.Examples:
* An error is identified in multiple ways, like in color and described through text.* There are instructions available right away whenever a user field is on the page.* When an error is identified, suggestions for correction are provided.* On a page where a financial transaction takes place, submissions are reversible, checked for errors, and can be confirmed before finalizing submission.Principle 4: Robust-Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.Guideline 4.1 Compatible: Maximize compatibility with current and future user agents, including assistive technologies.

How can you make sure your site is not violating the WCAG 2.1 guidelines?

Let’s go through some tools which is available to ensure that your site is not violating the WCAG 2.1 guidelines.

NoCoffee

An extension for Google Chrome, acts as a visual emulator.This will show you how visually impaired users can view the web pages.

Accessibility Developer Tools

An extension for Google Chrome, will provide you an audit section and a set of results which you need to consider when improving your web site features.