Know Better, Do Better. How I Audit My Own E-learning Materials.

It can be overwhelming to go back and review your own webpages, online courses, toolkits, and handouts. The more we learn and get better, the more we realize our mistakes in previous learning products.

But it’s important to model, “Know Better, Do Better.”

I want that for myself and I want that for my clients. No judgement. Just improvement.

I recently wrote about auditing my own instructional design portfolio. Today, I want to share another example of online content that I audited and improved.

The Problem: Inaccessible Website Graphic

There is a graphic on my website that differentiates the roles of an instructional designer versus e-learning developer. This is a common question that I receive and I’ve found that a visual is very helpful in communicating the answer. Here is the original image from my website (created and uploaded in 2021):

The Audit: Findings

When I went back to audit the image, I found several accessibility concerns. First, I had color contrast problems. When I reviewed the graphic with my Web AIM contrast checker, I found the central overlapping text (Foreground Hex 0A395B on Background 248587) failed contrast standards at 2.73:1.

The contrast ratios on the left and right sides of the graphic failed normal text standards at 3.01:1 and 4.26:1, respectively. While technically these two color combinations could work for large text (at least 18 point or 14 point and bold), I made a note to improve it.

When I reviewed the page with a screen reader and checked the coding, I found that I forgot to add alternative text to the image. If someone could not see the image, they would have no way of accessing the content.

The Fix

This is the new and improved instructional designer versus e-learning developer image:

Color:

All aspects of the graphic now pass color contrast standards. For example, the central overlapping text (Foreground FFFFFF on Background 27516F) has a 8.42:1 ratio.

Alt Text:

I added alt text, which is a concise written description of an image or non-text element. It provides essential information about the element’s purpose or content. The alt text for this image now reads, “Graphic compares the roles and responsibilities of e-learning designers vs. developers.”

Image Description:

Since this is a more complex image with many text details, I also added an image description to the website.

Font:

The original graphic used the Canva template default font. Therefore, I updated the graphic to Arial, which is known as a more accessible font.

I’d love to hear from you!

-What do you think of the before and after of my website graphic?

-Are there additional features that you would change to increase readability or to improve accessibility?

-Have you ever conducted a similar review of your own learning materials?

As much as I enjoy auditing my own work, I enjoy it even more when I can help clients! I offer general instructional design and accessibility-focused audits. Please visit my contact form to discuss a potential project. I look forward to hearing from you!