Introduction
For this week’s post, I’m working out loud with a little show-and-tell project that lets you peek into my inclusive design thought processes.
If you’ve been keeping up with this blog, you know that inclusive design is very important to me. That doesn’t mean I know everything there is to know about it, but that I’m dedicated to continuously learning how to make the learning experiences I design more inclusive for everyone. So, in addition to considering how to best structure and present the content for learners, I’m always thinking, “How can I make sure everyone is included and no one is left out?”
Last week, I spent way more time than I probably should have working on my presentation slides for the Transitioning to Learning and Development Conference, which is happening this week.
Here’s a look into how I approached this presentation with inclusive design in mind.
Holy Whiteness, Batman!
The first inclusive design consideration I want to mention is making sure learners feel represented and valued in the learning experience.
The presentation I’m giving is for teachers transitioning into L&D. It’s called, “Discovering Your Teacher Superpowers: Leaning into Your L&D Strengths.” Since I’m talking about superpowers, I decided to use a superhero/comic book style for the presentation slides.
Here’s a random piece of trivia that won’t surprise any person of color. Did you know that if you search for “superhero” photos (whether on Google or stock photos sites), most of the images you’ll find are of white men? A few women will turn up in the results, but they’re mostly white too. (The images featured in this article are a heartwarming exception.)
To create a superhero-themed presentation that was truly inclusive, I realized I needed some custom graphics. Art is a hobby and passion of mine, so I (mostly) drew my own illustrations using Procreate (a $10 iPad app), working from reference images but changing up the characters’ gender, ethnicity, and other characteristics in most cases.
Even though it would be impossible to include every characteristic that could be part of the participants’ identities, I hope I included enough diversity in the images that everyone can feel represented and valued.
Not every learning experience designer is also an artist, so ensuring that your images are inclusive might take a little more resourcefulness. Fortunately, there are stock image sites that provide diverse images. Some have character illustrations that allow for easy customization. (See the resources at the end of the post.) And… I’m working on something that will help. Read to the end!
Truth, Justice, and the Accessible Way
The second inclusive design consideration I’ll mention is accessibility. I want to make sure all participants have equitable access to the information.
Here are a few things I did for accessibility:
- I used high contrast for text. In most cases, I used very dark gray text on a white background, even though the slides contain several other colors. Most slide titles appear on dark gray text over yellow, as shown below. There is one exception that I’ll discuss next.
- I created a handout and loaded it onto this website so I can provide a download link at the beginning of my presentation. (I’d send it a day or two in advance if I could.) I’ll share more about this handout in a bit.
- I used the slide masters, which not only helps with consistency but also helps make sure that assistive technology could access the text. (I had originally planned to provide the PowerPoint file to participants but decided on a PDF handout—for reasons I’ll explain in a bit.) For more on slide masters, see this post.
- I used icons to help ground the learner. My presentation is primarily a list of 10 traits that most teachers have that make them good candidates for a career in L&D. So, each slide related to a trait is numbered. This helps the learner understand where we are in the list.
Sometimes a Hero Needs to Break the Rules
Some of the text on the title slide of my presentation, shown below, does not pass a color contrast check. Yellow lettering on a pink background would normally be a huge no-no. However, since it’s very large text that’s outlined heavily in black, I felt it was a safe choice.
I tested it using the Colorblindly Chrome extension, and I didn’t have any problem reading it. (However, if you find it difficult to read, please let me know.)
What the Font?
From the screenshots I’ve shared already, you might have caught on to one inclusive design faux pas that I debated about: the fonts. Most comic-book-style fonts use all caps, which can be problematic for accessibility for a couple of reasons.
First, assistive technology often reads words written in all caps as acronyms, thus interfering with AT users’ ability to understand the content. Second, all caps text is less readable than sentence case text—especially for many people with cognitive disabilities.
I had a design choice to make:
- I could use a “normal” font that’s highly readable but doesn’t fit with the design aesthetic.
- I could use comic sans for everything, which is readable and fits with the style… but it’s a font that’s nearly universally despised in the design world.
- Or I could use comic-book-style fonts on the slides but create an accessible handout with a highly readable font.
I chose option 3 because I didn’t want to lose the fun factor (and I couldn’t bring myself to use comic sans, even though this would have been a perfectly acceptable use case). The headings throughout my presentation use an all-caps font, but the main text is sentence case. In the handout I created, I included images of the slides (with alt text). Next to the slide image, I copied the slide text (plus additional explanations) in the more readable Montserrat font that I use in my company branding.
You can download the handout here. Let me know what you think of my middle-ground solution.
Why a PDF?
I chose to provide the handout as a PDF so any user can access it whether or not they have Microsoft Office installed on their computer (or whether they’re viewing on a mobile device). Keep in mind that PDFs are not automatically accessible. I set up my source document (created in Word) to be accessible and then tested the PDF, both with the accessibility check in Adobe Acrobat Pro and manually with a screen reader.
Because I haven’t tested in multiple screen readers, it’s possible some people may experience issues I didn’t foresee. So please let me know if you have any problems accessing the document.
A Word About Alt Text
If you open the PDF, you may notice that the alt text for the slide thumbnails doesn’t include the text on the slide. That’s because I put the slide text to the right of the thumbnail, so there’s no need to duplicate it in the alt text. That would just be annoying to screen reader users.
I also didn’t include any alt text for a few of the slide thumbnails. For example, a couple of slides only have text (which is repeated in the document) and background graphics that aren’t important for understanding the context. I marked those thumbnails as decorative so screen readers would ignore them.
Some may argue that I should have been more descriptive in the alt text. For example, the alt text in the handout for the below image is “Group of 10 supervillains shown in silhouette with purple accents. Some are wearing office attire.” (By the way, these are stock images.)
Perhaps I should have described each villain, but I don’t think knowing what each one looks like is particularly important for the intended message. The more detail we include in alt text, the higher the cognitive load.
For some images, I was more descriptive in the alt text, because I considered those details as more important for understanding the intended meaning of the image.
For example, the alt text for the below image, representing teachers’ superpower of communication, is, “Comic-book style illustration of a male, muscular superhero with long braids wearing an orange costume and purple cape, carrying a microphone and a dictionary, with pencils in an ammo belt across his chest and a speech bubble next to his mouth.”
Remember, with Great Power Comes Great Responsibility
As learning experience designers, we play a critical role in—and have a responsibility for—promoting inclusive practices in our workplaces. That starts with the learning experiences we develop. Together, I believe we can change the world. And we don’t even need super strength to do it.
If You Want More Diverse Illustrated Characters...
With some other (more talented) artists on my team, I am working on developing a set of truly diverse and inclusive illustrated characters for use in eLearning courses. That means, in addition to what we normally think of when someone says “diverse” (skin color, gender, etc.), we want to celebrate people—of all sizes—with brightly colored hair, tattoos, limb differences, other disabilities, gender-nonconforming hair and/or clothing, religious attire… you name it.
If you’re interested in being a “model” for these characters (and receiving access to the characters once they’re developed), please complete this (very short) form to show your interest.
Please be patient if it takes a while for us to get back to you with specifics, as we’re still working them out!
If you’d like to be notified when the illustrations are ready, or you have a request for a type of character you’d like to be included in the development, please complete this request form.
Resources
- Colorblindly Color Blindness Simulator (Chrome extension)
- Blush—customizable illustrations
- eLearningArt—illustrations customizable in PowerPoint
- Affect the Verb—free images (disabled, BIPOC, LGBTQ+) with alt text
- Nappy—free photos of Black and Brown people
- Deposit Photos
- 18 Free Graphic Design Resources for Instructional Designers
- eLearning Brothers Asset Library
- Gender Spectrum Collection—Stock photos beyond the binary
- Body Liberation Stock Photos—Stock photos and images for body size diversity and acceptance
- TONL —culturally diverse stock photos
- Disability Images
- Procreate (iPad illustration app)
Comments
You’re welcome! So, with the controversy currently on casting people of color in roles that were written for caucasian characters…Where do you stand? I want inclusion as a person of color, but I don’t want to want people of color to be cast in roles that meant for caucasian characters. I think people of color should tell new stories. Our stories.
Hi Fonatee, please forgive my long delay in responding. Personally I think the controversy is much ado about nothing. My stance is that there are too few roles written specifically for people of color, so I’m all for opening up roles that have been traditionally thought of as Caucasian for better representation when it makes sense to do so. I also think shows like Bridgerton, which reimagine color lines in historical periods, are fun.
I can think of very few examples of characters who are written to be Caucasian where it really matters that they’re white (unless, of course, it’s meant to be historically accurate—and even then, Hamilton has managed to pull this off very well).
That said, I do believe we need more roles written specifically for people of color so we’re not just whitewashing them and ignoring cultural aspects. As you say, new stories—authentic stories. Thank you for the thought-provoking question.
As a Marvel fan first let me say I love your designs and I approve of this message. As designers we work with everyone so it is vitally important to practice inclusion.
Thank you for the feedback!