Why Accessibility Matters in Web Development

1st June 2023 Why Accessibility Matters in Web Development

Accessibility is the practice of making your websites usable by as many people as possible, regardless of their abilities or circumstances. It's always worth remembering that not everyone can use a mouse or has brilliant eyesight. And they should be able to use the web as much as anyone else, so why make it harder for them? It is not only a moral obligation but also a good business strategy (why lose potential clients/customers because they can't use your website?) and a rewarding challenge for web developers.

What is accessibility?

Accessibility (oftentimes abbreviated to A11y, thanks to the A11y Project) means enabling people with disabilities to use websites, even when those people's abilities are limited in some way.

For many people, technology makes things easier. For people with disabilities, technology makes things possible.

People with disabilities are not a homogeneous group. They have diverse needs and preferences and use different tools and techniques to access the web. Some common types of disabilities that affect web access are:

  • Visual impairments: blindness, low vision, colour blindness.
  • Hearing impairments: deafness, hard of hearing.
  • Motor impairments: paralysis, tremors, arthritis.
  • Cognitive impairments: dyslexia, autism, dementia.

Some people use assistive technologies (ATs) to interact with the web, such as screen readers, screen magnifiers, speech recognition software, or switch devices. Others may use adaptive strategies, such as changing the font size, colour contrast, or keyboard shortcuts - you should always be able to tab your way through a website visually.

Accessibility also benefits people without disabilities who may face temporary or situational limitations, such as using a mobile device, having a slow network connection, or working in a noisy environment.

Why is accessibility important?

Accessibility is important for many reasons. There are four main ones, in my opinion.

1. It is the right thing to do.

Providing accessible websites is part of respecting human rights and dignity. It also promotes diversity and inclusion in the digital world. Everyone should be able to use any website. Just because someone has a disability doesn't mean they should be excluded. Yeah, they might not get the same experience, but if you can make it as close to that as possible, then it should be done. The basics should be the minimum.

2. It is the law in some places.

Many countries and regions have accessibility laws or regulations that require websites to meet certain standards or guidelines. Failing to comply can result in legal actions or penalties.

3. It is good for business.

Making websites accessible can increase your potential audience, improve customer satisfaction, enhance your reputation, and reduce costs and risks. Think about lost business because someone couldn't navigate your website just because they couldn't use a mouse. Or they can't read which button does what because the contrast is off. It could result in some large sums of lost income through missing some basic additions.

4. It is good for web development.

Following accessibility best practices can improve the quality, usability, and maintainability of your websites. It can also boost your SEO (search engine optimization) and performance. The easiest way is to build with accessibility in mind. However, there is still plenty that can be done to an existing website. Building with accessibility in mind is a good practice.

How can you make your websites accessible?

Making websites accessible is not a one-time task or a checklist item. It is an ongoing process that involves planning, designing, developing, testing, and maintaining your websites with accessibility in mind, if it's something you want to do right.

There are many resources and tools that can help you learn and apply accessibility principles and techniques. One of the most authoritative and comprehensive sources is the Web Content Accessibility Guidelines (WCAG) 2.0, developed by the World Wide Web Consortium (W3C). It's full of invaluable information, so I would highly recommend that web developers read through it.

WCAG 2.0 provides a set of recommendations for making web content more accessible to people with disabilities. It covers four main principles, known asĀ  POUR. They are:

  • Perceivable: Web content must be presented in ways that users can perceive it through their senses.
  • Operable: Web content must be operable through user interface components and navigation.
  • Understandable: Web content must be clear and understandable to users.
  • Robust: Web content must be compatible with current and future user agents and assistive technologies.

Each principle has a number of guidelines that explain the goals and provide success criteria and techniques for meeting them. The success criteria are organized into three levels of conformance: A (lowest), AA (medium), and AAA (highest).

To make your websites accessible, you should aim to meet at least level AA of WCAG 2.0.

This means that you need to consider various aspects of web development, such as:

  • HTML: Use semantic elements for their intended purpose, provide alternative text for images and other non-text content, use headings and lists to structure your content, etc.
  • CSS: Use relative units for font sizes and layout, provide sufficient colour contrast between text and background, avoid using colour alone to convey information, etc.
  • JavaScript: Ensure that your dynamic content and interactions are keyboard accessible, provide feedback and instructions for users, avoid creating keyboard traps or unexpected changes in context, etc.
  • ARIA: Use Accessible Rich Internet Applications (ARIA) attributes to add extra semantics and roles to your HTML elements when needed, especially for complex UI components or dynamic content updates.
  • Multimedia: Provide captions and transcripts for audio and video content. Avoid using autoplay or flashing effects that can cause seizures or distractions, etc.
  • Mobile: Ensure that your websites are responsive and adaptable to different screen sizes and orientations