Susan Belles - Designing for All

For me, accessibility is personal.

When I was in 4th grade, I was diagnosed with ADHD. And like all caring parents, mine picked up the prescription medicine from the pharmacy, read the complete pamphlet about the drug, panicked and then tossed it to the back of a kitchen cabinet, never to be seen again! Much later in life, I also learned that I had a vision problem, that is often observed alongside ADHD. It turns out that my eyes do not "track" or move back and forth at the same speed. This can make reading, focusing, and following moving objects more difficult.

Despite these barriers, I learned how to navigate life (albeit, the hard way). But today, as a learning designer, universal design is at the heart of everything I do because I know firsthand the difference it makes. This is why I chose to do a project all about accessibility for my course ETEC 681 at Concordia university. Since taking that class, I have continued to delve into the world of digital accessibility, and continue to update this site with a collection of resources that I found valuable!

Web Content Accessibility Guidelines are dense. That's why my first step, was to break it all-the-way-down.

An "Uh-Oh" Moment

Now imagine, that in a part time contract job I hold, I am asked to a walk through of an e-Learning program and make sure everything "functions as expected". Now that I know the basics of WCAG, I'm looking at it with a whole new lens 👀

Check out my eLearning Audit Project to see how I was able to answer the call, and apply my new knowledge of WCAG to identify key accessibility features in a eLearning program improvement campaign!

On the WebAIM website, you will find a trove of helpful resources including:

Checklists for WCAG compliance in both a web-based format or pdf format
A web browser based color contrast checker
And a plethora of reference guides and cheat sheets (see one example below)

And if you have the economic resources, they even offer training and website audits, for a fee.

In addition, WebAIM has created WAVE, a suite of evaluation tools that help web-content designers identify WCAG errors and ensure accessibility. One of these tools is a browser extension. Check it out below!

Screenshot of Wave Accessibility Chrome Extension, showing features of the software, including the different alerts

CCA - Color Contrast Analyzer

If you're doing design work outside of a browser, there is also an app based color contrast analyzer that you can download directly to your desktop. (According to WCAG 1.4.6, the minimum color contrast ratio to meet AA criteria is 4.5:1)

Screenshot of Color Analysis Application demonstrating the features of a color dropper, and identifying whether a combination of colors and whether they pass or fail different levels of color contrast.

When choosing colors for web content, you might be tempted to use a stark white and solid black for maximum contrast. However, both of these colors can cause eye strain for users.

Check out the article below that explains how to choose off-black colors for text 👇

Designers should avoid pure black typography — but which dark gray should we use?How to choose accessible dark gray typography for your designs.

This article describes some important considerations for users who have dyslexia, going beyond color choice, to consider text hierarchy / layout, font style and writing style!

Dyslexia friendly style guide - British Dyslexia AssociationThis Style Guide provides principles that can help ensure that written material considers the difficulties experienced by some dyslexic people and allows…

Text Alternative

According to the Canadian National Institute for the Blind (CNIB), there are about 500,000 Canadians who are blind or partially sighted. To ensure that these people have equal access to non-text content on the web, the WCAG Guideline 1.1.1 requires that "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose..." (Level A)

Guidelines like this are less clear-cut, and require a bit of creativity on the part of the designer. Below is a helpful guide from Harvard University, about how to write alternative text, or as it is often called, "alt-text".

Clip art image of a woman adding a gift tag that has "alt" written on it, to a browser window.

Writing Alt Text

Plain Language

In WCAG 2.0 Guideline 3.1, text should be "readable and understandable". One way of doing this, is by using "Plain Language".

But what is Plain Language? Here's a short video:

Want to learn even more about Plain Language? Check out these resources below 👇

Plain Language is for Everyone

PlainLanguage.gov

In addition to the resources listed above, the WCAG also has a huge list of exhaustive list of WCAG evaluation tools!

WCAG Evaluation Tools

If you are designing learning content on the web, this document (while from 2014) has a lot of practical information to help designers to understand not only how to design accessible web content, but also explains how people with disabilities use the web. By understanding how they use accessibility tools, we can then design with them in mind.

Disclaimer: The resources linked on this site are provided for informational purposes only. I am not affiliated with, nor do I endorse, any of the external organizations, websites, or communities referenced. While I strive to share valuable and reliable information, I cannot guarantee the accuracy or accessibility of third-party content."

For me, accessibility is personal.

An "Uh-Oh" Moment

CCA - Color Contrast Analyzer

Text Alternative

Plain Language

Connect with me: