March 11, 2021
Sole presenter for a workshop presentation. Hosted by Wethos.
Independent designer Jessica Oddi walks us through the foundations of incorporating accessibility practices into our social media and design work.
Live presentation with auto-captions and a transcript. Recording adapted by Jess to include closed captions and Q and A.
To keep the video on screen beside the transcript, use the toggle button named "sticky video". On first click it will add a fixed positioning that makes it stick to the screen. On second click it will remove the sticky element.
Speakers: Jessica and An in English. Approximately 50 minutes and 59 seconds including the live Q and A. An moderates and reads out questions from the audience as Jessica answers them.
Scene Description: Screen enters with Jessica taking up the full screen.
Jessica: I did include the live transcript. So that has been turned on. If anyone else has any other access needs, feel free to type it in the chat and we’ll try to accommodate as best as possible.
A quick visual description of myself right now before I share my presentation. I have short brown hair and vintage glasses and wearing a maroon sweater. I am white with light skin and you can’t see my wheelchair because I have that background green colour covering it. But I am sitting in my cozy wheelchair right now.
So, I will go ahead and, start this presentation.
Scene Description: Presentation screen changes into a split screen of the presentation slides and Jessica moves to the side.
Jessica: Alright. Can everyone see that perfectly [inaudible].
Jessica: Okay, great. Awesome. Cause it like, does this weird presenter view. Alright!
Is It Accessible?
A Bit About Me
Hi everyone! My name is Jess. Pronouns she/her. I’m a freelance disabled designer from Ontario, Canada – Hamilton, Ontario, Canada. Which is situated on the traditional territories of the Erie, Neutral, Huron-Wendat, Haudenosaunee and Mississaugas.
My focus? Bridging the gap between design and accessibility from a community focused perspective.
Image description. Me smiling, sitting all cute in my power wheelchair. Parked on an angle outside red church cafe. I am white with olive skin, green eyes and brown hair tied back in a low bun. I’m wearing a white collared shirt, light denim jeans, and camel coloured lace-up boots.
Today we’re going to explore accessibility in digital design. Which is more than technical standards. Access must center the disabled community and the importance of allyship.
After a quick disclaimer, here’s a breakdown of what this workshop will cover:
Followed by live questions and answers segment at the end, that will be added to this transcript later on.
Image description. Trista lying on a bed of small daisies with a bearded person behind them resting their head on her hip. Trista has light skin, pale blue eyes and is looking to the distance while resting her head on her hand. She has a nose piercing and black lace lingerie. Her hair is up in a bun.
Artwork by Jen White Johnson [she/her]. Instagram user at JTKnoxRoxs.
Caption and image description by Jen White Johnson. My piece is a digital photograph titled AeroJoy. The title is a play on the hashtag #AutisticJoy that I’ve been using in my design work that is meant meant to amplify Black disabled lives and acceptance in the Autism Community. Particularly the Autism community of colour. My son was diagnosed as Autistic when he was three years old and I have ADHD. We are a very vibrant and joyful Neurodiverse Black family, a notion that you often don’t see praised or highlighted in mainstream media.
Boy is smiling with hues and blues and purples illuminating on his face. He was wearing a NASA space helmet.
It is impossible to build for a community without knowing anything about it. Successful design needs a human approach. In order to support accessibility we must first understand some basic principles of disability culture.
I could spend an entire presentation on this topic alone, but in order to keep it designed focused, I’ll cover some terms that I believe are relevant to this workshop.
What Is Ableism?
You may have come across this word, especially regarding disability activism. The most powerful definition I’ve come across was by Talila Lewis.
“A system that places value on people’s bodies and minds based on societal constructed ideas of normality, intelligence, excellence, desirability, and productivity. These constructed ideas are deeply rooted in anti-Blackness, eugenics, misogyny, colonialism, imperialism, and capitalism… You do not have to be disabled to experience ableism.”
Unlearning ableism can start with embracing a disability justice framework. Sins Invalid has a beautiful overview of this principle in their article “What Is Disability Justice?” This framework understands that:
I also applied this for my own work to create and design for every single body. Adapting for individual preferences. And most importantly, to understand that accessible practices are really human practices. They must continually change to meet everyone’s needs.
There are many forms of disability. Visible and invisible. Physical and chronic illness. Neurodivergent and Autistic. D/deaf or Hard of Hearing. Blind or Low Vision. Mental health conditions and so on. We must be mindful of the intersections of race, gender, and sexuality within these spaces.
In general, there are communal agreements (avoiding terms like special needs or ableist slurs). With different opinions on identity. From “disabled person” or identity first language to “person with a disability” or person first language. Even down to choosing whether or not to identify as disabled at all.
Personally, I use identity first language because of my deep sense of pride for having a disability. It’s shaped many aspects of my personality and how I navigate through life.
Though I completely understand that I’ve had that privilege to freely identify as such without much consequence. Others, especially with multiple marginalized identities, don’t necessarily have the safe space to do the same. And even so every person has their own relationship with their disability.
It is not a universal thing. Even though as a community, there’s an emphasis for identity first language in disability advocacy, it’s important to acknowledge that not everyone can or will model that approach.
So navigating the community involves getting to know your audience on an individual level. If you don’t know how to address someone, ask them.
Supporting the Community
Photography by Garry [he/him]. Instagram user at ItsGarrysPlants.
Image description. Dynamic closeup of a vivid green cactus plant in an orange pot backlit in a bright red light.
Create Accessible Spaces
Designing Accessible Content
Artwork by Ty Dykema [he/him]. Instagram user at tmd.art.
Image description. A drawing of Alice Wong, an Asian American woman’s face. She’s wearing a black scarf with white swords on it and a grey purple bi-pap mask over her nose with darker grey tubes coming out of the front of it. She has shoulder length black hair with a slight undercut on one side. She has red lipstick and is slightly smiling.
This is more of an art than people realize, especially when creating a palette for a brand. Here are some things to consider:
Image description to the left. Four colour strips in wave shapes that are numbered against a pale peach background. 01 is navy blue. 02 is bright red. 03 is peach. 04 is white.
This is an accessible palette I created for a client. Here’s the contrast breakdown:
In general there are rules from WCAG plus some additional tips for choosing legible font styles.
Image description to the right titled Accessible Typeface Check. Comparing two typefaces using B 8 capital C capital O 0 lowercase c lowercase o 1 capital I capital L lowercase l and straight | placeholder text. Top box with a red outline and an X with “Open Sans Light” underneath. Bottom box in teal and a checkmark with “Roboto Mono Regular” underneath.
As you can tell here the top font doesn’t differentiate the number 1 from an uppercase I or a lowercase L. Which makes it hard to read. Whereas the other font provides better distinction. It’s not to say you can’t play with typefaces. Just be mindful how these characters look and how distinct the shapes are.
Designing for Different Disabilities
The UK government has a wonderful overview for the “Do’s and don’ts on designing for accessibility” by Karwai Pun. It specifies different user groups including: autistic, screen readers, blind/low vision, physical disabilities, deaf/hard of hearing, and dyslexia.
I’ve linked it rather than breaking it down here, because as with all resources, these are only to get you started. There can be cross disability issues. Where one solution may not work for another. A couple of examples:
The takeaway here is that universal design is definitely important, but accessibility is also an ongoing process. One rule might have to be adapted for one project or strictly enforced for another.
Again, I could spend a full hour going through the Web Content Accessibility Guidelines. Instead I’ll share the document “Guide to WCAG” created by myself and Kai Prince. We outlined a simple step-by-step breakdown of the 2.1 guidelines including:
Basically you want to strive for AA compliance, plus provide elements and thought into considering disabled users. There are plenty of goodies in the resources and links segment that dive into this even further.
Sharing Content Online
Artwork by Amanda Rios [she/her]. Website AriosGraphics.com.
Image description. Painted gradient mesh background, blending deep purple into bright red, orange, and teal.
Describing your image in text format is important for social media accessibility. Not to be confused with alt text [which I’ll explain later], IDs provide context to visuals like images, videos, and GIFs. They’re valuable for blind and low vision folk, or for those who process easier by reading rather than visualizing. A few tips on writing visual/image descriptions:
I get a lot of people hesitant to start doing their own descriptions. But here’s the scoop! There’s no one right way to do them. It’s very subjective to writing style and personality.
If you’re really stuck, here’s three basic styles to choose from. Pick one you feel comfortable with and go from there. It definitely depends on the environment and the purpose of the visual. I’m going to describe the image on the left in each style as an example.
People get this mixed up with IDs. They are not the same. Alt text is embedded in the code of an image. Um, us web developers know it for providing text context if images don’t load or are broken. Alt text is vital for screen readers.
I like to keep it very short and sweet, making sure any text is written out. In the previous image, my alt text was simply: “Image Descriptions with baby Jess”. Some people copy and paste their image description, but I don’t like to. Um, since screen readers will read the same thing twice. It’s, it’s very repetitive.
Um, in the next slide, I’m going to show how to add alt text in Instagram, because it’s really buried and hidden. Um, for other social platforms, simply search “how to add alt text on…” TikTok, Facebook, or whatever app you’re using.
Adding Alt Text on Instagram.
As you can tell Instagram made it super easy to add. [That was sarcasm]. Here I have three screenshots of posting an image on Instagram, but outlines the three steps for alt text. I’ve outlined the links in a red box for visibility.
Step 1. The new post window, when you get to the right of caption stage. Way down at the bottom, after all the tag locations, promotional and posting to other accounts options, you’ll find a tiny Advanced Settings link.
Step 2. Under the advanced settings, you’ll find a link under Accessibility called “Write Alt Text”. It says “Alt text will be automatically created for your photos, or you can choose to write your own”. Pro tip, write your own. Uh, they’re auto-generated text is horribly inaccurate.
Step 3. Alt text window where you can type in the alt text for each image. Click the checkmark at the top right corner when you’re done.
Captioning and Transcripts
All audio and video based content should have both captions and transcripts.
Captions are more than subtitles. They provide context for audio elements, including sounds and added audio descriptions of the setting. A little improvisation. Same thing like how I introduced myself and let you all know what I was wearing and my environment. That’s a perfect example. Manual captioning is preferred over auto-generated captions, which tend to misspell or skip vital information.
Transcripts are similar to the document that was sent out for this presentation. In fact, I’m reading this word for word so people can follow along with assistive tech. On social media. I like to provide them in the caption of my video content as well as captions embedded in the video itself.
Mabely Q has a thorough deck of accessibility resources for captioning and transcripts. I’ve also provided links for apps to help create them in the resources and links section.
Accessible Writing and Hashtags
Long convoluted posts can be exhausting and hard to read. Same with writing, enlarge paragraphs. Be concise with your words. I use apps like Hemingway Editor to check the reading level of my work. This helps to use less idioms or passive text.
For hashtags, capitalize the first letter of each word. This will allow screen readers to differentiate each word. It also makes it easier to read in general. Good: hashtag showing Jessica Oddi where the J and O are capitalized. Bad: hashtag showing jessica oddi all in lowercase.
Resources and Links
Artist portrait Hannah Soyer [she/her]. Website ThisBodyIsWorthy.com.
Image description. A black and white photo of a light-skinned woman in a wheelchair looking straight ahead of the camera with her hands across her chest. The words “Celebrate this body” are written across her chest in cursive. Her dark hair is a side braid and she has various tattoos on her arms.
Disabled Representation Continued
Accessibility Tools Continued
Thank you to everyone who attended today, and to Wethos for having me. This recording will be available after and posted on my website with captions and transcript, which will include the Q and A. If you ever want to chat about accessibility or disability, you can find me:
Scene Description: Presentation slide closes and the screen returns to just Jessica taking up the full screen.
Jessica: And that is all I wrote. *laughing*
An: Amazing. Thank you so much. Let’s see, as we enter the Q and A section here, we have one question from Sabrina. She says, “I have a question about Instagram screen readers and alt text. If a post has multiple slides, does the screen reader read alt text for each slide? Can you add alt text for each slide?”
Jessica: Yes! Great question. You can absolutely do that. So the example I showed only had one image, but when you do multiple images, a box shows up for each one. It just doesn’t do it for videos.
But instagram is doing auto captioning onto their IGTV and I think they just included it in their stories as well. Like not everyone has it yet. I think this just happened last week. So that’s another way there.
And then in your image descriptions, in the caption, you can simply label like: slide 1 or ID 1, ID 2, ID 3.
An: Thank you. I, I feel I’ve learned so much from this workshop, so thank you so much for your time and for putting it together.
While we were promoting this, we also got a few questions just from social media. So we have one from someone who asks “What’s your best practice for establishing accessibility standards, right from the start so the client knows, this knows this going into the project with you?”
Jessica: Ooh. Okay. Good question. I mean, I feel like it’s so subjective and it really depends on the purpose. So I basically do, brands mostly and web design.
So what I like to do is, throughout the process, discuss what areas I’m going to focus on to make them accessible. So when I’m choosing an initial colour palette, I let them know that like, listen, these colour contrasts are all check-marked and I will actually be providing you resources in your brand guide document.
Now that’s my big thing. I love to give documents. My brand guides are huge. Because I like to give rules and I have like full on accessibility charts for people. Sometimes I even write examples of how to do image descriptions. So I think it really comes down to, starting like an outline of what we’re making and then how to make that accessible through like step-by-step processes.
And, I know for a lot of like UX/UI designers, you know, research and crowdsourcing is – are huge elements. So make sure that you’re getting that research from the disabled community as well. And you actually have people who use assistive tech involved in your research.
To maybe reach out to them, personally, or I don’t know if there are actual like calls for people to do that sort of thing too. Cause I’m very solo designer, so I don’t really have much community connections, but I hope that helps.
An: Yeah. I think that’s, that’s great context to have. Let’s see. Another question here. First of all they say, “thank you so much.” And also “I’m curious if you have any experience with the closed captioning for IGTV. I have been manually burning captions onto the video, but not sure if they are accessible for screen readers.”
And we do have a reply from one of the participants saying “open captions are not accessible to assistive tech, provide access to video with CC.”
Jessica: Exactly. So see closed captions are actually like better for assistive tech, obviously, because it’s not just burning it onto the video. I actually, haven’t tested to see if the auto captioning is closed or open for Instagram. That’s a very good question. And I’m going to turn on my screen reader after this. And go test it out.
But what I do as a fail safe for social media, if it’s not an option, I actually paste the transcript of the entire video in my caption instead of writing a caption. So, f you take a look at my reels section on Instagram, for example, cause I also burned the captions in there because there are no, you know, apps that are doing that now.
Like I said, they’re just starting to add closed captioning to stories. So I actually paste it into my captions as a backup. So at least people can use that with their screen readers and still follow along.
An: Cool. That makes tons of sense. And [inaudible] says, “thank you, Sam and Jessica”.
We have one more question from Sabrina. “I noticed that on your Instagram stories, you have included audio with your photo. Is there a specific tool you use to do this, or is there a feature on Instagram?”
Jessica: Great question! I wish Instagram did a feature. It’s such, I don’t even want to say a pain because it’s not a pain. It’s… I, like doing this, but it’s such a convoluted process.
So what I do is if I’m sharing an Instagram post on my story, let’s say, right? Because when you’re doing a video, I can use apps like descript to actually burn the captions into it. So I can just speak and use like external apps like that.
But for example, when I’m sharing a post. I, share the post and then I download the image. I have an app called YouCut. It’s on Android devices. I’m pretty sure it’s available for iPhone users as well, but I have an Android. So, any video editing software that lets you add audio recordings will work.
So I open up the app, I upload the image, I expand the timeline. And then I record my audio recording on top of it so that I can read aloud any text and describe the actual image itself. Then I download that. Upload the video to my Instagram stories and then re add in any tagged people. Because if you, just upload the video itself, it won’t tag anyone. Cause it’s just a flattened image.
Unfortunately Instagram stories don’t have image description or alt text capabilities yet. So while they just added closed captioning, which is a step in the right direction. Stories are still inaccessible for screen readers.
Especially also to consider people who are deaf and blind. It, you really need to be able to do both and have that audio element with your video elements, with your text based.
An: Yeah, that’s awesome. Thank you. It really makes you think about how behind so many of these social media platforms are for how many people use them.
And then let’s see, we don’t have any questions from the chat right now, but another one from one of our, social audience members. “What are your tips for infographics slash visuals that handle the communication of a lot of data? Especially right now, we’re seeing such an uptake in the sharing of infographics on social media.”
Jessica: Yes. Infographics are a great way to convey information. You just need to provide text context as well. You know, you have to be prepared to describe all of those objects, especially if they’re more than just decorative, right? Like on a website, if an image is just, for decoration purpose or a symbol that doesn’t help actually give the information, then it’s okay.
But in general. Yeah, you want to be able to describe it and try to follow a reading like left to right kind of situation. Right? So make sure your infographics aren’t randomly placed. That they’re not overly confusing or you have to go from point A to C to B. You know, make sure everything kind of has a hierarchy structure so that people can follow along and you can describe it easier.
So like, whether it’s sticking to the same order of maybe having the infographic to the left more and then the text to the right. So then you can keep doing that and keep copying the same iterations. Then people are going to be able to follow along easier.
Graphics themselves need a 3:1 contrast ratio. So when you’re considering the designs or your colour palette for an infographic, make sure there’s enough contrast that people can actually see what it is. Not really like fading it out or try not to overlap text on top of it. Try to separate your symbols from your texts so that everything’s easy to read.
An: Awesome. That’s great advice. And oh, we have one more from Sam Kelly. “Thanks, Jess. Which three features by priority would you like to see from TikTok?”
Jessica: *laughs* This is going to show my – that I’m 30 years old and I’m getting older! I don’t have TikTok! *haha* I do know that in general, they have really good, applications in comparison.
Like there’s a feature that has, an automated voice. So it actually reads out the text you’re typing. I think, I don’t know if it’s used, for accessibility or if it’s just people like using it, but, I think on TikTok. I’m not really sure the capabilities of what works, right. Oh, that’s good to know. See I’m reading Sam’s Kelly comment. They said, “I’m 31 and they have text to audio for creators.”
So like, you know, every other app could get on that. That would be wonderful. And in general. I maybe even like prompts would be nice for people because I know often times with TikToK videos or from what I’ve seen when they’re shared on Instagram is it’s just like loud blaring music and then text on top.
But then they’re not actually reading out the text. So, you know, people with visual impairments have no idea that there are texts there. So make sure that you put the text of the joke or the whatever that you’re posting, in your captions as well, so that people with screen readers or that can’t see what you’re doing can follow along. Rather than just hearing random music with no purpose.
An: Mhm. Yeah, that makes a lot of sense. Let’s see. Anyone else have any questions?
Jessica: And feel free to ask, like, if you have any questions about disability or ableism or anything on that realm. I would love to be open about that too. Cause I know people sometimes get a little bit nervous about that or they’re worried they’ll say the quote “wrong thing” or anything. So, and if, if not, if you don’t want to share it now, too, I’m always available to chat afterwards. If you feel like a more intimate conversation would be better.
An: Cool. I like to give people sometimes two minutes to sit with their questions. I feel like in the quiet, eventually some questions bubble up.
Jessica: Yes, for sure. And it’s so funny about the comments that people say about like, you know, that Sabrina said about “these platforms could be designed more inclusively” and it’s so funny because, well not funny, but you know, tech is moving so fast. And sometimes it moves so fast that the assistive tech, you know, needs time to catch up. Or, you know, that’s also advancing very fast.
I mean, I remember even back in my school days where tech, I was like privileged by getting to have a laptop. No one else in the class got a laptop. So it was like, we had so much of these cool, innovative techs for disabled people to use and to, you know, if for me it’s because typing was faster and easier than writing. Cause I also couldn’t push hard on pencils, so no one could read what I was writing on paper.
So, and then now we’re in such a tech advanced area that people think, “Oh, it’s just so great for convenience” yet we’ve really lost the connection to make it accessible, which was very much, most of it’s purpose at the beginning, you know. Like I’m talking nineties again, I’m dating myself.
So it’s just, which is why it’s critical to really start out with accessible design. You know, like Instagram could have created an entire stories platform that was screen reader accessible from the beginning. And now they’re going to have to do all a lot of that coding and changing.
Like even these closed captured rollouts for stories, it doesn’t get included to every user yet. I mean, I didn’t even get Instagram music until like two, three years maybe after having Instagram. So, you know, it’s just, doesn’t come out fast enough.
An: Yeah. And I mean, it really seems like instead of folding in accessibility as a core, right from the beginning, it’s like playing catch-up at the end or like an afterthought. Really having to fold it in later.
An: Yeah, well, we’re just at time. Thank you so much, Jessica, for this really wonderful workshop. And thank you to everyone who spent their time here with us tonight.
This recording, as a reminder, will be sent out to everyone afterwards. So you will be able to access that and you will continue to have access to the presentation and the transcript as well.
Jessica: Thank you.
An: Oh, we also have one, one last question from Sam. “Will you get clubhouse on maybe a family member’s device?”
Jessica: Ooh, you know, I’m, iffy with clubhouse. They’re working slowly now towards accessibility, but it is not inclusive for the deaf community. Especially there’s the no actual like video options. So people can use ASL as well as there’s no auto, and there’s also no, close captioning features.
So I’ve heard that there are many hard of hearing people who do use the app and are fine with it. And then I know people like Erin Perkins who are completely against the app because they have no way of accessing it and it really did exclude an entire group.
And so until it becomes more accessible or more open to changing the platform. Like I understand the entire purpose was to be audio based, but you know, that excludes an entire group of people and this launched and boomed out of nowhere as far as like the extreme, you know, platform like it’s been gaining so much traction.
Yet They haven’t fixed that fundamental issue. And it’s still so new that I hope as their development team begins, that they can start looking into these things and we can fight for accessibility to be, you know, better on there.
And maybe that involves me joining and actually being on the app once it’s available to Android. So that I could try to do it from the inside. Or it’s about boycotting it until they can actually include everybody. So I’m not quite sure where I sit on that one yet.
Sam Kelly said that “there’s one iOS developer that they’re work – she’s working with directly with two groups to make the app more accessible at clubhouse, and they have acknowledged their efforts and it’s hashtag ClubhouseA11y with a one-one-y or y. And #ClubhouseAccessNow.”
And I do know Access Now because I am actually affiliated or I’m connected with the owner of Access Now that I’ve done work for them. And we follow each other on social. She’s also from Toronto. So that’s like, you know, huge Canadian representation. And I’ve been actually following along with the progression they’ve made on there. And I’m very happy for it.
So, you know, I don’t know if I’ll get it on a family’s device because then my poor mother will be out of her iPhone for long periods of time. But, as soon as I can get available on it, maybe I’ll help work on it from the inside. And thank you, Sam Kelly for all of your efforts. That’s awesome.
An: All right. If we don’t have any other questions from, from our audiences, I guess we can wrap up. If anyone has any questions about this recording or, anything else you can always reach me at an (one a one n) at wethos dot co. I’ve also dropped it into the chat box as well, so, yeah.
And Jess, if you have anything you want to shout out any projects that you have coming up before we close out, feel free to share it out.
Jessica: Yeah, sure. I have like two. So there’s one that my sister and I do for fun. It’s completely just to relax or poke fun at life. It’s called The Disabled Life. We’re on Instagram TheDisabledLife. Twitter, but we’re not really that active on Twitter. And, we have a website too with the original blog where we kind of draw and illustrate our lives.
As well, I’m working on a community called Access Design Collective, with a few people. I’m hoping to launch more in 2022, because I run on Crip Time because I’m tired and I don’t have all of the energy to build an entire platform.
But the idea behind it is to have like a WordPress or a space where we will, host one-on-one interviews of disabled creatives and get their perspectives on disability culture, philosophies, experiences, as well as accessibility techniques or tips that they use. Because, you know, I truly believe that there is no monolith or one experience, you know, everything makes the world go.
And there are many types of people with many different relationships to their disability, and I want to provide a open opportunity or a space for everyone to share those experiences. And more importantly, to learn from other’s experiences.
Even in advocacy and activism in general, I find there has to be a balance between sharing our own stories and actually opening up or realizing when you know, there’s like cross disability issues or when some person has a completely different perspective than someone else where. So I want this space to be a place where we can express those feelings. We can express those viewpoints and talk about them.
And then also for like non-disabled people to like hop on and understand real life perspectives and real life, you know, values and views from the disabled community itself. So ya that’s hopefully in 2022.
An: That’s awesome. And what a great note to end on. So thank you everyone. Hope you all are having a great afternoon slash night and yeah, happy Friday tomorrow. So thank you so much for joining us.
Jessica: Thank you.
Jess goes beyond compliance to focus on disability-led practices. Balancing lived experience with community spaces. Get to know her perspectives.presenting + features
Close up of an angled frame corner, with a thick shadow and flat background. Artwork of an abstract line and shape intersecting. Original mockup from Ceacle.