Web accessibility basics for developers

DevelopmentCategory
7 min read
Madhavi Vaidya

Imagine opening a business and having only limited access to certain set of customers. Unless it’s for an exclusive niche target audience, why would anyone want to limit their customers? Wouldn’t that mean missing out on significant sales and a loss to the business owner? Similarly, an online business like an e-commerce web site that isn’t designed for web accessibility may face limitations in growth potential.  

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

E-commerce websites that aren’t designed for web accessibility may miss out on business from customers who have disabilities or impairments. 

In order to enable web access to everyone, one needs to design a website in such a way that people with limitations can also have a smooth user experience. This very approach to facilitate an all-inclusive web experience is what web accessibility is all about. 

Related: Top five programming languages you should know

Emergence of web accessibility as a standard

Web accessibility simply means making your website accessible to all visitors including those with:

  • Temporary or permanent physical disabilitiesA person doing sign language
  • Low vision
  • Speech disabilities
  • Blindness and other limitations

The need for web accessibility emerged long back in the fall of 1996, when web accessibility, or W3C as a project, was conceived by a few individuals.

Owing to the complete lack of standard guidelines and real solutions for people with disabilities and limitations, the W3C wanted to create a more user-friendly web experience.  

The Web Content Accessibility Guidelines (WCAG) finally came into existence in the year 1999.  

These guidelines are built on four principles of POUR:

  • Perceivable
  • Operable
  • Understandable
  • Robust

How web accessibility impacts users with disabilities 

As mentioned earlier, web accessibility means creating a website that is accessible to one and all, including individuals with disabilities and limitations.

Person holding a sign that reads “Say What?

People who may have physical and speech disabilities or have hearing loss, deafness, blindness, cognitive disabilities etc. face difficulties in getting information if the website they’re trying to use isn’t optimized for web accessibility.

It can hamper their overall user experience and also prevent them from using the website to its optimal level.  

If you focus on designing a website keeping in mind the need for web accessibility, your user experience will only get enhanced for every individual — including those with disabilities and limitations.

Your users will also perceive you as someone who cares and values them, thus impacting your brand image positively. 

Related: An introduction to UX research

Keeping up with standards and guidelines 

Considering how website accessibility is necessary for everyone to open their business for people with limitations, let us take a look at some of the guidelines based on the four main principles of WCAG.  

Perceivable

Perceive here means that all visitors must be able to understand and perceive the information and media that are presented on the website.  

Operable

Operable means designing the website in such a way that every user should be able to utilize every part of the website including:

  • Navigation
  • Selecting a link in a particular menu
  • Playing a video
  • Being able to pause and record a video, etc

Understandable

Any graphical or written content must be presented in a way that can be easily understood by people with disabilities.

Any sort of information or graphics that is placed in a disorderly manner on the website or is cluttered in any way can make it difficult for people with limitations to fully understand the content and even find it on the website. 

Robust

The information and data on your website must be comprehensible and easy to interpret for those who use assistive technology.

This means that your HTML code must be written in such a way that assistive technologies such as a screen-reader should be able to decode it.  

How to make your website accessible? 

Here are some specific guidelines to keep in mind while designing a website to increase its web accessibility factor.

Guidelines that make content easy to perceive 

Let’s start with the WCAG guidelines related to the goal of Perceivable.

Adaptable content

Adaptable content simply means creating your HTML code in such a way that even if any of your page styling is removed, it will not affect the structure of information on your website, thus facilitating easy access to content for users with disabilities. This may include:

  • Ordered and unordered list elements
  • Type of text (e.g. bold, italics)
  • Proper headings

Text alternatives

For all the non-text elements on every page such as videos, images, graphics, audio content etc. the website must have text alternatives.

This can enable people with low vision or blindness to understand such content.

One of the best ways to achieve this is to use ‘Image alt text’ that describes each image accurately. This can tell the screen-reader that there is an image in the content and tell the viewer what the image portrays.  

Time-based media

For any time-based media such as audio or video content, a full written transcript can be the perfect solution. People with limited hearing abilities can benefit a lot from this alternative.  

Easy to read and hear

All content on your website should be optimized to make it easy to read and hear, too.

Utilizing color contrast for those with color blindness can make it easy to read and comprehend visual information on the website. Experts recommend high contrast between text and background colors, including text on images, icons and buttons. Read more on this

This helps those with low contrast sensitivity, as well as color blindness understand the content on your web pages.

Screenshot of Adobe closed captioning feature

Guidelines for operable web accessibility

Let us now explore the guidelines related to making a website Operable.

Easy navigation

One of the most important and fundamental elements of any good website is easy navigation.

Navigation gets even more important for individuals with disabilities.

Make sure you have clear titles, links and keyboard focus navigator to make your web pages usable by everyone.  

Complete functionality

Using a mouse may not be that easy for people with impairments. In case of web accessibility, make sure you integrate complete functionality through the keyboard. 

In order to make some major changes for a pleasant user experience for individuals with challenges, the HTML code must be parsed. You need to adopt some significant design and development changes in order to ensure web accessibility.  

You can get further details on the WCAG goals of making web pages Understandable and Robust in this developer resource.

Here are some more ways to enhance and optimize web accessibility 

  • Pay attention to typography
  • Watch paragraph widths(no longer than 80 characters)
  • Use large body copy
  • Avoid justifying text
  • Minimize use of uppercase text
  • Include transcripts and subtitles
  • Use audio descriptions
  • Do not auto-play

Resources to help you with web accessibility 

There are some interesting tools that can help you to make web accessibility easy to implement. 

  • WAVE Evaluation Tool
  • DYNO Mapper 
  • SortSite
  • A11 Color Contrast Accessibility Validator
  • WCAG Compliance Auditor

Here is a list of books to understand the dynamics and finer nuances of web accessibility:

  1. Inclusive Design for a Digital World - Regine Gilbert
  2. Accessibility for Everyone - Laura Kalbag
  3. Accessible Vue - Marcus Herrmann
  4. Color Accessibility Workflows - Geri Coady
  5. HTML5 Accessibility - Joshue O Connor

Accessibility is every developer’s job 

Code reflected on a man's face

Web accessibility should ideally be a part of every website design. It shows that you care for every customer or user that comes to your site.

It is more about the company culture or design culture that speaks volumes about empathy and consideration when it comes to web accessibility and user experience.  

If you develop websites for clients, they will thank you for presenting them and their products or services in the most inclusive way possible.

________________________________

Start taking back your day

We built the Hub by GoDaddy Pro to save you time. Lots of time. Our members report saving an average three hours each month for every client website they maintain. Are you ready to take back that kind of time?

Sign up for Free