When I chatted about accessibility with other attendees at WordCamp Denver 2018 this weekend, I shared some of my tips and blog posts on how they could improve accessibility on their websites.
After one conversation, they thanked me for the recommendations, and asked if I had a summary post that covered all the tips.
Thanks for all the info, Deborah. Appreciate your help. I know I have some work to do on my site.
Do you have a summary post with all the tips you just shared with me?
No, I replied. But that’s a good idea. I’ll publish a summary blog post in the next week.
Here it is!
1. Use Semantic HTML
Structural, semantic HTML is the foundation for web accessibility.
Use HTML elements as they are intended to be used; HTML has built-in accessibility!
Rather than creating a button out of
span, use a
Use headings to convey meaning and structure instead of bolding text.
h1 per page for your title. Use
h3 for more headings.
And don’t skip heading levels. Example: using an
h3 before an
h2 because you like the styling. Use headings in order.
2. Write Short Paragraphs and Short Sentences
Short paragraphs and short sentences make it easier to read for everyone. That six-line paragraph on desktop can double or triple in size on mobile.
Walls of text can be difficult for anyone, but especially for people with dyslexia.
Invest time in writing short sentences so your readers can better understand your content.
3. Explain Acronyms and Abbreviations on First Use
I know. It’s easy to get caught up with the jargon on your business or industry.
But your readers may have no idea what the acronym or abbreviation means unless you tell them.
When you add acronyms and abbreviations that your readers don’t understand, they’ll get annoyed and frustrated.
Which may lead them to leave your site.
You might think it’s fine if you explained the meaning on another page, but that’s not always the page your reader came from.
Write out the words on first use with the abbreviation in parentheses or brackets after the explanation.
Example: Information Technology (IT).
4. Add Alternative Text to Your Images
Alternative text, also known as alt text, is a text description for photos, diagrams, and illustrations you publish on the web or social media.
It provides more information about the function and content of images.
By adding alt text, the content is accessible to people who are blind or visually impaired.
And for people who disable images from displaying in email applications, alt text displays where the image would normally show up.
Alternative text also provides semantic meaning to search engines who can’t “see” images.
Write short accurate alt attributes for your images. For images that are decorative, you can use an empty alt attibute.
Here’s more information on writing great alt text for your images.
5. Avoid Autoplaying Audio and Video
You’re visiting a website when out of nowhere video starts playing with loud audio. Argh.
Autoplaying video or audio on a page is annoying and intrusive. Screen reader users navigate a page by listening.
When sound plays automatically, it interferes with a screen reader user’s ability to navigate a page.
Let your website visitors choose when they want audio or video to play.
6. Write Descriptive Text for Your Links
Who hasn’t visited a website where all the link text on the home page were “Read more” or “Click here?”
What will you read more about?
What happens when you click here? And how does anyone “click here” on their smart phone?
Without context, your readers have no clue what will happen when they select the “read more” link on your site.
Did you know that people who use screen readers often navigate your website page by a list of the links on the website page?
Imagine getting a list of 27 links, all saying “Click here.”
— Neil Milliken (@NeilMilliken) June 15, 2015
A better way to write your link text is to make it descriptive, craft text that makes sense out of context.
So, instead of “click here,” write “map and directions to Bamboo Detroit.”
7. Increase Color Contrast
This is one of the most common accessibility issues I see on the web, but thankfully more designers and developers are learning about it.
And fixing it.
Color contrast refers to the contrast between the background and foreground colors of a design.
Think about the last time you visited a website with a white background and light gray text. Could you read the text on the site?
Or did it hurt your eyes?
When is light gray text on a white background going to be out of style?
— Bridget Willard (@YouTooCanBeGuru) July 28, 2016
Now consider how your design looks for people who are color blind, people who have decreased ability to see colors or distinguish colors from one another.
Why should a website visitor stay on your site when they can’t read it?
Color contrast can be straightforward to test, using any of the following online free tools:
However, you’ll want to consider color contrast at the beginning of your web project, since it can impact your color palette.
Here are three ways you can improve accessibility on your site with better use of color.
8. Add Captions to Your Videos
Looking for ways to increase the audience for videos? Adding captions is the first recommendation I give to all video producers.
Captions have a range of benefits. Not only do captions benefit people who are hard of hearing or deaf, they benefit people who:
- Learned your language as a second language
- Work in a noisy environment where they can’t hear the audio, or don’t have earbuds
- Work in a quiet environment where they can’t play audio outloud
- Learn better by reading than listening
And they improve your search engine optimization (SEO). Search engines can’t watch videos, but they can index text.
When you add captions to your YouTube videos, YouTube automatically creates a transcript. Which search engines index. Viola!
For people creating marketing videos, you may already have a transcript you used for the video.
Upload the transcript file to YouTube and it will automatically synchronize the timings and create captions.
When I asked my friend and colleague Dave Foy about adding captions to his videos, he immediately took action.
And here’s how the community came together to add captions and transcripts to a four-part YouTube series on adding HTTPS to your website. In 16+ languages!
9. Add Transcripts to Your Podcasts
The same benefits that apply to adding captions to videos apply to adding transcripts to podcasts.
You’re going to increase your audience by providing a more accessible experience.
There are lots of ways to add transcripts on your own, whether you:
- Add the transcript yourself (time consuming)
- Use automated third-party services, which you’ll want to edit afterwards
- Use third-party services that use people for creating transcripts (more expensive, but more accurate)
When my friend Alaina Wiens asked me for recommendations for her podcast transcripts, I shared with her a few third-party services.
Here’s my interview with her about her successful experience using Happy Scribe for her Strategy Car podcast.
And my first look at Happy Scribe when I checked it out for features and pricing.
10. Add Alt Text to Facebook, Twitter, and LinkedIn Images
Did you know you can alt text to the images you post on Twitter, Facebook, and LinkedIn?
When Twitter announced alt text for images a few year ago, people were ecstatic!
— AFB (@AFB1921) March 29, 2016
It was a long-requested feature, and people in the accessibility community were thankful that Twitter listened to their customers.
After Twitter included alt text, the next question asked was when third-party apps like Hootsuite and Buffer would add alt text.
I’m proud to say I was actively involved in testing and sharing my feedback on alt text for Buffer.
And glad to announce when the alt text feature went live on the Buffer browser extension and later on their web version.
After dozens of requests over a four-year period, Hootsuite added support to alternative images (web only).
When I ran a poll earlier this year, I learned most of my followers didn’t know you could add alt text to Facebook images.
If you share images on Facebook, do you add alternative text to the image?
— Deborah Edwards-Onoro (@redcrew) May 30, 2018
People I talked with didn’t know why, but Facebook didn’t announce when they added alt text for images.
Here’s my post on how to add alt text to your Facebook photos.
Similar to Facebook, LinkedIn quietly added alternative text to images you add on your LinkedIn feed. Without any notification or documentation.
I published a post on how to add alternative text to LinkedIn images so other users would know it was available.
11. Bonus! Additional Tips for Social Media
Yes, a bonus tip!
I couldn’t finish this post without including a great resource from my colleague Jennie Delisi who works at Minnesota Information Technology Services Office of Accessibility.
Their online reference for social media posting includes helpful advice on:
- Using CamelCase for hashtags (Example: #DetroitJazz instead of #detroitjazz)
- Adding links near the end of the post
to designate a link to multimedia
Phew! That’s a lot of ways for making your website and social media more accessible, whether you’re a blogger, photographer, writer, designer, or developer.
Many of the tips don’t require you to know code, only to know that certain features are available on the applications you use that help make your posts and updates accessible to everyone.
Have more tips to add? Share them in the comments.