Web Accessibility And Why You Should Care

Woman covered with blindfold

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?

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?

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

  1. Temporary Disability: This is a physical or mental disability which hinders someone’s discharging of responsibilities for a short period of time.
  2. 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

1. Test Your App With A Screen Reader

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

<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

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

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

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

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

Software Consultant, Author, Speaker, React Native|React|GraphQL Dev & Indian Classical Musician http://adhithiravichandran.com/