How to Make a Website Accessible For All in 6 Simple Steps

Are you feeling the weight of having to make your website accessible to those with disabilities but don’t know where to begin?

There’s good news for you. You just need to make a few slight tweaks to your web pages (and images) to get them out of the dark ages.

In this article

1. Web Content Accessibility Guidelines
2. 6 Simple Steps to Make a Website Accessible
3. Accessible Rich Internet Applications
4. Screen Readers
5. What an Inaccessible Website Sounds Like
6. Common Web Accessibility Mistakes
7. Grading the Internet’s Accessibility
8. Web Accessibility Evaluation Tool
9. Other Web Accessibility Resources

After all, there are one billion people in the world experiencing some sort of disability. So it may be a good idea to get your site up to speed for 15% of the world’s population.

Our team at Voices was able to track down two web accessibility experts to help you turn your website into a page no one will want to leave. They’ll provide you with some valuable tips and tricks that they’ve taught to hundreds of others for decades.

In this article we’ll help you to:

• Learn about the Web Content Accessibility Guidelines

• Understand the six core skills (including alt text for images) to use to improve your website’s accessibility

• Figure out what a screen reader is and how they work

• Highlight the main ways websites are misusing some great accessible web tools

• Leave you with a handful of tools to evaluate and further improve your website’s accessibility

Web Content Accessibility Guidelines

In the world of web content and accessibility, the Web Content Accessibility Guidelines offer standards for all developers and designers to point to. These guidelines, most often referred to as WCAG, were developed by the World Wide Web Consortium (W3C) and their Web Accessibility Initiative. The WCAG is widely regarded as the international standard for web accessibility.

The guidelines are constantly being revised to ensure they stay up-to-date with common practices.

The WCAG is for:

• Web content developers
• Web authoring tool developers
• Web accessibility evaluation tool developers
• Others needing a standard for web accessibility or mobile accessibility

It’s crucial to point out, that while it’s important to make sure the WCAG is followed, you and your team need a plan to establish a culture of accessible design first.

And if you’re needing to build a business case for including accessibility early in the development process, we break down the importance of implementing accessible design and why it’s better for your business and all your users in this comprehensive piece.

6 Simple Steps to Make a Website Accessible

So what does including accessibility considerations early in the process look like? It’s easier than you may think.

Phil Kragnes, manager of computer accommodations at the University of Minnesota, along with his team, has developed a robust website centered around six core skills for you to improve your website’s accessibility, called Accessible U.

The six simple steps for accessibility are:

1. Headings and Document Structure
2. Hyperlinks
3. Video Captions
4. Bullets and Numbered Lists
5. Color and Contrast
6. Image Alternative Text

Phil has a degree in Cognitive Psychology from Carnegie Mellon University, a Master’s of Experimental Psychology: Human Memory, Learning and Cognition from the University of New Mexico and he taught himself HTML, CSS, JavaScript and jQuery.

He also lost his vision from diabetes in high school and is a double amputee below the knee.

Phil knows from personal and professional experience how important it is to not make “meeting accessibility guidelines” your website’s objective.

“That’s the first thing I try to get across to people. If you’re just trying to meet the guidelines, you’re not creating an accessible page. I can make a page that complies with WCAG that is not usable or accessible. Compliance does not equal accessibility. But if you make it accessible, it will be compliant.”

“It’s really easy to do, that’s the good part. [However], people aren’t aware that it needs to be done in some cases,” Phil says.

Click into each skill above to get a step-by-step walkthrough and resources on how to build a clear and concise alternative text for your images, how you should be structuring your pages and how to properly caption your video content.

If you’re looking for something a little deeper, Phil has also built out a great resource for designers and developers called Inclusive By Design.

Accessible Rich Internet Applications

Another major revelation for web accessibility was the creation of Accessible Rich Internet Applications, commonly referred to as ARIA.

ARIA is a set of attributes that help make web content and applications more accessible. It’s particularly useful in making dynamic content and advanced pages easy to use for people with disabilities.

ARIA allows a user to extend HTML, add new attributes and more. When used properly, ARIA supports better user interaction, primarily with non-standard widgets and controls (e.g. sliders, tree widgets, grids of data, spreadsheets, complex menus, tab panels, etc). ARIA has tons of great widgets and controls that a developer can use to build and enhance accessibility.

Mastering ARIA’s widgets and controls is key to giving your users a spectacular experience on your page.

Screen Readers

A large majority of web accessibility widgets or controls exist to help disabled users, like Phil, get the most from their screen readers.

A screen reader is software that’s integrated directly into a computer’s operating system (Mac, iOS devices, Windows, etc). The screen reader converts text to speech and provides a computerized voice over that scans and reads web pages for the user.

While it’s hard to find the global numbers on the total number of screen reader users, Jared Smith and his team at WebAIM have collected some interesting statistics.

Jared is the associate director of WebAIM, a non-profit web accessibility consultancy based out of the Center for Persons with Disabilities at Utah State University in Logan, Utah.

WebAIM’s primary mission is to educate and empower people to build and maintain the accessibility of their own websites. They do this through training, evaluation, testing and providing documentation on where a website is at with accessibility and how to improve it.

They also produce comprehensive annual surveys of the disabled community on multiple web accessibility issues.

Out of the 1792 screen reader users they polled in an October 2017 survey, 89.2% (1,585 respondents) said they use the screen reader due to a disability. However, 10.9% (192 respondents) said they didn’t have a disability.

In terms of the disability types using screen readers, 75.8% (1,358 respondents) were blind, 20.4% had low vision/visually-impaired and 5% (90 respondents) were deaf/hard-of-hearing.

What an Inaccessible Website Sounds Like

Imagine clicking on an article that interests you, but when you open it up, all of the text is formatted in the same, lowercase fashion. There are no headings or subheadings to help you scan the content. It just looks like a wall of text. How long would you read through before abandoning the content?

If your website isn’t accessible, you may be creating a very similar experience to the one we just described.

But don’t take our word for it. Here’s a great video example that shows what an inaccessible and an accessible website sounds like on a screen reader.

Common Web Accessibility Mistakes

According to Jared, while it may seem like a lack of resources and technology is limiting the web from raising its baseline accessibility, the real issue is simply a lack of education or misuse of technology.

Jared, who has his Master’s Degree in Instructional Technology, has spent 20 years training thousands of developers around the world in web design, development, and accessibility.

The misuse of alternative text for images is a major point of contention for him.

“It is one of those foundational aspects of accessibility. It’s incredibly impactful for users with visual disabilities. There’s a lot of nuances to well-crafted alternative text. In some ways, alternative text is one of the most difficult things that we teach, [but] it’s also one of the most commonly neglected aspects of accessibility. Even though we were talking about it back in 1999,” Jared says.

Here is a combined list, from Jared and Phil, of the several ways that designers, developers, and webpage authors are misusing tools to make pages web accessible:

• Improper use of heading tags
• Websites designed to be interacted with strictly through touch or a mouse
• Lack or inappropriate use of landmark regions in ARIA
• Lengthy paragraphs of alt text
• Not giving images a file name and keeping the lengthy Google Image path (e.g. 4b7aa1b4a357de003932783f4d5ddeb0738856b2_web-accessibility-cover)
• Describing a chart/graph in graphic detail, instead of describing main points (e.g. a chart showing the correlation between exercise and duration of sleep)
• Overuse of ARIA vocabulary (loading extra ARIA HTML content overtop of a poorly designed webpage), leads to a very laggy user experience
• Lack of testing with ARIA (e.g. having someone with a screen reader try to interact with the application or page after development)
• Developers not following ARIA specifications (e.g. not using the markup and code correctly)

When designing your pages, do your best to avoid these common mistakes that our experts have identified. It will put you miles ahead of most and allow those with screen readers to want to actually stay on your page.

Grading the Internet’s Accessibility

So, if the majority of websites out there are just focusing on being compliant and misusing the accessible web tools available to them, then how are we doing in general with making the web accessible to all in 2019?

In Phil’s words, the web’s accessibility “hasn’t improved a great deal.”

“I’d have to give it either a C+ or a B-,” he says. “There are some sites that I get to that are completely unusable but that’s somewhat rare. Alt texts for images, that’s still one of the big stickers.”

Jared and his WebAIM team constantly hear feedback from the disabled community in their accessibility surveys, and he says they do believe things are slowly getting better.

“This is something we ask a lot in our surveys that we conduct of users with disabilities. We ask: ‘Do you think the web accessibility has gotten better, worse or hasn’t changed in the previous year?’ The general sentiment among those with disabilities is things are improving,” Jared says.

Web Accessibility Evaluation Tool

Hopefully, at this point, you’re better equipped to get going on improving your website to be user-friendly for all. We’re going to leave you with a great tool that will give you a clear understanding of what specific spots on your website need to be addressed for further accessibility upgrades or tweaks.

Jared and his brilliant team at WebAIM developed the Web Accessibility Evaluation Tool (WAVE). WAVE is a tool to help web developers, webmasters or authors make their web content more accessible. It’s been used to evaluate the accessibility of millions of web pages.

The tool is incredibly easy to use. You just enter the web page address and submit the form. You will then be presented with some embedded icons and indicators presenting information about the accessibility of that highlighted part of the webpage.

Other Web Accessibility Resources

• Want to understand how to better communicate with screen readers? This ARIA labels and relationships article by the website fundamentals team at Google is the place to start.

• Khan Academy has built an awesome tool, the Tota11y tool, to show you how your site looks to screen readers. It provides contrast and will highlight other compliance issues. It can be added to your website with just one line of code.

• Want to know what makes your disabled users happy? Want some more quick tests to run and tips to consider? The A11Y project website is a must-visit resource.

• Not sure where to start your accessibility upgrades? AudioEye is providing an accessibility audit to help businesses scope out their accessibility plans.

What areas have you identified that need to be upgraded to improve the accessibility of your website? How are you going to make your website more accessible to all? Does your website hold up after taking the WAVE test? Let us know in the comment section below!