This website uses cookies to ensure you get the best experience.

27 January 2025

Why every Web Developer should learn web accessibility (A11y)

Imagine trying to use a website and finding out it only works for 75% of it's users. Annoying right? Well that's what happens when we overlook accessibility.

The latest Family Resources Survey states that nearly one in four of the total population are classified as disabled. During the past few years the importance of accessibility has been a huge part of my Web Development journey, due to certain clients, and it's pushed me to make sure each website I build can be used by eveyone.

What is Web Accessibility?

Web Accessibility, or A11y, is about creating content, design and development that can be used by everyone. This includes people with visual, auditory, motor, and cognitive impairments.

It should be something that is thought about throughout an entire process instead of trying to retrofit as an afterthought. 

By making your website accessible, you're helping to create a more inclusive digital world. As a web developer, you have the responsibility to ensure that everyone can use the web without barriers against them.

Some individuals with motor or cognitive disabilities will use the web differently to others, including using software such as screen readers or color safe tools. Making sure your code takes these thoughts into consideration is incredibly important and will make you into a better developer.

How to get started with Web Accessibility?

Understand WCAG (Web Content Accessibility Guidelines)

The Web Content Accessibility Guidelines are universal guidelines for ensuring web accessibility created by the World Wide Web Consortium (W3C). It outline three levels of conformance: 

  • A
  • AA
  • AAA

There are four categories that you should use to ensure your website follow their guidelines:

  • Perceivable: Making text readable and ensuring that images have alt text.
  • Operable: Ensuring the site is navigable via keyboard (no mouse required).
  • Understandable: Clear language and predictable navigation.
  • Robust: Ensuring compatibility with assistive technologies (screen readers, etc.).

Common accessibility features to implement

While taking all user's needs into consideration may take time, there are a few things you can start doing right away to make your websites more inclusive for all users:

  1. Keyboard navigation: Many users will use their keyboard to navigate throughout a website. Keeping this in mind and making sure users can tab through links, buttons and forms easily is something ever developer should be keeping in mind. Incorporating a Skip to Main Content link will also improve your sites accessibility to all users can get to the content they want as quick as possible.
  2. Alt text for images: This describes images and other visual media on a website for users who can't see them. It's one of the most critical accessibility features for screen reader users, so it needs to be context-appropriate and concise.
  3. Color Contrast: Making sure you have adequate colour contrast between text and background clements. This will help readability and makes sure everything is accessibile for users with low vision or colour blindness.
  4. Video Transcripts: Transcripts are essential for users who are dear or hard of hearing. While Youtube / Vimeo have built in auto-transcripts, it's always worth adding your own as this will be more accurate.
  5. Accessible Forms: Forms should always have clear and visible labels and instructions to all users know exactly what data they are entering.
  6. Descriptive link text: There's nothing worse than having a button that says "Read more". It doesn't provide a user with much information about what they're clicking into. Going into a bit more detail, for example: "Find out more about our work", gives them a clearer idea of what that link will take them to.

Tools and Resources

The market for accessibility tools has surged in recent years, which is lovely to see. For example:

  • Chrome DevTools has accessibility audit tools that make it easy to spot common issues.
  • Axe Accessibility Checker: A browser extension that checks your website for WCAG compliance.
  • WAVE: A web accessibility evaluation tool.
  • Screen reader tools: Like VoiceOver (Mac) or NVDA (Windows) to test your site from the perspective of someone using a screen reader.

The rise of AI

As AI and voice technologies become more integrated into the web, accessibility is going to be more critical than ever. Now is the time to start learning and implementing accessible design principles to get ahead of your competitors.

Rewards for investing in accessibility

By creating a more inclusive web experience, you will also see the rewards for your client. You can reach a larger audience and boost your SEO rankings by improving a websites accessibility.

If you have 20% of users with accessibility problems, such as not being able to tab through your menu, they will leave your site and go somewhere else. Google will track this and you will organically lose 20% of your users. 

You'll also find more and more businesses are asking for accessibility to be a consideration, or even mandatory, during your discussion stage. So showcasing other projects where this has been prioritised will boost your portfolio.

Leading the way to an inclusive digital world

Everyone should have access to the web, and web developers are in a unique position to ensure that happens.

Start small by reviewing your website’s accessibility and see how you can make improvements. You'll be able to work your way up to knowing exactly what to look for during each project and, hopefully, it'll become something you are passionate about including in each of your builds.

More articles

The Women of Toward

I attended the online conference Women in Tech, hosted by the IGPP. With a variety of speakers, the day was filled...

Read more

Check Craft CMS media usage with our Asset Locations Plugin

Today we launched Asset Locations for Craft CMS 4, which has been in development for the last few weeks.

Read more

Behind the site: STORM+SHELTER

STORM+SHELTER are a film and video production company. We knew their new site had to contain a lot of videos,...

Read more