Disabling Design: Creative Practices for Community Care

Speaker: Jessica Oddi in English. 27 minutes and 11.49 seconds. With a live Questions and Answers segment to follow. Links to original files: Google Doc Transcript and Presentation Slides.

[0:00:00] introduction

Video: Large screen of the slide presentation to the left. Right top screen of Jessica’s video. Text underneath. Jessica Oddi. Disabled designer. She/her. JessicaOddi.com.

Audio: Hi everyone. My name is Jessica Oddi. Before I get into this presentation today, I'm going to do a quick visual description. For those that don't know, a visual description is a great way to start off any meeting in an inclusive way, to describe what you look like for people with visual impairments or, maybe someone who's not paying attention to the screen. 

[00:00:50] slide 1

I'm so excited to present to you today. We're going to talk about disabling design, creative practices for community care. And if anyone wants the transcript to this, or download the slides later, we'll make it available for people, as well as a recording of this session.

[00:01:11] slide 2

Slide two. A bit about me. 

I'm Jess, a disabled designer. I've been freelancing for 10 years now. I use she/her pronouns, as well as identity first language. Which means that I prefer terms like disabled person. I focus on accessibility in branding, websites, and representation through digital illustration.

This image is by the talented photographer, Gary Tran. He is a disabled photographer in Toronto. So that's a black and white headshot of myself. I'm looking up to the right and smiling. And my wheelchair headrest is in the background.

[00:01:56] slide 3

Slide three.

Words are powerful. We must understand how disability is even perceived in society, before we can explore how to design for disabled people. So what is disabled? According to the dictionary. 

Number one. To make unable or unfit; weaken or destroy the capability of; incapacitate.

And what I'm particularly interested in, is the reference to digital tech. So the definition number two is: to make a device, system, or feature unable to function; turn off. 

[00:02:37] slide 4

Slide four. 

But what if we reframed our perspectives of what it means to be disabled, and what disability is? The definitions I'm going to share with you are from my life experience, as well as community influences. The Disabled List, Sins Invalid, Alice Wong, among many others before me, are all people who have been reframing what disability means to society.

Number one: to destroy the idea of what society considers unable or unfit, based on ableist systems that determine a person's worth based on a white, hetero, cis, able-bodied, and mind hierarchy. 

And number two: digital technology to remove and remake devices, systems, or features, that are unable to be accessed by as many people as we can create technologies for.

So I'm encouraging us as designers to question the frameworks of the words we use. A dear friend of mine, Karli Drew, often speaks of access needs being something that everyone has. For example, everyone needs to use the washroom. That is an accessibility feature. The fact that we need public washrooms. But what disability needs is somehow considered less important, because it's not in the norms of what we create. 

[00:03:58] slide 5

Slide five. What we will cover today. 

We're going to reframe accessible design. Going beyond compliance, to build with and for the community.

We're going to create more than a product or service. Let's discuss how we can make our process and environment as inclusive as our accessible design practices. 

And we'll begin the journey to learn from the disabled community. There will be resources, people to connect with, and acknowledgements at the end of this presentation. 

[00:04:32] slide 6

Slide six. Reframing design accessibility.

This is an image of an isometric phone with a bright vector collage of access features. It includes a T for typefaces, an eye for visual cues, an audio speaker, a document with the check mark, a closed captions icon, a placeholder frame, and website wireframe. 

This was a vector banner I created for the Access Now app. Which is an app that uses crowdsourcing for rating whether buildings are accessible or not. And it was created by Myaan Ziv, a disabled advocate.

So we are going to balance today, three examples from the Web Content Accessibility Guidelines 2.1 standards and how we can kind of go beyond those standards in order to create more accessible design. 

[00:05:24] slide 7

Slide seven. Basics versus community. 

You know the standards are a great foundation. And a starting point. But we need to think beyond those for community support. What works for actual users and people that we're designing for? Not just what we think should work for them. 

So, for colour contrast, according to the WCAG standards, you need a minimum contrast of 4.5 to 1 for a double AA pass. And 7 to 1 for a triple AAA pass.

However, things that we should also consider, is that too much contrast can cause headaches or fatigue. How does your palette look to people with colour blindness? What is the relationship between these swatches? Automatically people think, the most accessible colour is blue, because according to color blindness, it is pretty much the same across the board. But blue always being associated with an accessibility feature is also sort of hindering. Why must we only conform to this one colour, when we have such an array of personalities?

[00:06:31] slide 8

Slide eight. 

Here's an example. I did a brand for Unsettling Dramaturgy. They are a space of Crip and Indigenous creators. 

To the left, we have the logo with all of its waving connections, against a red background, with blue and orange sort of organic shapes, dots, and textures. This is what it would look like for someone with no colour blindness. But to the right, we actually have a version of colour blindness. The red would be considered a brown. The blue would look a little more teal, and the orange is definitely more of a rich mustard colour.

I actually put in the brand rules, that the colour blindness palettes that I gave them, can be used as a secondary palette within the design. So instead of just adhering to what people perceive as the normal colours, by using this, we explore prioritizing people with colour blindness into our designs. 

[00:07:31] slide 9

Slide nine. Basics versus community. Text spacing. 

According to the WCAG standards, there must be a minimum spacing. This is all based on the font size. Line height should be 1.5 times greater than the font size. Paragraph spacing should be two times greater than the font size. Letter spacing should be 0.12 times greater than the font size. 

However, it really depends on the typeface that we're designing for. Certain letters might be more spaced apart when the designer created them. The typography artist might have designed it with a wider letter gap. One of the biggest things with text accessibility, isn't just spacing, but it's actually being able to differentiate characters. We also have to consider the emotional components with certain typefaces. 

A colleague of mine, Katherine Hegarty, talks about how Comic Sans, for example, is a very notorious font, because it is actually very accessible to read. It's often knocked in design industries, right? Because it's considered not professional. Yet, it's really accessible. Katherine also pointed out that in the Autistic community, Comic Sans was often used in organizations that belittled people with Autism. So we have to be thoughtful about our choices. 

[00:08:54] slide 10

In slide 10, we can see an example of Montserrat for a client project that I had for Pause and Affect. Where we realized the letter spacing didn't need to be 0.12 times, because the normal Montserrat font had a wide letter spacing.

That's Montserrat with zero tracking. And then to the right, we have Atkinson Hyperlegible, which is one of my most favourite accessible fonts. It's from the Braille Institute. It's a free font. And that has plus 50 tracking. If you notice between these two slides, it looks the same, even though the tracking is different, and the letter spacing is different, on each. 

A great example would be to consider these characters. If you type in B 8, C O, I L, 1, straight slash, in uppercase lowercase, you can get a feel for how that font looks. Montserrat, for example, the L distinction and the 1, is from a little tick at the top. And then the capital I looks very similar to a lowercase L. The C and the O also are very similar in the sense that the C is just a cut off of a full circle. Whereas if you look at Atkinson Hyperlegible, the slab like qualities really differentiate each character. The C bends slightly different than the O. The eight is smaller at the top than in the bottom, so you won't confuse it for a B. And the lowercase L has a little like tick at the bottom. 

My general rule is that if there's going to be a lot of text, like body copy, use something with really good character distinction. But if you're using headings or emphasis fonts, you can get away with something more like a Montserrat. You don't have to really worry about your character's clashing so much.

[00:10:37] slide 11

Slide 11. Target size. 

If we hover over a link with our mouse, or with our finger for pressing a button, that would be the target size. The minimum clickable area for a cursor is 44 pixels by 44 pixels. However, cursors are not the only method of interacting with a device. 

We have fingers on mobile. Some people use voice access, which splits their screen into a grid system to select, almost like a longitude and latitude type situation. And so we need to consider these for people with motor disabilities, like myself, who might have a hard time getting that specific 44 pixels in size. Do we make it an inline link? Do we make it a button like object? These are things as designers, we need to think about. 

[00:11:27] slide 12

In slide 12, we have an example of a website I created for the AIMPA. I have to the left here, an inline text for the APAC, checklist, and a button right underneath for Discover our Recommendations. 

Now if we compare the sizes on the top right of the screen, we can see that the Discover our Recommendations, has a much bigger clickable area than the Accessible Physical Activity Checklist. Because it's long, you can get away with it, because the user doesn't have to get so close with their mouse, per se. But the button area is much bigger. So someone can easily click that button, even if they have dexterity issues. 

And on the bottom right, we see an example of the screen with the voice control grid on my Mac. So what it actually does is split up the screen into numbers, and then a user can just dictate: press 14, and it'll zoom into that big square and then break down into smaller squares. Discover our Recommendations is a lot easier for people to use. 

[00:12:31] slide 13

Slide 13. The basics of this is, put community over compliance. 

Sit with opposing views. Oftentimes in accessibility, we're told this is the rule. This is it. Yet in my career, I've found that's hardly the case. I've had projects where users had very opposing perspectives on what works for them. 

Even in my own life, I've had to adapt many standards that don't work for me. For example, if we're talking about physical design accessibility in the real world. Over here in Canada, accessible bathrooms don't need lifts or a change table. They just need a wide enough space, some handle bars, and you're good to go. So someone like myself, cannot use a public washroom. That's a very good example of how compliance doesn't suit individual need. 

So my biggest advice to everybody, as designers, is to be open. Get input from the community. If you're not a part of that community, and even if you are, we are all still allies to each other. I don't know what it's like to have other forms of disabilities, other than my own. It's almost like the same principles of UX and UI design, you know? The user knows what they need and prefer. They will provide you with the feedback.

So ask them, and always put the community first. It's our job as designers to fight for and with the people who are trying to make change. We don't wanna go with the status quo. That's not what you're in education for. 

[00:14:00] slide 14

Slide 14. Creating inclusive processes and spaces. 

This is an image description for a project that I did for Not your Monolith. It really embodies the themes of empowerment and misconceptions as disabled people in the community. 

A fat disabled person with dark brown skin, freckles, stretch marks, and blonde hair. Ribbons wrap around their body. The glowing heart they hold also lights up their hair, cane, feeding tube port, and hearing aid. So it was really a tribute to the beauty of disability. 

[00:14:32] slide 15

Side 15. Questions to think about. 

In order to create accessible spaces, we need to turn to disabled people. We are experts at our own lives. So trust in our advocacy and our knowledge. How will you adapt to your customers? Ask them, what do they need? What works for them? What doesn't? This cookie cutter approach we learn about, you know, what works in a meeting, or how to come across professional, et cetera, it doesn't work for everybody.

So here are some questions. 

How does your client prefer to communicate? This can really help with you scheduling a project. Do they like meetings? Do they like text conversations? How quick of a response time do they like to give?

What kind of learners are your clients? Are they visual learners, tactile learners, audial learners? This will really help to find out an approach for the project and feedback stages. For example, if a client is a visual learner, they might want more detailed concepts and previews than someone who's a tactile learner, who might prefer you describe the reasons behind your work, and why you did what you did. 

Are there any specific accommodations that could help the process be easier for you and them? For example, do you want timeframes in your project, like hard deadlines or soft deadlines? Do you want reminders for your clients, if they forget that they have to provide feedback. Or do they get overwhelmed by receiving too many emails?

And what file formats and deliverables are easiest for them to access and use, after you're done the work? Ask them what platforms they're comfortable with, and help them make the more accessible option as well. 

[00:16:14] slide 16

Slide 16. Here are a few of my adaptable methods, that I've added into my practices. 

In my contracts, I add in delays and accessibility accommodations. You know, delays can happen. What if I become fatigued and I need to take a break from the project, what happens in that situation? What happens if my client maybe goes through a depressive episode, or a family member goes to the hospital? So I sort of write a general clause that says, you know, we're going to inform each other as soon as anything happens and work on a solution together. Whether it be, I pass on the work to another designer, we put the project on hold. Maybe I just cancel the project altogether and don't charge. So you can figure out whatever you need in your contracts to accommodate yourself and others. 

Provide video, audio and chat options for communications. Not everybody loves meetings. Not everybody likes presenting. Some people work better, writing down their thoughts and sending it to you. So figure out what form of communication works for everybody. 

Offer accessibility solutions. Like meeting recordings, transcripts, closed captions. Ask them what they need in the meeting. Some people don't want to have to take notes or remember what was said. So I use this auto generated note taking app called Tactiq. I cannot type in notes while I'm presenting or doing a meeting. It's really helped my process. 

Create a flexible schedule that could be altered to allow for feedback. Clients sometimes don't wanna feel rushed. Especially if it's branding, you know, this is something they might have to live with or grow with for a long period of time. Maybe they need a few days to sit with it. Maybe I'm fatigued and I need some more time within a project to get it done rather than rush something, or just produce for the sake of producing.

Provide work stages in formats suited for the client's learning methods. If they're a visual learner, I do way more detailed concepts. I give PDFs that describe what the visuals are, and reasons as to why I did what I did. I'll pull in things we talked about from the meeting and write it down in my concept book, so that they remember. Give prompts to your clients. You can ask, what do you like about this logo? Do you think it suits your brand values better? For audio learners I present the concepts to them.

Give recordings or written tutorials on how to use your materials afterwards. I'll record myself going through the site after, showing them how to make the changes they would probably be making. Whether it's a booklet, or a link to my YouTube channel that's unlisted for others. So that they can go back to it, and they can feel confident in what they're creating.

And offer flexible payment plans. I found in my career, especially working with the disabled community, not everyone can afford my prices. I'm not saying undercharge. Please, students, do not undercharge yourself. But what I like to do is what I call an ethical pricing system. So if I'm working for large organizations, I charge as much as I can. Above rates or at par rates with other professional designers. Whereas my disabled comrades who need it, I offer smaller payments.

I had one client who could only pay me so much a month, because of their disability checks. So we divided a full cost project into 12 months, so that it was more accessible. Really consider people's financial situations. That is an accessible barrier that is often not talked about in design.

[00:19:57] slide 17

Slide 17. Resources and credits. Here is an image I did for Global Accessibility Awareness Day, that was featured on Yahoo. It has nine disabled people. 

An Asian cane user, and middle Eastern wheelchair user with a stoma bag, kissing. A white, Autistic, cis person with vitilago, sitting with headphones. A Black gender fluid person, with scoliosis and a prosthetic leg, doing the peace sign with a south Asian woman with down syndrome. A blind Muslim woman with a hijab and a white cane. A two-spirit Indigenous little person, in a power wheelchair with a trach tube. And a white man signs call me to a Black deaf woman waving hello. 

This project was my love letter to disabled folks around the world. To those always fighting for accessibility out of necessity. To the beautiful diversity that exists within our disabled spaces. This piece is a reminder of who Global Accessibility Awareness Day is all about. It's time that the rest of the globe step up their game and get on our level for accessibility. 

And this project was a huge undertaking. It was actually something I was very nervous about, because it's a huge responsibility to represent your entire community in one small square of space. I also questioned if I was the right person for the job. But I was honoured, and I really took that responsibility seriously. To make sure that I really showed the beauty in which I see the disability community to be.

[00:21:27] slide 18

Slide 18. Acknowledgements. 

What I've gone through with you today isn't new. I've based all of my practices from people in the community. Design groups, Facebook groups. Many others before me have taught me lessons. And not even just in disability spaces, even in other design spaces, we can learn so much from each other. 

I implore you to add accessibility into your practices, and to really reach out and make connections. Every person I've connected with through the years have not only given me new perspectives to think about, but have also really improved my skills as a designer, just from absorbing all of the wonderful techniques. So here are a few acknowledgements of people and things that have really, really helped shape my perspectives. 

The Black Experience in Design: identity, Expression, and Reflection, is a huge book filled with so many altering perspectives. I highly recommend it.

Katherine Hegarty. An interdisciplinary creative designer and Autistic person, where I learned much about community respect and differing opinions. 

KarlI Drew, or @ Karleia. She's a disabled writer, creator, and consultant. Very active in the community, and I have learned a great deal from them.

We're All Human. Resources for better, more inclusive design is a wonderful, simple space for the accessibility, not only basics, but really explaining them in a great way too. And then really bringing in some different perspectives and artists. 

Jen White Johnson, an Afro-Latina, disabled designer, educator, and activist, is all about soft advocacy and Autistic joy. I respect her work so much, and I highly suggest you all check it out. 

Amanda Powell, UX design and accessibility design expert. We're actually collaborating on a few things this year, and I've learned many perspectives from their own disability journey. And I was grateful for that connection. 

Zariah Cameron, an equity centered UX strategist, is just, killer. She is so for change, and just really shattering what the standards are in corporate worlds and getting real life perspectives back in that environment. So I highly suggest you check her out.

[00:24:00] slide 19

And then here's a list of resources, that you can go through after this presentation today. There's disability and community spaces. 

Black Disabled Creatives, founded by Jillian Mercado. 

Critical Axis, which analyzes disability media representation. From the creators of The Disabled List.

Disability Visibility Project, founded by Alice Wong. Which has an abundance of essays, artwork, and other pieces from disabled people across the globe. 

With Not For. Connecting employers and recruiters to disabled talent. I've had the honour of working with them many times. 

The Asian Americans with Disabilities Initiative, which is a youth led nonprofit organization.

Where are the Black Designers? A volunteer design advocacy organization that is really all about empowering black designers. It's really a beautiful space.

And Aroko Cooperative. Design for black liberation, care, and wellbeing. I've learned so many different perspectives from them, that are just so outside of capitalism, and it's a beautiful space.

[00:25:13] slide 20

Design accessibility resources. Of course, even though I talk about community over compliance, we still need to know the basics, right? 

There is a ton of resources on my own website's resources page. So I've linked that there for you. 

There is the Ally Project, or A 1 1 Y. Community driven effort to make digital accessibility easier. There are plenty of tutorials on there. 

Access Guide, which is a friendly introduction to accessibility by my colleague, Alex Chen. I highly suggest you check them out. It is a great starting point for web developers as well. 

The Guide to WCAG 2.1 standards, is a simple breakdown of the standards by myself and colleague Kai Prince. 

Descript, which is an audio, video editing and transcript app. It's actually what I used to get the transcript and closed captioning onto this video with you today. 

The Colour Blindness Simulator, by Coblindor, is a really great simulation tool to see what your colours look like with different levels of colour blindness. 

And the Colour Contrast Analyzer tool. It's a downloadable app by TPGi, and it helps you to test the contrast ratio between two colours. 

[00:26:30] slide 21

Slide 21. Thank you so much for having me! I am so excited to get into our Q and A. Please feel free to ask anything you would like. I am an open book, and this is a space for new perspectives. No question is considered silly or weird.

Thank you so much, DJ, for having me. Meeting you has been such a cool experience, and I am so thrilled to see what you continue to do in your design career. My website is JessicaOddi.com. And my email address is oddi.jessica@gmail.com.

Feel free to reach out, follow me on social. I'd love to connect. Let's get started on the Q and A. 

end of presentation

Private Questions and Answers segment, not recorded.