Things Developers Should Know : Accessibility


Other than developing the application and getting it to production, there are a lot of things that most developers ignore. Its what differentiates a good developer from a great one. One of those things is Accessibility.

What is accessibility?

Accessibility refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e., unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers).

In short giving people “the ability to access” said information is known as accessibility.

Why should you care?

Well, to answer this question let’s go over some statistics. Nearly 1 in 4 people have some form of disability in the world, and according to WHO that is One Billion of our population.

Here’s an infographic that shows us that

Still not convinced ? Well disability is not necessarily something you’re born with. But it can be conditional. Let’s say you’re walking into a movie theater one hand filled with popcorn and coke and suddenly your boss calls, its urgent, maybe the office is on fire… you don’t know ..and now you only have one hand to reply to that call well.. you’re disabled.

Its really not that different. Each and every one of us is, will be or has been disabled in one way or the other , to not be able to use our bodies and are senses to its full potential can make us disabled and considering we spend 80% of our times on our computers and on the web, Its important that we make our applications “accessible”.

Types of disabilities

Now that I have you convinced about accessibility being an important part of our web application. To understand how to build accessible applications we first need to understand the types of disabilities that people might have and then reverse engineer how to eliminate them.

Now even though there are different kinds of disabilities that people can have we really combine them into 4 main types of disabilities.

Visual

Visual disability is probably the most common of all disabilities, these include people with partial vision,color blindness or no vision at all. People with this disability can choose to use screen readers, braille readers, high contrast modes talk back features or zoom to help them better comprehend the material provided to them.

Motor

People who have physical disabilities like paralysis or a simple hand injury and are unable to use a mouse fall into this category. they can use things like switch devices, keyboards head and eye tracking devices to communicate with the interface.

Auditory

As the name suggest people with partial or complete loss of hearing fall into this category. Having audio and video content with transcripts and subtitles goes a long way for people falling into this category.

Cognitive

All the other type of impairments of the mind fall into this category. These include things like dyslexia or ADHD, people in this category may or may not have a direct issue with consuming content on the web. Regardless there are certain guidelines in place to help people with this kind of impairment.

How to make an accessible application

Now that we have gone over the different types of disabilities that occur. how does on make an accessible application in the first place. So the content we create can reach the millions of people who are unable to consume it.

WCAG or Web Content Accessibility Guide is a guide that helps us have a checklist of things to cover before we move our application to production such that it is accessible by all.

We will now discuss the list of things that we must ensure according to WCAG 2.0 guidelines.

In order for us to have accessible applications WCAG recommends that our applications be Perceivable, Operable, Understandable and Robust.

In order for the content to be the 4 things mentioned above, WCAG decided to have the guidelines be divided into 3 levels of accessibility which are as follow,. A ( Beginner) , AA (Intermediate), AAA (Advanced).

This helps them decide the level of accessibility that any application has based on what problems they solve.

You can find a comprehensive checklist over here at wuhcag blog but we are going to cover the gist of it here as well.

Level A ( Beginner )

1. Non text content

Provide text alternatives for non-text content Some users browse websites with images turned off (as do some users with slow internet connections). These must be true alternatives to the content: they must provide the same information.

A Book

Example : Adding a caption that describes the image

What to do

  • Add a text alternative to all of your images.
  • Add a text alternative to your audio and video (a succinct description of the topic).
  • Add a name to all of your controls (such as ‘Search’ or ‘Submit’).

2. Audio-only and Video-only

Provide an alternative to video-only and audio-only content. Some users will find it difficult to use or understand things like podcasts and silent videos or animations.

What to do

  • Write text transcripts for any audio-only media;
  • Write text transcripts for any video-only media; or
  • Record an audio-track for any video-only media;
  • Place the text transcript, or link to it, close to the media.

3. Captions (Pre-recorded)

Provide captions for videos with audio. As audio and video content is taking over the internet it is really important to help people who can’t rely on their auditory senses completely be aided with something like captions

What to do

  • Add captions to videos

These are helping us make our applications more accessible for Time Based Media. Like making video and audio that may be live accessible for people who can’t consume the particular content live.

4. Info and Relationships

Make your website structure logical. Many people are trying to consume content by tabbing through the website, these may include people who are unable to use the mouse or using a head / eye tracking device. So it is important to have a structure to the website elements to avoid their toggle from jumping around the whole screen

What to do

  • Use a logical structure while structuring the webpage
  • Make sure the toggle goes through the webpage in a chronological order while tabbing
  • Use to define an order when you can’t order the elements themselves in a particular order.

5. Resize Text

Make the text re-sizable. This goes a long way in helping people with poor eyesight as they can easily zoom into the webpage to access the content that they want to read

What to do

  • Avoid fixing the level of zoom in a window with CSS
  • If possible give people the ability to change the size of the fonts on the webpage.

6. Use of Color

Do not use presentation that relies solely on color. One in 12 men suffer from color blindness. That is 8% of all men in the world who would not be able to access your website.

Colors infographic from https://www.ethos3.com/

What to do

  • Tutorials, Instruction and Important information should not rely on color alone
  • Images, graphs and charts can have colors to enhance them but shouldn’t be the only way to understand the said information.

7. Language of Page

Assign language to page, Every webpage has a language assigned to it in its html code. It helps screen readers to pronounce the text in a proper way.

What to do

  • Set the language in your template code like this
<html lang=”en”></html>
  • you only need to set this once in your main template page.

8. Identify the Errors

Clearly identify the errors on page. While filling forms and input fields we tend to make mistakes quite often. People suffering from disabilities are highly prone to such mistakes as well.Hence it is important to get appropriate feedback when we do so.

Material Design Error Form

What to do

  • Identify and explain to the user any mistakes that you can detect automatically.
  • Add error explanation close to the error, showing what is wrong and how to fix it.

The next part we go to is the AA Errors, this the second level of accessibility and is considered as an intermediate level.

Level AA (Intermediate)

1. Prevent Error in Sensitive Data

Sensitive data like bank account passwords or legal data has to be error free at all costs. It is hence the responsibility of the developer to add appropriate measures that prevent errors in such situations

What to do

  • Item like legal data, transaction information or bank account information should be reversible.
  • Add a confirmation page in places where the user is deleting something or adding sensitive information that cannot be reversed.

2. Audio Description

Some of your users will rely on audio description to help with videos. Adding audio description to your videos means these users have the same information as everyone else.

What to do

Make an alternative version of your video with an audio description soundtrack and link to it from near the original content.

3. Resize Text (200%)

Make sure that the text is re-sizable up-to 200%. Some of your users with visual impairments will need to resize text in order to understand it fully. You should allow for up to a 200% resize of text without losing any functionality.

A very large size text example

What to do

If your website doesn’t resize correctly to at least 200% in a browser, add a feature that enables users to resize text (by CSS) based on three or four predetermined options, including 200%.

4. Don’t add Images for text

Many users on a slow internet connection or some form of visual impairment be using a text-only browser and in cases like these images for text can become a problem to understand.

This is an image of written text, Avoid this.

What to do

  • Do not use an image of text when you can use plain text.
  • Display quotes as text rather than images.
  • Use CSS to style headings.
  • Use CSS to style navigation menus as text.

5. Focus Tab is clearly visible

As we covered in the A level. Many people tend to tab through your website and it is important to have all menus in a chronological order. It is also very important that users can easily see where there focus is when they are tabbing through the website.

What to do

  • Make the keyboard focus visible on all elements (menu items, form fields, links, etc…).
  • Ensure that appropriate CSS properties are used like underlines and borders to highlight focus.

6. Uniformity of Elements

Uniformity in elements like buttons and links is of key importance to good design. However it also plays a very important role in accessibility as many users rely on this uniformity to understand information

What to do

  • All links and buttons with similar functionality look similar.
  • Use appropriate CSS properties to highlight text, labels and images.
  • If you are not a designer try to use pre-existing UI kits.

7. Multiple ways to access pages

It is important to have multiple ways to access pages in a website specially if it is a large website. One of the best ways to do this is to have a site map. A sitemap not only provides the user with a birds eye view of the entire website, it also help search engines index your website in a better way.

What to do

  • Add a sitemap to your website.
  • Optionally include a search bar in the header for better functionality.

8. Contrast ratio

The contrast ration between your text and background should be at least 4.5:1, This helps increase readability of the content and helps people who are color blind as well.

http://colorsafe.co is a nice tool to for developers to test text contrasts

What to do

  • Make sure that your contrast ratio is at least 4:5:1
  • Try to keep your dark text over light background or light text over dark background.
  • Avoid gradients of the same color for light and dark background
  • Use tools like colorsafe to make sure your text is readable

Level AAA (Advanced)

1. Sign Language

For advanced level of web accessibility, it is important that we take care of people who depend on sign language to understand context.

What to do

  • Make a version of your video or audio with a sign language interpreter.

2. Avoid Time Limits

Many people take time to get through content on your website this can include screen readers or people slowly trying to understand the given information, It is hence important not to have time limits on your website.

Countdown timer from https://dribbble.com/shots/1488722-Poker-Timer-Minimal-Blue-Theme-GIF

What to do

  • Do not use time limits unless it is something like an auction or video stream.
  • If you have time limits, give the user the option to turn off these time limits.

3. Reading Level

There may be readers who have not had appropriate schooling. It is hence important that your content is readable by public who have up to 9 years of schooling experience.

What to do

  • Make sure that the language is simplified so users can understand your content easily
  • Try to break up the information in headings subheadings and support it with diagrams for better understanding.

4. Flashing Content

It is important to avoid media or content that flashes in front of the user at high frequency. It can also be detrimental to someone’s health.

What to do

  • Avoid any media that flashes more than 3 times per second.

5. Contrast (Enhanced)

In AA levels we established the contrast should be at least 4:5:1. In AAA level we have to go one step further and ensure that the contrast ration is at least 7:1

What to do

  • The solution is similar to that in AA level, make sure that the colors are contrasting, light text on dark background or dark text on light background.

Many people use screen readers or magnify the page to view content might be able to see just the link itself or a very small area around it. It is hence necessary to clearly define the purpose of a link from the given text.

What to do

  • Make sure the hyperlinked text clearly indicates its purpose

7. Avoid Changing Elements Unless Requested

Continuously changing elements on the page without request can cause strain and be highly distracting to many people. It is therefor recommended to avoid any change in page elements unless explicitly requested by the user.

What to do

  • Try to keep pages static as they are found to be the most user friendly in all of UX principles.
  • If you are trying to provide information like news that constantly updates provide a way to pause it.
  • Avoid things like auto submission of forms.

8. Use Breadcrumbs for location

Many users may not understand the site structure. In times like these breadcrumbs really help users navigate through the website. something like this.

What to do

  • Add breadcrumbs to help users navigate through the website.
  • Add a sitemap to help users get a hawk eye view of the entire website.

This list does not cover all the guidelines but it surely gives developers a start toward building better and accessible applications.

Once again you can find all the web accessibility guidelines here at w3c. You can also read this great blog which gives a complete guide and more on web accessibility .