About this Video
May 21, 2020 is Global Accessibility Awareness Day. The purpose of this day is to “get everyone talking, thinking and learning about digital access/inclusion and people with different disabilities.” In this spirit, we’ve created a new resource for the Boise State Community and beyond. This workshop was originally presented at the 2020 Success through Access Conference at Boise State by Carolyn Quintero and is provided here for all to learn a little bit more about the tools available to improve digital access and inclusion for people with different abilities.
Watch 10 Tools for Digital Accessibility
Video Transcript and Resource Links
Download printable transcript with resource links (pdf)
About Me
Carolyn’s the name, finding tools to improve accessibility workflows is my game.
Hi! I’m Carolyn Quintero and by day I’m a web accessibility analyst at Boise State University and I’m responsible for keeping Boise State’s public facing websites accessible for all users. I also am an adjunct instructor for the Technical Communication program here at Boise State and need to create accessible materials and spaces for my students. Most importantly though I’m a mom to my two amazing little boys, Oscar and Theo who keep me very busy.
In most of my positions over the last 15 years, I haven’t had access a large budget to purchase additional software or tools. As an instructor, I’m sensitive about costs for students. And as a mom, I know all too well how easy it is to get distracted during a project. As a result, I’ve become quite good at seeking free tools to help me improve my workflows and meet accessibility requirements on projects large and small.
Today I’m sharing 10 of my favorite tools and resources, with a few bonus tips thrown in for good measure. So let’s get started!
What Makes Content Accessible?
Before we dive into the tools I want to review what makes content accessible.
The Web Content Accessibility Guidelines provide a framework for accessible content. These guidelines are based on four principles, perceivable, operable, understandable, and robust. Your content must be perceivable for users through sight, sound, and touch. It must be operable meaning that the content works regardless of the technology used to access it. It must be understandable with simple, clear language. And finally it must be robust and meet recognized standards and conventions for the web.
Is My Content Accessible?
Now you know what makes content accessible, your next question is likely, “is my content accessible?” Let’s explore the tools you can use to answer that very question.
1. Know Your Audience
A great way to make sure your content is understandable is to write for your audience. To know how to write for them, you first need to know a little about them. This is where an audience analysis sheet comes in handy.
Some of the questions asked in this analysis sheet help you think through who your readers are, what their expectations are, how they will use the information, and how they will access it. You may not know all the answers to these questions, but thinking about them helps you keep your focus on you audience because that’s who you are creating content for. There are different templates available online to analyze your audience, and I’ve provided a link to download this version in the video description.
Download Audience Analysis Template
Bonus Tip #1 – Listen to your audience to learn more about their needs.
For bigger, or higher stakes projects you may want to do more research about your audience first to help develop and refine your analysis. Apart from talking directly with your audience, there are lots of ways to learn more about them. For example, gather feedback from course evaluations, exit surveys, review customer emails and requests, or review Google analytics to see how users are navigating your websites.
2. Draft First – Design Later
Too often we focus solely on the way something looks as opposed to the content itself. That’s usually when we end up with accessibility issues.
A draft gives you a high level view of your content and helps you determine your section headings, text alternatives for media, hyperlink descriptions, and more. It also gives you a chance to check accessibility and make changes early in the process.
As you outline your content include:
- Section headings
- Placeholders for any images and media including notes about any text alternatives required
- Gather your hyperlinks and draft out descriptive link text
- If using tables, include them and identify the heading row and verify they are organized in a logical way
- Check your draft for accessibility with an accessibility checker
You can create an outline with a regular pen and paper (I like to use the whiteboard in my office when I’m working on big projects) or you can use a word processor like Google Docs or Microsoft Word. Google Docs is great when you are collaborating with others and you need a simple, no frills word processor. For something a little more powerful, you can use Word.
Bonus Tip #2 – Keep your content simple and write in clear, plain language
While not really a “tool” writing in a clear, simple manner requires practice. It seems counter-intuitive but writing in simple terms is often more difficult than long, drawn out descriptions.
Have you ever caught yourself overthinking something? Or asking yourself, “how am I going to explain this?”
Whenever you find yourself fighting with your content, take a step back and ask if you can simplify things a bit. You might find it helps. The article from WebAIM on Writing Clearly and Simply is a great resource with tips and tools to write more clearly.
Writing Clearly and Simply from WebAIM
3. Style With Tags
After drafting you can start designing. This is often the fun part of a project because we all want things to look and feel a certain way. However if you don’t tag your content correctly, you could create a mess for your users. Using tags avoids this because it adds the necessary information our technology needs to communicate with us effectively. Whether that is through a web browser, our mobile devices, screen readers, or other devices, tags make our content easier to understand.
For webpages, these tags are HTML and communicate to the browser how content should look on the screen. These HTML tags also communicate to assistive technology users what different content is. Word Processors like Microsoft Word and Google Docs also have style tags.
For web content, these HTML tags are what communicate with the Cascading Style Sheet or CSS. To learn more about HTML I recommend reading the Semantic Structure article from WebAIM. For documents, you can apply styles as well and Microsoft Word has a lot to choose from. Google Docs has a more limited selection, but the free add-on from Ablebits gives you a few more options. You’ll find the links in the video description.
Word: Applying and Modifying Styles
Bonus Tip #3 – Learn more about Docs and Word
Learn even more tips and tricks for using Google Docs and Microsoft Word at Goodwill Community Foundation.
4. Use Accessible Colors
When using color, you need enough contrast to allow all users to easily distinguish the difference. In our example here, the red and orange colors next to each other appear pretty much the same in gray scale. The blue and green also aren’t different enough from each other to easily tell which is which in gray scale. The red and yellow however, have a high enough contrast ratio to tell them apart.
To determine if your colors have enough contrast, I recommend downloading the Colour Contrast Analyzer from the Paciello Group or using the online contrast checker from WebAIM. You can also use the Accessible Color Palette Builder tool to quickly see different accessible color combinations.
Colour Contrast Analyzer from the Paciello Group
Accessible Color Palette Builder
Bonus Tip #4 – Learn more about design basics
Once you are comfortable using the out of the box styles, then I challenge you to learn a bit more about design. Knowing some basic design concepts will help you refine your digital styles a little more while still remaining accessible. I highly recommend the Seeing Design and Beginning Graphic Design series from Goodwill Community Foundation and the book the Non-Designers Design Book. These give great tips to help you think like a designer.
5. Add Alternative Text to Images
To learn more about alt text, check out the great video from Rooted in Rights called Alt Text in 60 Seconds. They go over what alt text is and how to add alt text to a lot of different types of social media. In addition to the social media accounts mentioned in the video, most programs allow you to add alt text to any images. This includes Microsoft Office products, Google Docs, and most web platforms like WordPress. Just look in the image or media settings for the alt text field.
Alt text is tricky, so I like the resources available from the W3C Web Accessibility Initiative on alt text for their decision tree and tips and tricks.
Alt text in 60 Seconds from Rooted in Rights
Alt Text Decision Tree from the W3C Web Accessibility Initiative
Tips and Tricks for Alt Text from the W3C Web Accessibility Initiative
Bonus Tip #5 – Explore without images
It’s easy to underestimate the importance of alternative text but you might be surprised just how much of the web is image based. To test this, disable images in your browser and review your content. This perspective may help you rethink how you add image descriptions to your images. You’ll find a link for how to disable image files from displaying in Chrome in the video description.
How to disable image files from displaying in Chrome
6. Add Alternatives to Media
You also need alternatives for your media content including audio description, captions, and transcripts.
Audio Description
Audio Descriptions tell users about significant visuals in your media. To learn more about audio description, I recommend watching the video from Rooted in Rights called Audio Description in a couple minutes.
Captions
Captions tell users about significant sounds in your media. To learn more about captions, check out the video from Rooted in Rights called Captions in a couple minutes.
Transcripts
And lastly, transcripts provide a text alternative for users to read. To learn more about transcripts, check out the video from Rooted in Rights called Transcripts in a snap.
Bonus Tip #6 – Use a storyboard to draft content and plan for accessibility
As with any content, drafting your plan first helps you create more accessible content. For media, a storyboard is a great tool to think through your visuals and audio before you ever start recording.
Download Storyboard Templates from StudioBinder
7. WAVE Web Accessibility Evaluation Tool
So now you have your audience, have your draft, you’ve made sure your images and media have appropriate alternatives, you’ve used style tags to design your content, and you’ve checked your colors for accessibility. Now it’s time to pull everything together and publish your content. Woohoo! You’re almost there.
But even if you’ve made sure it’s accessible up to this point, it’s quite easy to miss a thing or two which is why the WAVE Accessibility Evaluation Tool is one of my most favorite things.
Once your content is on the web, the WAVE tool is super easy to toggle on and off for immediate results. You can see if you have any errors, check your alt text, and review your links to make sure they are good to go. This makes spot checking your work a breeze and also is a great way to verify what you’ve done is accessible.
Bonus Tip #7 – Turn off styles
Use the WAVE extension to turn off the styles for your web content. This can help you evaluate your content more objectively.
8. Keyboard
Your keyboard is an excellent tool for testing accessibility! If you can’t access something, that’s a clue that there is an accessibility issue that needs to be reviewed. So put your mouse away and use the keyboard to navigate the page.
- Use the Tab key to jump from link to link.
- Use the Arrow keys to move up, down, left, or right.
- Use the Enter key to activate those links.
As you’re going through the content ask yourself
- Can I access all the elements on the page?
- Can I tell what element is active on the page?
- Can I access all the media?
If you can’t access something, that’s a big clue that you need to take a look at something, contact a developer, do a little more research to find out what’s going on.
Bonus Tip #8 – Learn more about keyboard compatibility
Content that’s keyboard compatible is essential for users who don’t use a mouse to navigate the content. This could be because of a physical disability that limits their use of a mouse. This could be because of a user preference that it’s faster to use the keyboard than it is to use the mouse. There’s lots of reasons why people don’t use a mouse, or even want to use a mouse to navigate the content. Learn more about the topic at the W3C’s Web Accessibility page on keyboard compatibility.
9. Explore Accessibility Tools on Mobile Devices
Devices these days have built in accessibility features. Go to your Settings and search for accessibility on your Smart Phone, Tablet, Laptop, Desktop, or E-Reader. You might find some settings that even make it easier for you to navigate your mobile devices.
Bonus Tip #9 – View content on different screens
Content looks quite different depending on the screen size. Check out how your content looks on large and small screens as you’re drafting. Before you publish it for your users, look at it on a phone, look at it on tablet, look at it on a desktop before you send this out to users.
10. Learn More About Web Accessibility
The W3C Web Accessibility Initiative site is a treasure trove of information about web accessibility including user perspective videos, accessibility fundamentals, planning and policies, design and development resources, testing and evaluation templates, teaching and advocacy resources, and also the standards and guidelines.
So take some time, explore the site, and learn a little bit more about web accessibility.
Bonus Tip #10 – Learn how people use technology
Learn more about how people use technology to interact with the world and what you can do to help. Rooted in Rights is a great resource!
What’s Your Action Plan?
And there you have it! 10 tools you can use to create more accessible digital content. So now that you know all these tools, what’s your action plan? What tools can you incorporate into your workflows? What resources do you want to explore further? And what questions do you still have?
So go ahead, take some time, jot down answers to these questions, draft up your action plan, and start making more accessible digital content.
And if you have questions or would like to reach out to me, feel free to reach me at CarolynQuintero@BoiseState.edu.
Have a great day!