Is your website usable by everyone? A beginner's guide to web accessibility.

Contents

The vast majority of websites are not accessible. Web accessibility prevents your site from excluding users with disabilities. In this article, I want to explain the importance of web accessibility and how easily you can implement it on your site.

Imagine your business has an office on the top floor of a high-rise building. The building is incredible. Outside, its majestic design stands out from the other corporate monoliths like a ruby on a gravel path. Inside, its offices perfectly streamline the work environment for every business it houses. Despite all this magnificent design work, the building lacks disabled access. Today, you have an important meeting with a prospective customer. They arrive in a wheelchair. Suddenly, your splendid office building is unfit for purpose. The customer, dismayed at your ignorance of their needs, turns around and leaves. You lose out on their business!

I realise disabled access is a legal requirement in buildings now. If such a building existed, its owners would be liable for several lawsuits. The same does not apply to websites. Whilst there are laws in place regarding the accessibility of websites. The legislation is not as rigidly enforced as in the real world. In many respects, it remains up to the goodwill and diligence of businesses, web designers and developers to implement accessibility features. Having an inaccessible website could be harming your business without you knowing. Not only does it limit the number of potential customers from your website. It could create a negative reputation for your business as uninclusive.

So, where do we start with web accessibility?

First, we will consider what we mean by an "accessible website". WCAG (Web Content Accessibility Guidelines) sets the standards for web accessibility. They state an accessible website should be Perceivable, Operable, Understandable and Robust. We shorten these principles to the POUR acronym. Let's dive deeper into what each principle is.

  • A user can navigate a Perceivable website easily through any means. Consider our five senses. It is unlikely a user can taste or smell your website. Can your website content be perceived audibly using a screen reader? Can it be perceived with touch using braille? Can people read everything clearly regardless of any colour blindness or sight issues?
  • An Operable website refers to one we can use on any device. It also refers to being able to navigate the site using different input methods. Consider someone who can't use a computer mouse. Can they still navigate your site using their keyboard?
  • An Understandable website must be easy for users to interpret and use. It is easy to fall into the trap of thinking convention will see you through. It is better to be explicit. As my client, Paul Cooney, said, "little old grannies should be able to use it". Consider your buttons, links and form inputs. If someone used the internet for the first time, would it be easy to use your website?
  • A Robust website should work regardless of the technology receiving it. Consider how fast technology advances. It is easy for Developers like me to build with the latest and greatest tech. We must still remember to build for older technology and devices so that website content remains accessible to the maximum number of users. Consider also that many users navigate the web in different ways. These go beyond just laptops and phones. They also include assistive technologies like screen readers and even braille. 

These ideas may all seem vague at this point. Fortunately, WCAG provides a specific set of guidelines for accessibility adherence. These guidelines describe three levels, or standards, of web accessibility. Level A is the lowest level. At this point, you have hit the minimum standard for web accessibility. The guidelines at level A are the highest priority and the easiest to integrate. Next, level AA goes slightly more in-depth. Achieving this level of accessibility means you offer an inclusive web experience. It is not perfect. It is still a good target for most websites to aim for. Finally, there is level AAA. At this level, there is nothing more you can do to offer an equivalent experience to all users. It is rare to reach this level and is usually a deliberate choice based on the site's user demographic.

What steps can we take to make our websites more accessible?

I will start by saying HTML itself is inherently accessible. In theory, building websites with well-written HTML and following all best practices will take you most of the way with accessibility.

In reality, there is more to it than that. It is less and less common for Developers to build websites by writing HTML code from scratch. Often, Developers are not involved. It is more common for people to use website-building tools with little to no control over the HTML code. For these cases, it is worth understanding how to test your website and implement accessibility best practices.

How do you test your website's accessibility?

There are two main tools that I use for this. First is Google Chrome's Lighthouse testing facility. This tool offers you rudimentary guidance on how to improve a web page's accessibility. Achieving a top score here does not mean your page is accessible. It is, however, a good start. If you score 100/100 on Lighthouse, you are close to level A WCAG compliance.

The second, more comprehensive, tool I use is WebAIM's site checker. This tool works like Lighthouse but offers more in-depth guidance on fixing accessibility issues.

If you want to meet a certain WCAG standard, WebAIM offers a checklist to help you test your site. You can filter the list by your target standard. Then, it shows you everything you need to do to meet that standard.

We can follow all the guidelines and do all the testing we like. Someone without a disability can never truly understand the pain points when navigating a website. Doing user testing with disabled and less-abled people will give you the best first-hand feedback on where your site could improve.

What are the most common accessibility barriers on websites?

Referring back to the POUR acronym, we can use this for guidance on the quick wins to better our website's accessibility.

Starting with Percievability, the main focus is your website's media content. Remember, not all people interact with media in the same way. Providing text alternatives for all media will enable people to engage with the content regardless of ability or disability. 

Alternative text for images is vital. AltText.AI is a helpful, low-cost tool for automating your alternative text if you don't want to write it yourself. If possible, including an audio description with videos can only improve your accessibility. If a user can't hear, they will need closed captions for videos and transcripts for audio.

Now, we move on to Operability. A quick and easy operability test is navigating each page with your keyboard. Hit the TAB key to advance through the page. Hit Shift + TAB to move backwards through the content. Your target is a logical flow through the content. Another commonly missed yet important feature is a "skip link". This link means users can skip over the navigation and go straight to the main content.

Understandability means leaving nothing open for interpretation. Be as explicit as you can. Consider a link to a blog post that says, "Read more". An ordinary user has the visual context of the link sitting next to the article's title. They can see what the link is for. Without that visual context, things get left to chance. Being specific with your calls to action brings certainty. Instead of "Read more", try writing "Read more about how x".

For a Robust site, test, test and test again. We can't just test our website for the majority of users. We must test using different technologies. All Apple products come with a built-in screen reader. Learn how to use it. Then, you can manually test your website to see if it functions well with one. Most testing processes will include a cross-browser and cross-device test. Including assistive technologies in this should be a no-brainer.

That's a lot of information. Is there any more to add?

I think as a "brief" overview, that is enough. Web accessibility is becoming an ever more specialised subject. Even as a Front-end Developer, I am no expert in making accessible websites. I have much more to learn.

I hope this article is a good primer for you on the fundamentals of web accessibility. We can all do more to make the web more inclusive and accessible. 

If you want to learn more about web accessibility, I have included some important links below. To talk to me about how I can help improve your website's accessibility, you can get in touch here.