Web accessibility is not always top-of-mind when someone decides they want or need a website. But, while it of course goes a long way in supporting visitors that use assistive devices, it also can increase your website performance and conversion rates across all users.
And, by the way, the Justice Department recently released new legislation that *requires* certain businesses and nonprofits to comply with minimum guidelines. So, if the idea of simply making the world a better, more accessible place doesn’t do it for you, perhaps avoiding a lawsuit will. 😉
Here are a few things you can do that go a *long* way to make your website more accessible:
- Captions and transcripts on your videos
- Alternative text on images
- Sequentially correct headings
- Meaningful link text (not just “click here”)
- Keyboard navigate your *entire* website
- Test with a screen reader
Captions and Transcripts
The good news is that, these days, most popular web conferencing tools (like Zoom or YouTube live-stream), offer automated captions – you just need to turn them on. Granted, these automated captions don’t get it 100% right all of the time, but it’s (much) better than nothing.
By the way – captions and transcripts aren’t only used by the deaf or hearing impaired. I myself use them all the time when I need to scan for a specific bit of information, or want to watch a video in a public space with the volume muted.
If the transcript is also posted on a public-facing website, it can do a lot for SEO, too. Lots of easy wins, here!
Alternative Text on Images
Alternative Text, or “alt text” as it’s commonly referred to, providers important information about the image’s content and purpose in the HTML (code) of the page. In turn, a visitor that uses a screen reader will hear the alt text read aloud so they don’t miss any vital information and/or can experience your website fully.
Important to note that this text is not visible on the page, unless the image fails to load for some reason. In that case, it can also be helpful for sighted users.
Read more on what images require alt text
What not to put in your alt text
You may have heard this is a great place to “optimize” your site further with SEO keywords (keyword stuffing), or add information about other offers or products your site may offer. The problem is, screen readers will read the alt text aloud and if it doesn’t add context to the page, it detracts from it and adds confusion. What do confused visitors do? Leave your site.
Take this example from Google
Notice how, even though you can’t *see* the image (I didn’t add one to the page), you can imagine what the image contains, according to the alt text. (Note the alt text is what comes after “alt=_____” below).
Bad (missing alt text):
<img src=”puppy.jpg”/>
Bad (keyword stuffing):
<img src=”puppy.jpg” alt=”puppy dog baby dog pup pups puppies doggies pups litter puppies dog retriever labrador wolfhound setter pointer puppy jack russell terrier puppies dog food cheap dogfood puppy food”/>
Better:
<img src=”puppy.jpg” alt=”puppy”/>
Best:
<img src=”puppy.jpg” alt=”Dalmatian puppy playing fetch”/>
Which one is irritating to read, and you probably stopped after the first 4-5 words?
Answer: obviously it’s the second (keyword stuffing) example.
Conversely, which one gives you the clearest understanding of what the image portrays?
Which one makes you “awwww” the most?
(Answer: definitely the last one) 😉
Read more about Google's guidance on image alt text
You can see how proper alt text not only adds to the understanding of a page, but also can create an emotional response to your content. If you know anything about psychology and emotions, you know that creating an emotional response can build engagement and connection with your content – all (very) good things for your business.
Sequentially correct headings
When used properly, headings create an outline of your pages content. Think back to a 5th grade writing assignment and you probably know exactly what I mean. Headings are the “main idea” of a section, with supporting paragraph text below. And, each heading is assigned a level (h1, h2, h3 . . . h6).
Generally, a page will follow an outline similar to:
- h1
- h2
- h2
- h3
- h3
- h2
For example, here is the outline for this post:
- h1: How to improve website accessibility and welcome all visitors
- h2: Captions and transcripts on your videos
- h2: Alternative text on images
- h3: What not to put in your alt text
- h3: Take this example from Google
- h2: Sequentially correct headings
And so on. The main things to know are:
- Each page or post should have only one h1
- h2s are the main ideas for a specific section
- Subsections should have h3s, and subsections of those have h4s, etc.
A trap a lot of folks fall into is that they want the *styling* of an h1 (or h2, etc), so they assign that to non-heading text, or in the wrong order. This can really mess up an outline of a page which screen readers rely on as landmarks. Plus, headings also make a huge impact in how Google bots read and understand your content, too.
So, if you want the *style* of a heading on a non-heading element (or an out-of-order) heading, you’ll have to take a moment to actually choose the font size, weight, and color. It can *look* like a heading without being marked by one – that’s just fine.
Meaningful link text
Lots of folks love to use “Click here” as the text on a button, or on a linked bit of text. The problem here is that screen readers can’t give any context about what the link will go to.
For example, instead of “Click here”, you might say “Get the handout” or even better: “Get the Project Calculator”.
Note: there are other ways to add what’s called ARIA label in the code, but this can get technical. This is useful if you’re working on a blog archive for example and you don’t want each button to visibly read “Read more about ‘the full title of my blog post’. Instead, that is an example of when a generic “Read more” label would work, as long as the ARIA label is more descriptive.
By the way, meaningful link text is also a big help for sighted users. It means that someone scanning your page, email, whatever, can quickly see where the link goes rather than having to back up and read for context. And as we know, some folks like to add *a lot* of context. 😉
Read more on ARIA labels
Keyboard navigation
Did you know that some users don’t use a mouse at all? This might include low/non-sighted, low-mobility, and even sighted power users that find it inefficient to leave the keyboard.
This means that your website needs to be fully navigable by keyboard alone. You can quickly test your own site by browsing to it and use the “tab” key to move through. It should highlight every clickable menu item, link, and button. You should also be able to shift+tab to go back.
There’s more to it, of course. Sites with loads of menu dropdowns or “mega menus” should have some parts skippable unless intentionally selected (by pressing the enter key).
Note: it’s not enough that you can tab through your site – you also need “focus states” that show visually where your focus is. (Remember, there are many sighted users that will navigate with a keyboard). Often, this is a colored border around the linked item. Beyond that, there are even more formatting considerations to improve the navigation and what the screen reader reads.
Read more on testing keyboard navigation
Test with a screen reader
If you’ve never used a screen reader, it can be pretty overwhelming at first. There are sometimes several keyboard shortcuts you need to have handy to use it properly, and they can differ depending on the screen reader. If you have the speed up too high, it may sound like one continuous, robotic sentence (though, they are working on better voices, and not all screen readers sound the same.). That said, giving it a go can be very enlightening.
Here are two free screen readers most computers come stock with:
You can test by either tabbing through or clicking your website and listening to what is read back to you.
For bonus points, blindfold yourself and then work toward completing a specific task such as: Starting from the home page, navigating to the contact page, and submitting your contact form.
Could you do it without peeking?
Like I said – a screenreader can be pretty overwhelming at first. Take breaks often and remember the mute button is the fastest way to stop the overwhelm until you remember how to pause or turn the reader off completely.
If nothing else, you’ll improve your empathy by giving this a go, and that’s always a win!
Conclusion
Website accessibility is sometimes the last thing someone thinks about when they build their website. They may not know anyone personally who uses assistive devices to navigate the web, so it simply doesn’t occur to them.
But, now that you know, you can take action! Accessibility is not a one-and-done solution, and any progress you make is much better than sticking your head in the sand about it. *Especially* if your business is at risk of being sued. Start with your image alt text, or your link text – it make take some time but it will be worth it!
I like to work with clients that care about making the world, even the digital one, more welcoming and available to *everyone*, not just folks that look, think, or have the same abilities as you or me. If you’re interested in improving the accessibility on your own site but aren’t sure where to start, reach out to me and let’s see if I can help.
p.s. Overlays are *not* the answer!
I get it – a “one-and-done” solution sounds so simple and attractive, especially to busy business owners. But if the goal is to improve accessibility, then we need to listen to the people who actually use assistive devices. And what those folks are saying is: overlays can interfere with their assistive devices and actually make the website less usable than it would be without it!
Plus, an overlay does not exempt you from being sued, as much as those companies would like to convince you. Many businesses being sued that do have an overlay have to remove it as part of the required remediation and actually make their site accessible.
Check out the Overlay Fact Sheet for more information about overlays