EP 1 | Accessibility in Graphic Design pt 1

Oh hey there! It's deja. your friendly locally grown ethically sourced graphic designer who may have a little crush on the invention of hearing aids. 

And we're talking accessibility on design tea.

 accessibility seems like a buzzword to some but it's a necessity for others.

 So let's start by actually talking about what accessibility is and what kind I'm talking about.

 okay instead of a boring definition let's give you an audio visual.

 Imagine This “  you're an 18-year-old student who needs to write an essay for their latest boring history class. you go to the website your teacher tells you to go to to find an article on Napoleon only to realize…

…  you have no idea how to use this site or even navigate it…

 Now we can argue that this site may not be intended for an 18 year old student just about to graduate high school.  but more so for a student in University, around their early to late 20s.

 However I'm arguing that that's a  load of hogwash and that web design let alone any design should be designed with all individuals in mind.

 now let's continue with the hypothetical;

“ You, the 18 year old high school student who desperately needs that article on Napoleon, have never been on this site before in your young dorky life.

 The website seems like any other. The top left has a logo that when you click it brings it back to the homepage. There's a search icon with a place to type in the top right and a little icon to show you and guide you to where the accounts are next to it.

 but the directory guide is a nightmare, the algorithm isn't searching for what you need or inputted, and oh my God WHY is the type so small in the colors so bright? and dang it there's at least two pop-up Windows hurting your brain every time you click a button or enter a new tab.”

websites, research, and the ux/ui design behind it can be overwhelming to some and SUPER overwhelming to others.

Okay so now let's add some layers to this hypothetical that people may not think about.

 you are no longer this 18 year old student in search for academic articles on Napoleon.

“  You are now an 89-year-old grandfather who would rather be anywhere else than ordering their medication on the internet. and the internet has changed so much over the years, that you've never been able to get a grasp of it.”

OR how about:

“ You're a heard of sight individual trying their best to just stream their favorite song on a music platform but cannot seem to find the song due to the contrast of the text to background ratio.”

 OR how about another:

“ You're a hard of hearing individual with mobility issues trying to hit the right button to turn on closed captioning for a video. You're frustrated because you can't hear what you want to hear, and are unable to hit the tiny button that activates the closed captioning due to Mobility issues.”

This, multi-episode, conversation is not just about accessibility it's about the advocacy designers don't realize they can have over an everyday struggle for someone else.

 so, now that we have more context, let's talk about accessibility and how we as designers can shape the future for everyone, not just one group of people.

Accessibility in the design world is the process of creating visual content that can be used by the widest ranged audience. 

We learn this, but the practice of it isn't the most thorough or in depth. 

I would argue that we shouldn't be focusing on the widest range audience, but some of the lower range audiences to make it accessible to every audience. 

Think of those silly commercials where someone is holding a bowl and throwing it randomly in the air dramatically. 

Then later within the commercial they introduce this bowl that stabilizes itself or that sticks to the table with a twist. Seems silly right? 

Well, that commercial isn’t meant for the wide audience, it’s actually meant for an audience that NEEDs that accessibility feature. Like those with Parkinson's or the elderly.

And as I mention the elderly. It’s important to note that our largest generational population is beginning their transition into seniorhood. Which means that we as visual designers need to account that one of our largest online demographics will start to have more issues than the younger generations. 

Baby Boomers and Generation Xers aren't as techno savvy as Millennials, Generation Z, Generation Alpha and the newest generation: Generation Beta. 

With age comes multiple issues that can lead to accessibility issues, such as arthritis, and mental cognition issues, it is important to note that. 

technology grows at a rapid pace in comparison to how it has been historically and we as designers have an opportunity to create an ease at this increase. 

We all age, think about that.

 So,  how do we as designers continue to keep UX/UI an acceptable environment for all?

 Well…  I'm so glad you asked gentle listener. Because this is part 1 of this series, we'll be diving deeper and deeper into this topic.

But for now, let’s skim the surface.

One of the things we can do as a designer is talk to people.

I know, it's okay, I know our introverts are terrified now, it's super scary.

Putting your ear to the public and canvassing people, talking to them, and learning about the differences in the humans around you makes you more conscious of others.

 Okay, that's a great start! Now let's talk about some of the issues that may come up then we'll continue on the how as we do so.

 People are different, they're built differently, they act differently. We are all different.

 Some differences that may commonly appear are:

• Light sensitivity

•  Vision impairment

•  Hard of hearing or deaf

• Vocalizational issue or mute

•  mobility issues

•  color blindness

•  cognitive impairments or disabilities like dyslexia, ADHD, autism, 

• and more

 There of  course is more than this but we’ll Target the larger issues that still get put on the benches for now.

 These differences can be assisted too with simple adjustments to color, text, imagery, and other means of design including layout and more.

 For an example:  a light or color sensitive person usually avoids bright colors like pure reds, blues, greens, and yellows. Think of Pantone color 1795c or Pantone yellow C. for those  on the autism spectrum this difficulty with light and color is quite common.  In this example, it's important to know how color psychology can also play into this…  but that's for another episode and we'll be getting into that more then.

 In addition, a person with color blindness usually has accessibility features built onto their phone or computer for them. but, I believe we can augment that at the Source by avoiding the more common color combination issues such as red, orange, with green.

 and of course, contrast.

 I know, contrast, the thing that we've been beaten over the head with by all of our professors and mentors over the years.

 and I'm about to do the same to you.

 contrast between text and background matters.

 contrast is our first major area we are taught but still does not seem to be followed. it's one of those rules that people know, but try to break to be more funky, fun, or dynamic with their work. Or even to hide meaning within their work.

However, the rules of design, or the principles, are there to guide us for a reason. Design principles are as follows: 

composition, alignment, hierarchy, balance, repetition, color, contrast, negative space, and unity. 

Some more principles include:

repetition, emphasis, simplicity, and proximity. 

I'll go deeper into the principles of design later, but essentially think of it like this.

 blue text on a blue background when one is barely lighter than the other is unreadable. red on a blue background that has a similar saturation level is really hard to read. This is a problem that is in constant need of work for particularly newer designers  and people just starting to get to know design. But we still see this in various websites… Think of early day Tumblr, or if you were born in the 90s and before, MySpace.

 so I know you're asking how do we solve this? Don’t worry… there are multiple ways.

I'm not telling you to think in black and white for this, more like in grayscale. Before you start thinking in color, and I'm sure every UX/UI designer has heard this and you probably have too but making a wireframe is super helpful when starting a project. even turning your working palette into a grayscale tone and then using that as a core base can help you navigate how colors sit on top of one another. Then when you work with color, you can easily balance out the color system and the palette chosen. Another thing that can help is a contrast checker. for those who know, Adobe has one of these, and there are plenty  more out there.  This way you can see the contrast of your palette in a different way, seeing what may work, what can work, what may not work, and what cannot work.

 The next thing we can target are visual cues.

 visual cues like a color changing button that visibly clicks helps notify your user that they've done  something without any second-guessing. allowing a user to see things change as they scroll, hover, or click is both a satisfying visual as well as a confirmation. this beats out any questioning the user has and the 10,000 rapid clicking we see people do when they slightly Panic on a computer. we need to make sure that that overzealous college student  gets those bad Bunny concert tickets with only the anxiety of their bank account being depleted. We don't need to add on to that.

 some examples of visual cues are:

• Buttons that actually click down when you press them

•  text, buttons, images or other things that change color, opacity or Clarity when you hover over them

•  color changing text when there is a link

•  small animations for loading screens after you click something

 Speaking of text, let's talk more about text typography and type.

 text and type is kind of important.

 okay not kind of, it's extremely important.

 text and type along with symbols and iconography is how we navigate the world. the world's literacy rate is at 86.3% with men being at 90.0% on average and women at 82.7%.

 Deja…  this is a graphic design podcast,  why are you throwing stats at us?  you may be asking….

…  shut up…  I rebut…

 This statistic proves that people can read whether they do it actively or not. unless you work in customer service then you know, no one can read.

 In addition attention spans for the average user sits around around 7 seconds currently, and is estimated to deplete. Graphic designers have developed strategies to navigate this issue and to help the user’s eye to move along their designs to more important details on the page, site, etc. and a lot of it has to do with typography.

 Reading doesn't just need your eyes, it needs your ability to recognize and have a familiarity with the language, letters, and its forms used in order to understand what is on the page. so you can imagine that using the right type matters.

Firstly, type needs to be legible.  when people are young, old, new to a language, or have difficulty navigating texts like those with dyslexia. typography, type, and texts become really important for a graphic designer to design with an open mind. and this is especially true in web design.

 some factors that may affect the readability of text can be:

• Typeface

•  Formatting

•  Alignment

•  Spacing

•  line length

•  font sizing

 in addition to this, I'd say we add on these:

• Text Hierarchy

•  Contrast

•  to be more specific about type, kerning

•  and the flow of type placement

The most common typefaces used for avoiding any issues are usually Ariel, calibri, helvetica, Times New Roman, and Verdana;  according to the association of registered graphic designers of Canada aka the RGD if you’re feelin’ spicy. You see these typefaces all over the internet. Right now as I'm typing this out on Google Docs I am actively using Ariel because it's the set font for this site. Times New Roman used to be the most widely used type, and is most commonly used now in Academia. mainly for those pesky essays that graphic designers went to school to try and hide from, but unfortunately didn't manage to hide hard enough.

Helvetica, is one of those types  that have a reputation for being extremely readable, as well as overly used, and also underly used for some reason. but we'll get into helvetica and it’s haters another time.

 All I'm saying is that choosing a clear type is very helpful. and, making accessibility features such as a type font resizer on the page, a dyslexic typeface Switcher, or even having the ability for the page to be read out loud by the browser is super helpful and accessible for various different people.

 so…. So far let's recap a little. what I've suggested, or may have suggested off-handedly is the following:

• Contrast is important, make sure there is a large contrast of type to background ratio

•  typeface is important, making sure you have a legible type for all individuals young and old, and otherwise

•  Visual cues act as a guide for the eyes, for all types of people and help navigate a website easier.

•  The principles of design make it easier for all viewers to follow a page from top to bottom.

•  creating a hierarchy is extremely helpful for people who have a low attention span

 Okay, let's continue, I'm not done with you yet.

So I mentioned mobility issues before. So let's talk about that.

 We can talk about mobility issues in two different settings. You can talk about it on the computer and we can also talk about it on the phone. Let's start with mobile.

 a phone can be easily used with one hand, for some it has to be used by two or even having an instrument to be able to help a person hold it.

 the average person in the world usually uses the right hand. we can't always make an app that switches each side to best comfort left-handed people. but we can always make a setting that can switch a button for example a cart or an arrow that brings you back up to the top of the screen to the left. just a little toggle, easy peasy.

 but people with mobility issues need a little bit more than that. We have people with Parkinson's for example who have a hard time holding things and have a continued shaking motion within their body.  Now there are many tools that can help people with Parkinson's keeping something steady, especially for their vision. But let's talk about accessibility and button use.

 Now this suggestion is actually helpful for everybody: it helps with the dimension of your hand, and it helps with avoiding arthritis in the future.  and of course it's something we learn in graphic design school all the time.  and that's making sure everything you click is in the range of your thumb. You should be able to reach every portion of the screen where a button is without having to move your hand too much or stretch your thumb out. and with phones getting larger again, for example an iPhone Pro specifically the 17, things are getting a little harder to reach.

 So how do we navigate this? Well, it’s easier than you think.

 just place the damn thing closer to your thumb. actively watch yourself use your phone, and see where your thumb is going, what is a very uncomfortable position and how do we avoid that. Do you have carpal tunnel? Cool, so does a good chunk of the world, lean on that.

 Making things closer and more easily accessible doesn't just help a person trying to live their everyday life, it actually helps your client for those of you who just want to be cogs in the machine.  you can make a cart button by the thumb and it makes it easier for somebody to buy something. which by the way… is an accessibility feature.

Yeah yeah yeah, I get it. Your uncle Dan in the corner is crying about the “woke mob” but hey, don’t worry, trust me. He’ll learn to read and retain actual information… eventually. If he ever gets off facebook.

Coming back to reality, let's talk more about how we can actually help people.

Advocacy.

Advocacy can be very scary for people especially those who don't feel like they have to. In the autism community and the neurodivergent community as a whole we usually have to try an advocate for ourselves. Though they’re not exactly listened to, and deemed as complainers. This leads to a lot of neurodivergent people not even advocating for themselves or for others anymore. A lot of it comes from fear, and a lot of it can come from thinking it's almost unnecessary to help other people's conditions. In that sense, people who don’t even have disabilities don’t bother to do so, because they believe it doesn’t affect them.

Let me open up a bit.

 hi, my name is deja, I'm a graphic designer, but other than that I'm also a neurodivergent individual. This allows me to have a different viewpoint than other people. Not to toot my own horn but I’m intelligent, have 2 degrees one of which was honours, and 3 certifications. However, I find bright colors, flashing lights and high intensity settings extremely disturbing to my vision, my brain, and oddly enough even my skin. It makes me overall uncomfortable and even nauseous. So when I see a website that has flashing images or has a massively brightly coloured background, particularly red, I usually want to throw up. 

Or, for another example, when my teacher, we’ll call him Glenn, cause that’s his name, forgets to tell me that a flash is coming from one of his cameras and then the flash goes off in my eyes. I nearly vomited in the classroom. Sorry Glenn!

Advocacy in the design world can be really hard. Having to pitch to your client a reasoning of  what and what not to do is already hard enough but when you bring certain aspects of accessibility into things it can make it a little bit harder. for example, a really dark example (TW for Suicide for those who need one), I had to make a sign for suicide awareness for a past internship. The sign when read one way didn’t really say the message the way it was intended too. I advocated that sometimes when a person is so depressed they only see words that they want to see first, and the sign could be read another way which could cause an issue. They ended up not taking my advice, but that's all right because the way that I see things  doesn't always apply to everybody else. but I was happy that I spoke my truth, and my voice and gave a kind of an example of what could happen when even copywriting can go a little bit wrong.

 Nudging on little things like a font size button where you're able to change the font just with a click of a button can help even just one person. Changing the flow of a website can help many people. even changing the colour of one Singular button, can help people navigate a website far easier than before.

 designers have a tendency of talking to each other about what is good and what isn't good for design, but I think that it's important to talk to all types of individuals. hell I was a historian before I was a graphic designer.  and knowing people’s views helps you understand the world around you and what it kind of needs, or at least how to make it just a little bit better.  Just like I said before, putting your ear to the community actually helps you become a better designer. because as much as the  average person doesn't know principles of design, they can actually highlight issues that they have with design in the modern day. We as graphic designers need to remember that just because something looks pretty doesn't mean it's actually good design, graphic design is about the functionality of what we create while also making it look beautiful. 

So let's stop here for this episode. I want to thank you for sitting with me and vegging out and listening to me speak about different concepts here. I'm really new to podcasting  so I will be honest it's a little nerve-wracking. And even though this episode is scripted, I know I have a tendency of rambling even in my written words. but I'm really happy that you have joined me on this little journey. 

That's the end of part one for our accessibility episodes. We'll be getting  into accessibility, and the world of diversifying your brain as well as the environment that we live in later episodes. 

So come with me, sip some tea, and add a little sugar and honey to it. next time, on design tea.