Web Accessibility And Why You Should Care

7 min readSep 16, 2019

I recently, attended a conference talk by Cory House and he talked about the importance of Accessibility while building our apps. It struck a chord in me and I wanted to write this article to reach more people on Accessibility.

Why should you care?

Web Accessibility focuses on how a disabled person interacts with your website. 19.3% percent of people in the United States have some type of disability as of 2019. This is a huge percentage of people.

Today with the enormous growth in the usage of technology, the web is an important resource in our lives. We use the web for a variety of reasons like education, healthcare, commerce, entertainment and more. It has become an integral part of our lives in the last decade or so. With web being so predominant in our lives, it is important to make the web accessible for everyone. We need to provide every individual an equal opportunity to access the web, irrespective of their abilities.

There have been a number of law suits filed, against companies for their websites being inaccessible. A few days, ago a man had sued Dominos Pizza for their website being inaccessible to the blind.

What is Web Accessibility?

Here is the wikipedia definition of Web Accessibility.

Web accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with disabilities. When sites are correctly designed, developed and edited, generally all users have equal access to information and functionality.

Web accessibility applies to all disabilities that can affect one’s access to the web. It can be auditory, cognitive, neurological, physical, speech related and/or visual. When you build accessible websites, it doesn’t just help those with permanent disabilities. It make a great difference to other types of temporary disabilities as well. Someone with a temporary disability like lost glasses or broken arm, can benefit from the accessible web.

I have always seen my grandfather struggle to read content from website, so people who are aging are a good example of those with changing abilities, who can also benefit from the accessible web.

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

Disability Classification

Permanent Disability: This is when someone is permanently disabled. This could include being blind, deaf, and so on.
Temporary Disability: This is a physical or mental disability which hinders someone’s discharging of responsibilities for a short period of time.
Conditional or Situation Disability: This is when someone is not able to do things due to the situation they find themselves in. There are plenty of examples for situational disability. It could be due to a slow internet connection, or someone holding a baby in their hand, and so on.

Getting Started

We need to be inclusive and consciously make our web apps accessible. It is not only required by law, but it is also the right thing to do. Here are some tips that can help you get started with building accessible web apps.

1. Test Your App With A Screen Reader

In the conference talk, Cory blindfolded himself and demonstrated using a screen-reader to use the app.

This can definitely give some inspiration to fellow developers. We can test our app with screen readers and analyze the experience that it gives. You can activate the VoiceOver command on a Mac using Command + F5 On Windows machine you can follow these steps to start a VoiceOver. Here is a link to a survey of websites after using screen readers. It gives an insight into many of the pain points.

2. Provide Image Descriptions

Alternative text (alt text) is a part of the Image tag in HTML. It is used to describe an image and it’s role within a website. Make sure to provide these alt text to all images in your website. This is because, screen reader devices rely heavily on the alt text to describe the image to people with visual disabilities. Not just that, Alt text is also used as a replacement, incase the image fails to load. Your website will tend to have a better Search Engine Optimization, when the images have an alt text.

<img src="test_image.jpg" alt="Animals in Asia">

In case your images, add no value to the website, and are purely used for a visual appeal, then skip adding an Alt text to those images. This will ensure that the screen readers, ignore these images while reading to the visually disabled person. We want to make sure that there are minimal distractions.

3. Mind Your Colors

A few years ago, I was working on a project which was about uplifting all our icons from a certain color palette to another to be more compatible with those who are color blind. As a part of the project, we redesigned all the colors to be lot more contrasting than before. The reason this project was undertaken was because, these icons and the colors were indicating to the user some critical medical insurance information.

There are different types of color blindness, and one of the most common one is that the reds and greens are indistinguishable.

Make sure to add more contrast between the content and the background. Including sharp contrasts, go a long way in helping those with color blindness. If your website has various colors, it won’t be a problem, unless you are using these colors to convey important information. If the colors are used to convey important information, you have to provide the same information in the form of maybe an Alt Text or add some descriptions, etc. This ensures that the color is not the only way the user can receive the important information.

Read this article which has an extensive study about color blindness and tips to make your website accessible to the color blind.

4. Use ARIA When Appropriate

ARIA stands for Accessible Rich Internet Applications. It is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities. It is used in addition to HTML. Use ARIA only when you don’t find a native HTML element.

Some examples of where ARIA is appropriate to use are:

Adding alerts to notify screen reader users of dynamic page changes.
Making complex, interactive widgets such as date pickers accessible to screenreader users.

Note: Many of the ARIA widgets are now incorporated into HTML5. Therefore it is recommended to use HTML native elements over ARIA if the element exists.

5. Make Your Site Accessible via Keyboard

Keyboard accessibility is important for people with visual, cognitive and motor impairments. We need to make sure that all the content on the website is accessible with a keyboard alone. You can test this by using your website without a mouse and just making use of the keyboard alone. Ensure that all the shortcuts work, and you don’t end up in any keyboard traps.

This article, discusses in detail about Keyboard accessibility and making your website completely accessible via the keyboard.

6. Provide Headings Accurately

Heading tags when used correctly, can be super helpful to screen reader users. The heading tags allow the screen reader users to jump to sections based on the heading. It is quite simple to incorporate, and we tend to overlook headings at times.

Use the correct order of headings all the time. Do not choose a heading, to make it look visually appealing. This can be hard for screen reader users. You can always create a new CSS class to style your text, but use the correct order of headings. Keep in mind to never skip headings, since the screen reader user will be lost while navigating via headers.

The Mozilla Developer Guide has notes on accessibility with Headings.

7. Add Meaningful Descriptions for your Links

When you add descriptions to links, keep in mind that someone maybe using a screen reader to navigate from one link to another. Let’s say you have a link to read more information on a certain topic, and the link’s description is “click here”. The screen reader would literally read “click here” to the user. Now, the user has no context on what clicking on that link would do.

Instead, we can make this experience a lot better, by simply providing meaningful descriptions for links. You could add a link description that says “Click here to read more about related topics”. Now this provides the user more context and certainly more helpful. Simple things like this can go a long way in making your website accessible.

Conclusion

There are plenty of other tips and tricks that you can follow to make your web app more accessible. Here are some resources that will help you get started and provide more insights into building accessible web apps.

Resources

I would like to leave you with a quote:

“The one argument for accessibility that doesn’t get made nearly often enough is how extraordinarily better it makes some people’s lives. How many opportunities do we have to dramatically improve people’s lives just by doing our job a little better?” ― Steve Krug

This post was originally published in https://programmingwithmosh.com/

If you liked this post, please share and you can follow me on twitter @AdhithiRavi. To learn more about me visit: http://adhithiravichandran.com