Are you new to web accessibility? Did you agree to make your website accessible only to turn around and start Googling furiously? Well, have no fear! You’re not alone and there are tools to help you.
Accessibility is a bit of a buzz word in the tech community nowadays. And like most buzz words, people in the tech community often recognize its importance without truly understanding what it entails or how to implement it.
I’m constantly finding new aspects and details about accessibility I wasn’t aware of before. Like when you think you have your entire house in order, but then realize there’s this whole other room you didn’t even know about!
This post is intended to give you a quick overview of access as well as some tips for taking care of that inaccessible low-hanging fruit.
The idea behind web accessibility is fairly simple: ensure all users, regardless of ability, are able to consume and navigate your web content.
The problem with this definition is that it’s subjective and difficult to measure. What if you have a very specific target audience? How can we know what resources people have available to them? At what point can we trust the user to “figure it out”?
The Web Content Accessibility Guidelines (WCAG) sets guidelines for what it means to be accessible and the various thresholds that need to be met. There are two levels of accessibility within these guidelines, WCAG AA and WCAG AAA, with WCAG AAA being more restrictive.
WCAG gives us tangible goals and has enabled the development of accessibility tools that quickly evaluate web content. However, knowing the technical requirements of accessibility is only the first step.
We need to keep the spirit of accessibility in mind, evaluating it holistically and keeping usability in mind. If a site is technically accessible, but it’s still difficult to navigate or understand, is that true accessibility? If you have alt text for your images, but they’re either too brief or maybe even too long to be helpful, is that true accessibility?
Making accessible web content is an iterative process and it’s not easy, but it’s an endeavor worth pursuing.
3 Quick Tips
If you’re just getting started on accessibility, taking care of the low-hanging fruit is a great way to gain momentum and train your eye for accessibility.
Below are 3 tips on how to fix some of the most frequent offenders of web accessibility.
1. Use headers to add hierarchy
Screen-reading devices are able to detect and skip between header elements. Headers allow non-visual users to skim the page the same way that visual users do, so they can quickly determine whether the information they’re looking for is on that page.
Headers are the HTML elements H1 through H6.
2. Use the list elements
Screen-reading devices can detect list elements, tell the user how many items there are, and skip the list entirely.
When lists are just typed numbers or copy-and-pasted bullet points in paragraph text, non-visual users have a more challenging task of figuring out where the list starts and ends, with no option to skip completely if it doesn’t pertain to them.
Ironically, I’m breaking this rule by using headers instead of list elements. To comply with the spirit of accessibility, I’ve included the number of items in the “3 Quick Tips” (H2) and then used H3’s for each numbered section, so it’s still easily scannable.
List elements in HTML are <ul> or <ol> and then <li> for each item.
3. Write helpful and descriptive alt text for images
Pictures are worth 1,000 words, but only if you’re able to see them. The images we use on our web pages are providing our user with information of some kind, even if it’s just the feel and mood of the page.
This information is still pertinent to non-visual users, which is where alt text comes in. Think about why the image is relevant to the content on the page and then describe its key components or purpose in 1-2 sentences.
If an image requires more than 2 sentences to describe, such as an infographic or chart, consider adding a caption or an aria-label.
Alt text is specified like so: <img src=”filename.jpg” alt=”helpful alt text goes here“>.
It’s Dangerous to Go Alone! Take This:
Resources for understanding and researching accessibility:
Tools to evaluate your page: