Categories
"How To" Guides Accessibility

Analyzing Accessibility of Your Digital Content

Personally, I get really excited about accessibility. As an online instructor and instructional designer I strive to make all of my digital content as accessible as possible. I’m of the philosophy that making your digital content accessible makes it more usable for everybody, not just those that utilize assistive technology. Bonus: the more accessible your web content is, the more optimized it is for search engines (SEO!)

I’ve done a few posts in the past on accessibility, including how to use YouTube to generate closed captions. I’ve done several presentations on accessibility as well!

We’re covering accessibility and 508 compliance right now In one of the classes I’m teaching for the Master of Science in Instructional Design and Technology program. I’ve developed a whole module on this topic for my budding instructional designers, so I thought I would share some of it here as well! Want to learn how to check your digital content accessibility? Read on!

First, Learn What It’s Like to Use a Screenreader

Watch this three-minute video to hear what it’s like to use a screen reader. People with vision problems may use a screen reader like JAWS to navigate web and digital content and have that content read aloud to them.

If designers and developers don’t use HTML’s semantic structure elements, including headings and ordered/unordered lists among others, navigating content becomes very difficult.

Second, Learn Some Basic HTML Code

As you saw above, online content needs to be formatted a certain way to allow your users to fully enjoy it.

You need to know a few basics of HTML to understand how to make your digital content really accessible, so let’s jump right into HTML coding. We are going to take advantage of the free online lessons at CodeAcademy to get you started with the basics of HTML coding.

If you already know basic HTML, you can skip this part!

Learn Basic HTML Code

I recommend completing two lessons, it will probably take you an hour or so. You’ll learn about headings, how to add descriptive alternate text to images, how to create bulleted and numbered lists, and other basics.

  1. Create a free account at CodeAcademy. You do not need a Pro account! Just create a free account.
  2. Open the Syllabus for the Introduction to HTML tutorial so that you can see the lesson breakdown.
  3. Complete only the first two lessons under 1 Learn HTML: Elements and Structure:
    1. Introduction to HTML
    2. HTML Document Standards

Third, Learn the Basics of Accessibility for Web Design

There are two major facets to making your content accessible: accessible design (e.g. visual aspects, adding in closed captions and other features) and accessible development (i.e. the juicy backend stuff in HTML).

Here are some guidelines for making your content accessible:

  • Include text alternatives for non-text content (i.e. ALT tags for images)
  • Provide captions for video and audio files
  • Make it easy for users to see and hear content (e.g. don’t rely on color to convey meaning, provide video and audio controls)
  • Make your content keyboard-navigable by logical placement and tab order
  • Structure and label your content for screen readers (e.g. use built-in heading styles)
  • Give links meaningful names (avoid “click here!”)

Everything you create for the web should be usable with only a keyboard, and usable by people with vision and hearing and other disabilities.

Online courses on making your content accessible

Finally, Use WAVE to Analyze Content Accessibility

You can analyze accessibility of web and digital content using the Web Accessibility Evaluation Tool, or WAVE. This tool was created and is maintained by WebAIM, a non-profit organization out of Utah State University. WebAIM has tons of resources on accessibility!

Watch this 17 minute video to see a demonstration of using WAVE to analyze a website that is a good example of accessibility, and a website that is fairly inaccessible:

Try It Out

Want to test out your newfound accessibility skills? Try out this practice activity, in which you will analyze accessibility of a given webpage, write down the issues that you discover, and then self-check your analysis.

Instructions:

  1. Open the WAVE tool
  2. Open the webpage “Accessible University“
  3. Use WAVE to analyze “Accessible University.” Write down the issues that you discover. What changes would you make?
  4. Check your work: View the List of Accessibility Issues for Accessible University. How does your list compare? Did you catch everything?

If you’d like, you can also check out the “after” version of Accessible University, which has fixed its accessibility issues. Run it through WAVE and see how its accessibility features have improved.

Want even more practice?

Check out W3C’s Before and After Demonstration. Analyze a webpage’s “before” version, and then compare to the “after” version that has been made accessible.

Conclusion

Now you know the basics of making your website accessible and checking its accessibility! Before you go, you might be wondering about accessibility and the law.

Here’s the long and short of when you need to make your content accessible in legal terms (disclaimer: I am not a lawyer!).

  • If you work in corporate or for a corporate client, legally you are probably not required to make your content accessible.
  • If you work for the government or any sort of government agency/government-funded agency, legally you are almost definitely required to make your content accessible.

More about the law and accessibility to come (also known as 508 compliance!)

What accessibility challenges do you face?

Discover more from Lindsay O'Neill Consulting

Subscribe now to keep reading and get access to the full archive.

Continue reading