Accessibility: Intro, Tips, Why Designers and Developers shouldn’t ignore it.

In this tech era, there has been a rapid growth of Internet users. According to a study, almost 1 billion people suffer from disabilities. But their disabilities shouldn’t stop them from accessing information or using the World Wide Web. They must also be able to conveniently make use of internet let it be studying, shopping, banking, entertainment, etc. Accessing the web is also a human right and everyone should have equal access and equal opportunity.

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

Web Accessibility, in short, means your website can be used by the widest possible audience including people with disabilities. The major categories of disability types are:

1. Visual – Blindness, low vision, color-blindness
2. Auditory– Deafness and hard-of-hearing
3. Motor – Inability to use a mouse, slow response time, limited fine motor control
4. Cognitive – Learning disabilities, distractibility, inability to remember or focus on large amounts of information.

So, people even with these kinds of disabilities should be able to access most of the important part of your website. This is the basic motto of web accessibility.

Your website should follow adaptations in the design of web content. Most of the times these adaptations benefit nearly everyone not just people with disabilities. Accessibility is important to at least 20% of your audience and getting it right means you’ll build something that is better for everyone, so it’s good for business!

Digital accessibility is also a regulatory requirement. There have been legal cases launched against websites that exclude users, who may be color blind, or have impaired use of arms or hands, cognitive differences, or visual or hearing impairments. It’s best to think about accessibility from the start of a project.

11 Web Accessibility Tips for Designers and Developers:

1. If you are developing or hiring someone to create an app, software or website, make accessibility part of the project – refer to the Web Content Accessibility Guidelines version 2 (WCAG 2.0). Ideally, include disabled users in your testing.
2. If you are using a CMS – Content Management System like WordPress to create your website, use ‘accessible’ themes and plugins.
3. Users should be able to customize their experience of them – changing text size, colors, etc. Follow Responsive Design guidelines.
4. Always let your users know where they are and how they get to somewhere else. Adding ‘skip to main content’ link will be a lot beneficial.
5. Make sure that most of the actions that can be performed using a mouse can be achieved using the keyboard. Because keyboard only users need to see where they are at all times when they navigate using the TAB key and tabbing should follow a logical order. Avoid using annoying moving objects, adverts popping up.
6. Give the user control – provide a pause button, and don’t set audio or video to play automatically.
7. Choose a video player that allows you to add captions, and provide a text transcript, to make audio and video content accessible. Include descriptions of any important visual information as well as speech.
8. Provide ‘alternative text’ for images. As they describe the image they are usually called as alt tags. Make use of those alt tags to describe your images so that screen reader can read out to users with visual impairments.
9. Have a simple yet effective Markup. Each page should have a title and proper organizing of headings, paragraphs, and lists must be done.
10. Make sure that links stand out clearly from surrounding text and let users know if the link will open in a new window or download a document. Links need to be unambiguous and descriptive so that if they are read on their own, people will still know where they go.
11. Aggressive Spam protection services like CAPTCHA may not only shut out spam robots but also potential customers. Please use alternatives [to CAPTCHA] – such as text-based logic problems, or simple human user confirmations.

Normally the designers and developers blame each other for not making the website accessible. Actually, it’s not limited just to one of them, it’s their both collaborative work. They usually ignore the web accessibility standards and regulations but they shouldn’t do that. As it’s totally worth the time spent on making the website accessible.

There have been many initiatives to promote the use of web accessibility in the development of an application. Not just them but many tech giants actively take part in creating awareness regarding the use of web accessibility. I would like to mention IBM Accessibility Research.

There’s been a whole community at IBM regarding accessibility where they constantly study, research and build tools and provide guidelines for accessibility.

Let me introduce an Open Source project by IBM which is dedicated to help web designers and developers in building accessible web apps. The project is named as Va11yS. It is a repository of live working code samples that designers and developers can easily access to test with different assistive technologies and tools.

The idea behind this open source project is to provide code samples so that developers can view them and quickly implement the ideas into their own code. It has web accessibility code samples for many languages and Frameworks such as HTML, CSS, ANGULAR.JS, REACT, ARIA, etc.

It is really convenient, you just need to select the language or technology which you’re currently using in your project and you’re good to go. The repository will provide you the basic code or building blocks that follow accessibility guidelines which have been already tested. And now you just need to copy the exact same code or modify it according to your needs. That’s it, you’ll now have a working website/app that follows web accessibility guidelines.

The project received good support from the other developers around 900+ commits. This shows the constant activeness, support from the IBM community and the potential of Va11yS project to help developers and designers adapt the accessibility techniques in short time.

Previously due to lack of knowledge and lesser known implementation techniques of accessibility, both the designers and developers used to ignore it. But now IBM has given us a very great resource, on utilizing it this problem won’t be there anymore.

I’d been personally using IBM’s Va11yS in my projects to get faster boiler templates kind of thing that does instantly add support to accessibility. No more accessibility issues now, just use this awesome resource by IBM and your project will be accessibility ready in no time.

So this is how using Va11yS designers and developers can quickly build accessible websites without worrying about the overwhelming accessibility regulations and all guidelines.

The project is open source and if you’re a developer please consider contributing to this project.

I, think by now you’ve got a clear idea of what web accessibility is, its importance in the development of any project, the problem, some cool tips for developers and designers and last not but least the Va11yS project by IBM. So, it’s the high time, please start implementing accessibility in your upcoming projects and let me know in the comments if you have any queries regarding it. I’ll be happy to assist you anytime.