The SECRET SKILL that Designers and Developers Need to Learn to Stand Out in 2021

Show video

so what's the big deal about accessibility and inclusive design if you're working as a designer or a developer in 2020 it's probably not the first time you've heard these words and if it is the first time you're hearing about accessibility and inclusive design i'm going to run you through all the basics you need to know about these two topics and how you can get started so i want to start by giving you a quick introduction to who i am my name is derek may and i lead design here at 3play media a startup in boston that focuses on providing accessibility services for the web which includes premium closed captioning transcription audio description and subtitling solutions for pre-recorded videos audio tracks and live events when i first started with 3play media nearly two years ago i barely knew anything about accessibility going into my first interview with the company i knew that there were laws and regulations around making content on the web accessible to people with disabilities but i had no clue how that was enforced or what i could do as a designer to help out fast forward to today and i've realized that even though i've worked in the space for more than a year i still consider myself a beginner if you're interested in learning more about accessibility know that you won't learn everything at once as things always continue to evolve and change online so let's start by talking about what accessibility really is so what is accessibility a lot of people think that accessibility is the same as usability but there are slight differences so let's start with the term usability as designers or developers focused on the user experience our goal is to make products usable which means that we want to make them effective efficient and satisfying to use this includes general aspects that impact everyone and do not disproportionately impact people with disabilities or those that require specific needs to use a product or service so next let's move on to the term accessibility accessibility is about specifically focusing on designing solutions for people with disabilities so that they can equally perceive understand navigate and interact with products and services so a product can be usable but not accessible for example you can build a website that's completely functional and easy to use for someone who uses a mouse but if someone who's blind is using your site and can't navigate to different pages using a screen reader or their keyboard that's not accessible so a product can also be accessible but not usable for example if you take a look at warren buffett's site berkshire hathaway it has poor usability according to modern design principles but surprisingly it's pretty accessible the site is simple and is merely a list of links but the site has good semantic structure is tab navigable and has significant color contrast the problem poor information architecture outdated design and also there's such thing as berkshire activewear sorry warren this might be the reason why you're so rich but this just ain't it so if something is both usable and accessible then it falls within the umbrella of inclusive design which focuses on the diversity of those using your product or service microsoft has a really good inclusive design toolkit that helps you learn about the diversity of the people that you might be designing for so to give you a few examples the first one is if someone got into a really bad machinery accident and has lost an arm that person suffers from a loss of an upper extremity and part of their ability to touch or feel another example would be someone who gets an ear infection after having to listen to baby shark for two hours straight that person is temporarily disabled in their auditory modality so as a designer your goal is to make products both usable and accessible we'll cover how you can do that later in this video but let's quickly take a look at some of the barriers that keep people from having equal experiences when using your app your website or your product or service so there are five main barriers when it comes to designing equally accessible experiences so the first barrier is physical barriers these include physical obstacles that prevent someone from completing an action in the real world these can manifest in the form of steps and curbs or weight scales that don't accommodate wheelchair users or others that have difficulty stepping up onto the platform in the digital world this can include physical controls that only support either the use of a keyboard or a mouse instead of supporting multiple forms of interaction secondly communication barriers also affect how people communicate or take in content or information so for example some people are deaf or hard of hearing so you'll need to present information to them through a different medium such as the captions in this video other communication barriers include difficulties in hearing speaking reading writing or understanding barriers can also be economic or financial the cost of making something accessible to someone shouldn't be so far out there prevents people from participating in everyday life so for example back in 2015 martin shkreli and his company turing pharmaceuticals were accused of raising the price of a life-saving drug by more than 50 times its original price bring the cost of a pill from 14 to more than 750 dollars thus rendering it inaccessible because of its high price point fourthly there are also political and programmatic barriers some examples here include inconvenient scheduling or lack of equipment to support those that require accommodations in addition there's also just a general lack of education and knowledge around helping people with disabilities political barriers can also arise when laws specifically deny individuals the ability or opportunity to participate in federally funded programs services or just even denying reasonable accommodations so lastly we have social and cultural barriers even in 2020 several decades after laws and regulations such as section 508 and the americans with disabilities act were published there are still a lot of negative stigmas surrounding people with disabilities so in 2017 35.5 of people with disabilities between the ages of 18 to 64 years old were employed while 76.5 of people without disabilities were employed about double that of people with disabilities there's another statistic here that says children who have disabilities get bullied four times more than those that don't so as a designer your goal is to figure out how to design products with these barriers in mind so next let's move on to why accessibility is important so regardless of whether you're a solo designer or a designer who works with several designers and developers at a larger company you're considered the advocate for the user you have to anticipate and think critically about how you can design with accessibility in mind to prevent lawsuits from arising but also so that you're able to reach a broader base of users if your website or app isn't accessible your company or organization might be subject to litigation but on the other hand if your organization makes it a goal to focus on accessibility there are several benefits to doing so firstly you'll build positive pr and a good public reputation in the eyes of the accessibility community especially if your competitors or others in the same industry are not doing the same secondly making products accessible can sometimes result in better seo and ranking in search engines for example having good semantic structure in your html making sure that videos have transcripts or captions included and having significant font sizes and color contrasts are all things that can help you rank higher in search engines thirdly your organization will be able to reach a broader user base according to the cdc around one in every four americans lives with some sort of disability these disabilities can be visual auditory or cognitive just to name a few so making your products accessible will help you cater to a larger population lastly focusing on accessibility is just the right thing to do so regardless of whether you're an instructional designer a ux designer graphic designer or if you're just someone with an interest in accessibility and building accessible products your goal is to anticipate and address different ways people will use your product or service so within the realm of technology accessibility is a very in-demand skill there are hundreds and thousands of job postings online that look for designers and developers that know a bit about accessibility and in fact the national average for web accessibility specialists averages anywhere from seventy thousand dollars a year to upwards of six figures so that's another good reason to learn about accessibility and the thing is you don't need to have a disability to care about and work in accessibility as long as you can show that you care about helping others and are willing to learn and be open to new ideas that's all you need so we've covered what accessibility is and why it's important let's take a look at how you can get started now so let's start by talking about some of the things i'll be covering for the rest of this video first we'll cover some general rules of thumb that will help you design more accessible products and services next we'll cover how and why you should become an ally and what that term means then we'll end with some resources that you can use to continue learning about accessibility but before we get into any of that i want to start by saying that designing for accessibility is both a science and an art there are a lot of concrete guidelines that you can follow on the web that are based on science and theory when it comes to how you should design and develop websites and apps but designing for accessibility is also an art because not everyone you design for is the same and people's needs are different so that you need to tailor your solution to meet those needs in every different situation so let's start with a few rules of thumb you can keep in mind as you design to instantly make your designs more accessible keep in mind that there are a lot more different things to consider than just these items that i'm highlighting in this video so i'll have a section at the end showing where you can go to learn more about accessibility the first rule of thumb is about color contrast in simple terms color contrast is how different two colors are when you show one on top of another this can be as simple as text on top of an empty page or a white background or it can be more complex such as a button where there's text on top of a colored background or an image so on the screen we currently have two different values these values called wcag or wik double a and triple a wikag stands for web content accessibility guidelines which are essentially the accessibility guidelines that websites and other digital products follow on the internet the value 3 to 1 or 4.5 to 1 refers to

the contrast ratio between two different colors and you can get this from entering these values these color values either their hex codes or their rgb values into a contrast checker which i'll link to in the description box below so let's take a look at our first example this is an example of two colors that i would personally never use together but let's run with it so we have a green and an orange one is labeled the foreground color and the other one is labeled the background color it doesn't really matter much if you switch the two but you might want to consider the aesthetics of doing so on the bottom we have an example of a button labeled learn more with the two different colors if you run this through the contrast checker it spits out a ratio of one point nine five to one which is lower both than the wick hack double a ratio of three to one or the wick triple a ratio 4.5 to one so if you have any elements like this in your designs or your app you'll want to change up the colors so that they have higher contrast and are more visible to populations with low vision or other visual impairments so the second example is a color combination that works better a dark blue and a white this has higher color contrast and gives us a ratio of eight point five nine to one which is way above the wick hack double a and aaa requirements keep in mind that with any type of color palette that you're developing you'll want to balance the aesthetics as well as the accessibility you can definitely create brand colors or palettes that are both good looking and accessible so it doesn't need to be a trade-off the second rule of thumb is similar to the first try to always use multiple dimensions of information when communicating information a dimension here refers to different methods or ways of representing information color text size font the presence of an icon there are a lot of different ways to represent information so on the right we have two examples in the first example on the top from top to bottom we have three different ways of showing the status of something it could be a credit card payment or something else that just has different states like success or failure the one at the top is just an icon which doesn't really mean anything to certain populations in the second one which is a little better we have an icon and text that says success which is better and at the very bottom we have an icon text in color so three different dimensions of information which is the best of course in certain cultures especially in eastern countries the meaning of different colors might vary there might be different ways of representing information that are different than here in the u.s for example green is bad but otherwise a general rule of thumb is that this redundancy in signals or dimensions is good for helping people process information quicker and more efficiently the second example here shows how adding a simple underline to a link can make a huge difference in certain color blind populations the link here might not blend in so you want to make sure that someone can easily understand what can and cannot be clicked by adding a link or italicizing it or adding an icon the third rule of thumb is very similar to the second you always want to make sure that any form of media that you produce or share is accessible in an alternative form so for example if you're producing video you want to make sure that people who are blind are still able to understand what's going on on netflix and a lot of other popular video platforms you can actually add this thing called audio description which allows a blind person to understand what's going on in the video by having a computer or an audio track read out and describe what's happening on the screen if you're producing audio only content such as podcasts or interviews you'll want to make sure that you have transcripts associated or captions associated with your audio so that people who are deaf or hard of hearing can follow along if you want to learn how to do this quickly without having to sacrifice your time check out the link in the description box below titled 3play media which gets you started quickly and easily with audio description transcription captioning and other accessibility services the fourth rule of thumb is one that's definitely harder to grasp and will take more time to learn but really will help you in the long run if you want to stay in this industry for a lot of user populations that have disabilities there are other devices and technologies that allow a user to interact with a product or service using alternative means these are called assessive technologies according to microsoft one out of every 10 people uses some form of assistive technology the image on the screen shows someone using a refreshable braille display to read what's happening on the screen using their fingers other common assistive technologies include screen readers which rely on a computer to read out what's on the screen special keyboards and switches made specifically for performing common actions a lot easier as well as some pointing devices and eye gaze and head trackers which can be used for navigating elements on a screen there's a really great organization i recommend checking out called atia or assistive technology industry association if you're interested in learning more about this the last rule of thumb here is to make sure that all copy you write should be concise and descriptive this usually goes without saying but some common examples include making sure that any interactive elements such as buttons and links should be able to be understood without the context surrounding them so instead of having your button say click here make sure the text on the button properly describes the page that a user will be brought to or the action that will be performed once it's clicked in addition make sure that all the images that you have on your website or your app have good alt text which helps a user who is blind or who has low vision understand the context of the image without having to see it next let's talk about what it means to be an ally so on this page you'll see that the word ally is actually spelled with two ones and this is actually something that will be pretty common to see if you work in the accessibility industry is to see this word and know that it stands for the word accessibility it's a pneumonium which is shorthand for the word accessibility because there are 11 characters in the word accessibility which can sometimes be a long word and kind of hard to pronounce as well so how do you become an ally let's start by using the right language first of all when you're talking about other people with disabilities make sure that you're emphasizing their ability not their limitations so for example instead of focusing on the fact that someone has a wheelchair and can't walk you can instead emphasize their ability to paint or draw or act or perform some other type of art someone's disability should not be the main focus of talking about that person next you want to make sure that you're referring to others using person-first language person first language is when you refer to someone using the word person first as opposed to emphasizing their disability first so instead of calling someone a blind person you want to make sure that you're calling them a person with visual impairments or a person who is blind of course this kind of contradicts the next point which is about asking others to learn their language preferences the rule of thumb here is to use person first language but some other people might prefer that you call them other terms if they're comfortable with you or if they prefer a different way of referencing themselves they might tell you that they don't care regardless it's always good to check with the individual and lastly make sure that you try to use as much neutral language as possible you can start by avoiding euphemisms such as calling a person challenged or a victim or even differently abled of course you also need to avoid offensive language such as calling someone a or dumb all of these things perpetuate stereotypes and are not addressing the problem of accessibility directly so you might be asking how do i get involved in the accessibility space first of all you can join a lot of different communities there's some online and in-person communities that can help you meet other designers and developers as well as thought leaders in the space that advocate for building products and services that are accessible in addition there's a lot of communities on facebook and slack these micro communities that you can go into and sat and asked accessibility experts questions where people will happily help you and try to come up with the best solution for any type of problem or question related to accessibility that you have but google is also your friend as well next you can also attend events there are a lot of accessibility focused events and conferences that occur every year and very often the they highlight the new technologies and advances in the industry and allow you to meet others passionate about accessibility i'm going to highlight a few groups and communities as well as events and conferences that you can attend in the description box below so this leads me to my second to last slide which i'll talk about briefly and just refer to some of the great resources out there for you to learn from the web content accessibility guidelines should be your friend as a designer or developer this is considered the single point of truth for most of the content on the web and how you can make your website or app accessible secondly i've talked a lot about this company called 3play media full disclosure is that i currently work for 3play and there are a lot of really good companies in the space to learn a lot of free content from but on 3play we offer a lot of free content around how you can make your apps or website accessible and some of the rules and regulations that are up and coming in the industry in addition we offer a conference every year called access so in addition if you're looking for any type of accessibility partner if you're working for a company or if you're an indie creator and you just need captions or audio description for your videos throughplay media is one of the best places to go for that web accessibility in mind or webaim is a good page for learning a lot of the basics around what you need to do and what you shouldn't do as a designer developer there are a lot of other books in the space that i'll link to in the show notes below and some of my favorites include inclusive design patterns by hidden pickering and accessibility for everyone by laura kalbach i also want to call out accessibility rules or ally rules which is a podcast in the accessibility space which is super big and i definitely recommend checking it out and then lastly microsoft's inclusive design toolkit which i referenced earlier in this video there's a lot of great stuff in there just for learning more broadly about inclusive design and how you can get started in the field and some of the considerations that you should think about if you want to pursue a career in this industry so with that if you want to connect with me i am on linkedin i'm on facebook and i have my website the handoff.guide and if this video helped you out at all please subscribe to me because it really helps me out and motivates me to make even more videos for this community thanks for sticking around until the end and i'll see you in the next video

2021-01-08

Show video