Your 10-minute Guide to the Web Accessibility Initiative (WAI)

Seven out of 10 disabled visitors who come to your site will leave if it is inaccessible. In the UK, that result cost businesses £17.1 billion (approximately $22 billion USD) in revenue last year.

If you're selling goods or services online, these figures should make you sit up and take notice, especially considering that 15% of the world's population faces some type of disability. If most of your disabled audience leaves, you're missing out on a chance to engage and convert them into customers.

No matter the type of website, ignoring accessibility can hurt the amount of time people spend on your site, the number of email signups you receive, or how many contact you. Investing time and money in making your website accessible will benefit your business in several ways.

Why Create an Accessible Website

So, what advantages do you get from improving your website's accessibility?

An accessible site shows you care about your users. Some companies will argue that "we don't have any disabled users," yet around 1 billion people worldwide have a disability, according to the World Health Organization. That's about 15% of the world's population.

Not all disabilities look the same. Some disabilities are long-term, like vision or cognitive impairments. A disability can also be temporary — if you've ever broken your arm or wrist, you'll have quickly noticed how typing one-handed slows you down. Your visitors can be disabled by a situation, too. For instance, imagine listening to your favorite podcast on a noisy train as opposed to a quiet library. Furthermore, we tend to become more disabled with age — nearly half of people over 60 have some form of disability.

The point is, disabilities exist everywhere and in many ways. So, it's important to pay attention to how you can assist your potentially disabled prospects.

You tap into the immense spending power of disabled people. Disabled people in the USA control an estimated $544 billion in disposable income per year. In the UK, the Purple Pound (the spending power of households with at least one member with a disability) is £249 billion. An inaccessible website will miss out on this sizable market.

Accessible websites tend to be more usable for the general population. For example, as well as benefiting deaf/hard of hearing visitors, captioning videos also helps people with autism or ADHD understand better, assists those who are learning a new language, clarifies muffled or indistinct speech, and boosts engagement for all users.

You avoid the risk of a lawsuit. The number of web accessibility lawsuits rose nearly 185% from 2017 to 2018, from 814 to 2314 cases. In 2019 there were 2235 cases. A lawsuit against Domino's Pizza from a blind man who couldn't order on their website has been one of the most high-profile cases.

If you delve into this topic, you will quickly come across the Web Accessibility Initiative, which is there to help you understand the needs of disabled Web users and create sites that they can use easily.

What is the Web Accessibility Initiative (WAI)?

The Web Accessibility Initiative (WAI) is a resource to make the internet more accessible for disabled people. Set up by the World Wide Web Consortium (W3C), the WAI develops accessibility standards and offers implementation guidance. The two best-known standards are the Web Content Accessibility Guidelines (WCAG) and WAI-ARIA (Accessible Rich Internet Applications).

What is WCAG?

The Web Content Accessibility Guidelines (WCAG) is the set of guidelines underpinning most countries' accessibility legislation. The latest version is WCAG 2.1.

WCAG addresses the needs of people with different types of disabilities: vision impairment, hearing loss, motor impairment, and cognitive disability. Cognitive disability covers a large range of conditions that affect thinking and understanding, including autism, ADHD, and dyslexia.

The guidelines are organized round 4 principles:

1. Perceivable
2. Operable
3. Understandable
4. Robust

Those guidelines are subdivided into success criteria. Some of the simplest ones to address are:

• 1.1.1 Non-text content: Make sure that meaningful images on a page have alternative text which conveys their meaning.
• 1.3.1 Info and Relationships: Use headings to structure a page. Start with a Heading 1 as your page title and use Heading 2 for subheadings and Heading 3 for sub-subheadings.
• 1.4.3 Contrast (Minimum): Avoid combinations with poor color contrast e.g. light gray text on a white background.
• 1.4.5 Images of Text: Use real text rather than images of text, except for cases like decorative text or logos.

What is WAI-ARIA?

WAI-ARIA, usually shortened to ARIA, is a method of making custom-built controls more accessible.

ARIA is mainly for the benefit of blind users and others who use screen reader software that reads out the content of a page.

For example, an accordion widget that shows and hides content when a heading is clicked or tapped on will need ARIA added to it to indicate when the widget is in an expanded or collapsed state.

Using ARIA is an advanced topic: if ARIA code is applied incorrectly, it can cause more problems than it solves. To use ARIA appropriately you are best consulting with an accessibility specialist.

How to Create an Accessible Site

To make your website accessible you need to learn more about the access needs of disabled people, learn good web accessibility practice, check for common accessibility errors and correct them if you find any, and communicate to your visitors how you are championing accessibility. Let's start with adopting a writing style that supports accessibility.

Write Accessible Content

Use headings on your page if you aren't already. Headings make web pages easier to scan. They provide structure for screen reader users and help them to navigate the page.

Keep your writing simple and clear. Long sentences and jargon are hard to understand. It's especially important if you write instructions or error messages. Your visitors are more likely to give up than persist if they don't comprehend something.

Include alt-text on images. One of the most common accessibility mistakes is neglecting to write alt text for images. Make sure your alt text captures the essence of what the image is about. Alt text should be succinct and purposeful.

Write link anchor text that is meaningful. "Click here" isn't appropriate for someone on a mobile device. For a screen reader user, who may navigate by a list of links, it doesn't tell them anything about the purpose of the link. Use descriptive text for all anchor text that you're hyperlinking.

Create transcripts for all media. Make sure that you provide podcast transcripts as an alternative for your audience who are deaf or hard of hearing. Synchronized captions are also essential for this audience to follow along with videos. Remember, though, that it's not just people with a hearing impairment that benefit from video captions. A staggering 85% of Facebook video is viewed without sound, so captioning your videos will give you an edge over others who don't use captions. Furthermore, transcripts can be crawled and indexed by search engines, and also boost page views and engagement.

Now that you've learned some of the practical accessibility steps you can take, let's look at some accessibility mistakes that you might be making.

Develop an Accessibility Statement and Policy

WAI's Planning and Policies resources will help you define your approach to accessibility. Two important documents to write are your website's accessibility statement and your organization's accessibility policy.

Writing a Website Accessibility Statement

The Web Accessibility Initiative provides a handy website accessibility statement generator.

An accessibility statement is intended for your website visitors and should:

1. Outline your commitment to accessibility.
2. Be written in plain language.
3. Say what accessibility standard and compliance level the website is intended to meet.
4. Explain any limitations with accessing the content — ideally with a date when these will be addressed.
5. Provide contact details for users to report any accessibility issues, and let users know when they can expect a response.
6. The date of the statement, or last update.

Developing an Organization Accessibility Policy

An organization accessibility policy goes beyond a website accessibility statement and states your organization's overall accessibility strategy. This could be a public document or one for internal use.

The Web Accessibility Initiative has advice on developing organizational web accessibility policies. It recommends referencing the accessibility standards you plan to use and the conformance level. You should also mention what websites the policy covers, your target dates for achieving conformance, how you will handle third-party content, and when the policy is next due for review.

Image Source

Cornell University has an excellent example of a web accessibility policy. As well as taking on board all the Web Accessibility Initiative's ideas, it goes above and beyond. The policy clearly states which laws it is based on, defines any unfamiliar terms, says who is responsible for implementation, and who should be contacted in the event of any questions or concerns.

A written policy means that it's more likely that good accessibility practice will continue in the event of staff changes.

Common Accessibility Mistakes

The home page shown below has ten accessibility mistakes which are marked with numbers. Most of the issues affect how a screen reader reads out the content to a blind user.

Image Source

Each problem has a note explaining what the issue is, and how it relates to the Web Content Accessibility Guidelines. As an example, here is note five.

Image Source

Issues one, two, four seven, eight and ten all relate to the labeling of images for screen readers. The image alt text is either missing, inappropriate, or just wrong.

The third problem is that it isn't obvious that the news headlines are links. Usually a user would expect to see a color change or underline when they hover over a link, but this doesn't happen.

Issues five and seven are problems with link destinations being unclear. The "Read more…" link doesn't say where the link goes. Someone who uses a screen reader or screen magnifier will have to stop and read the surrounding text for context. The "More >>" image link has no alt text, so it also fails to signpost the link destination to a screen reader user.

The sixth mistake is a structural problem in which the sentences of the news stories run together when read out by a screen reader. As a result, the text sounds nonsensical.

Issue nine is about using the correct code. The list with Killer Bees and Onions isn't coded as a bullet list and won't therefore be announced as such by a screen reader.

At this point you may be curious about how you can tell if a web page is accessible, so accessibility testing is what we'll look at next.

Web Accessibility Testing

The Web Accessibility Initiative's easy checks are simple accessibility tests you can do on a web page. These include checking the page title, examining image alt text, reviewing headings, and testing forms. The guide tells you exactly what to test, how to test it, and what to do if it isn't accessible. Solving any problems you find will give you some accessibility quick wins.

WAI has user stories to help site owners empathize with disabled users and test their content. One of WAI's user stories involves a fictional user named Kaseem, who is a deafblind teenager. Kaseem uses screen magnification software to read web pages, as she can only see a small part of the screen at once. Sometimes when she magnifies the content, text overlaps or becomes cut off and she can't read it.

You can test your web pages for users like Kaseem by using your browser's zoom mode to magnify the page to see if all the content is readable. In Chrome, click on the three-dot menu at the top right, and click on the + icon to increase the zoom level. Everything on the page will be magnified by that percentage. The keyboard shortcut for zooming in is Ctrl + on Windows, and Cmd + on a Mac. To zoom out it's Ctrl – or Cmd -.

Image Source

As Kaseem prefers to enlarge only the page's text as opposed to the whole page, you should test that as well. Firefox browser allows you to switch from zooming the full page to zooming text only. Press the alt key to show the menu bar and then select View, Zoom, then Zoom Text Only. You can control the zoom level via the menu or the keyboard shortcuts.

Image Source

The image from an online bike shop below shows that some of the text overlaps when set to 200% text zoom in Firefox. It makes the special offers on the bikes harder to read.

Image Source

Checking accessibility by hand like this is necessary in many cases but takes time. Fortunately, there are tools to make testing easier. The Web Accessibility Initiative has a comprehensive list of automated accessibility checking tools. You can filter the list by the guidelines you want to comply with, languages supported, and other criteria.

As automated checkers can't pick up all accessibility barriers, some manual testing is necessary. If you have the resources to do user testing, it's even better if you can involve disabled users. This is because disabled users are experts in their own conditions and needs and can pick up on problems that even experienced accessibility practitioners might miss.

If you ask for feedback from disabled users, test with a variety of people. Give them plenty of time to complete tasks, and let them use their own equipment.

Now that you know more about web accessibility and how to test for it, here are a few additional resources to assist you in making your site more accessible..

Web Accessibility Resources

If you're interested in learning more about web accessibility, the Web Accessibility Initiative has a few helpful resources that we cover below. If you're new to the subject, start with the Accessibility Fundamentals section.

Reading the Introduction to Web Accessibility page or watching the four-minute introductory video will give you an overview of web accessibility. You'll discover more about how disabled people browse the web and any technologies they use to help, how web pages can be made more accessible, and how accessibility can help all users, not just disabled people.

The W3C and WAI have recently launched a free Introduction to Web Accessibility course designed for technical and non-technical people.

Build an Accessible Site

Making and maintaining an accessible website isn't a "set and forget" — it's an ongoing process. Using the guidance and support from the Web Accessibility Initiative means that you'll be on the right track to making your web content inclusive and maximize your audience.