Making Your Digital Stuff Accessible

Last summer I completed educator Tony Vincent’s Classy Graphics course. I figured I better up my graphic design game since my whole life had gone online due to the pandemic. I took Tony’s Classy Videos course a couple of years ago, so I knew I would learn a lot and he did not disappoint me.

This is a subject that has always needlessly terrified me. I thought it would be too difficult, so I’ve avoided thinking about it. But, don’t worry, it is much easier than I thought to follow basic accessibility guidelines. For this blog post, I’ll go over the BIG THREE things I learned.

Three Easy Steps to Make Your Digital Materials Accessible

1. Make Hyperlinks with Words Describing the Link

Over the years, I had gotten into the habit of typing CLICK HERE for my hyperlinks, especially on materials for student use. Because screen readers can scan for links, it is much better to type the words that describe what is being linked. For example, instead of typing, “To find out more about using hyperlinks, click here,” I should write, “To read more about hyperlinks click the Google Support Page for Web Accessibility.”

2. Use Alt Text for Images

This is less of a pain than it sounds. I knew that website builders, like WordPress, Weebly, and Blogger, offered a way to type quick descriptions of images for the use of screen readers. However, I did not know that I could also do this on Google Docs!

If you do add an image to a Google Doc (or Slide or Drawing), right click (press control and click on a Mac) and choose Alt Text. Type a succinct description of the image that can be used by screen readers or non-graphical web browsers.

Google Docs Alt Text Option
Alt Text and Description

3. Check Colors for Maximum Accessibility

Color contrast plays a big part in accessibility. A high contrast between the text and the background color makes the words a lot easier to see. The downside to that is we can’t choose whatever colors we think look nice. The upside is people will actually be able to read what we are trying to communicate.

The easiest way to check your colors is to use the WebAIM Contrast Checker. You need to a tool for extracting the exact color information from your web page. WebAIM recommends Colorzilla. I purchased Drop Color Picker ($4.99) for my Mac.

Once you know the hexidecimal color code, simply paste it into the WebAIM tool. It will calculate your site’s accessibility.

Here is what it says for this contrast between the hyperlink color (#0673AA) and the background color (#FFFFFF):

Contrast Checker results

Final Thoughts

I am by no means an expert in this topic, but as a teacher and librarian, I can still do my part to make my digital materials accessible for as many people as possible. Did I forget something important? Please let me know if you have any tips that would be useful for me or other educators.

If you are interested, Tony Vincent is offering Classy Graphics again this January. Click the link to read more about it. I highly recommend it!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s