Understanding the Web Accessibility Initiative (WAI): A Comprehensive Guide

Welcome to our updated exploration of the Web Accessibility Initiative (WAI), a cornerstone of digital inclusivity that strives to make the internet accessible to everyone, irrespective of their abilities or disabilities.

As the digital world becomes increasingly integral to our daily lives, the importance of web accessibility and the role of initiatives like WAI cannot be overstated. In this comprehensive guide, we dive deep into what WAI is, its critical importance, and how you can effectively implement its guidelines to make your website more accessible and inclusive.

Table of Contents

• Importance of Website Accessibility
• About the Web Accessibility Initiative (WAI)
• WCAG and WAI-ARIA
• Creating an Accessible Site
• Developing Accessibility Policies
• Common Accessibility Mistakes
• Web Accessibility Testing
• Web Accessibility Resources
• Conclusion

Importance of Website Accessibility

As the world continues to integrate digital platforms into every aspect of our lives, the need for web accessibility has never been more crucial. More than just a technical requirement or a legal mandate, web accessibility is a societal responsibility and a significant business opportunity.

Consider this: about 15% of the world's population, which is roughly 1 billion people, experience some form of disability, according to the World Health Organization. This vast demographic group interacts with digital content in different ways, and their ability to do so can be greatly affected by how well a website is designed for accessibility.

Research from the World Bank Group in 2022 showed that businesses collectively missed out on approximately $25 billion in potential revenue because their websites were not accessible to individuals with disabilities. Simultaneously, the global market of people with disabilities represented over $1 trillion in annual disposable income, further highlighting the substantial economic benefits of web accessibility.

Not only does an accessible website open your business to a wider market, but it also improves overall user experience. A well-designed, accessible site is typically more user-friendly, easier to navigate, and more effective in retaining and converting visitors.

Accessibility also has SEO benefits. Many accessibility practices, like providing alt text for images and proper header structure, align with SEO best practices and can improve your site's ranking in search engines.

The importance of web accessibility lies not only in compliance with legal standards but also in its potential to enhance user experience, improve SEO, reach a larger audience, and promote inclusion and equality. It's a win-win situation for both businesses and users.

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.