An easy way to learn accessibility
Many of us understand the importance of accessibility. We want accessibility built in, so everyone can accomplish what they need to. But when it comes to learning about accessibility, it often feels intimidating, complicated, and even impossible! It seems like there are a lot of rules to know, and feels like it isn’t going to be very forgiving!
You’ll be geeking out about accessibility with your friends in no time!
This article will walk you through an easy way to approach accessibility if you’re a designer (or even designer-adjacent). We’ll go through a foundational way of thinking about accessibility, some tips on where to start next, and some good resources for deeper dives. You’ll be geeking out about accessibility with your friends in no time!
Think of accessibility holistically
When people think of accessibility, they often think of the tool they need to use, a Web Content Accessibility Guidelines (WCAG) they need to comply with, or other specific details. While that’s important, when you’re learning about accessibility, think of the experience you want your users to have as they use your site or product. This will give you a foundation to refer back to later when you need to figure out some of those implementation details.
Starting with the implementation details first can feel overwhelming, especially when you’re not sure how they lead to the overall picture. Implementation details also change as technology improves and features organically become more accessible.
Think of accessibility as usability
When thinking about user experience and usability at its most basic level, what is it? It’s the experience provided for users to navigate or comprehend something. For example, if you’re buying a shirt, you need to navigate through the site, find the shirt, and complete the purchase. As you’re making your purchase, you need to comprehend or understand details of the shirt, which size you’re ordering, and how much shipping costs.
Being able to navigate and comprehend a user interface to accomplish a task might come easy to you through conventional methods. But if you have a disability, you might not be able to accomplish tasks in the same way. Instead, you might need assistive technology or alternative methods, and that’s where accessible design comes into play.
Accessibility provides a means of allowing people with disabilities or impairments to accomplish the same tasks either through alternative means or assistive technology designed to make things easier. Think of alternative means as other options – for example, using a mouse only or using a keyboard only to accomplish the same task. Assistive technologies (also referred to as “AT”) are tools that help people use a computer. For example, a joystick mouse or a screen reader. (A screen reader is an application that reads text and other elements on the screen to a user. This is commonly used by people with visual impairments.)
What kinds of disabilities and impairments does accessibility address?
There is a wide range of disabilities and impairments, but for the purposes of digital accessibility, they can be summarized into these main groups:
- Vision – for example, color blindness, partial vision loss, and complete blindness
- Hearing – this can include full hearing loss or partial deafness
- Motor skills – some examples are arthritis or missing limbs
- Cognition – this includes traumatic brain injury or neurodiversity (e.g., dyslexia)
Not all disabilities or impairments are permanent. Non-permanent ones can be situational or temporary. For example, a situational impairment is when you’re outside trying to use your phone, but the sun is too bright. An example of a temporary disability is if you broke your wrist skateboarding and now you can’t use a mouse until it heals.
It’s also worth noting that not all people experience disabilities the same way. For example, two people could have the same disability, but how they surf the web could be different (e.g., one uses a joystick mouse and the other only uses a keyboard.). People can have multiple disabilities, too. Despite the range of disabilities, we can still design solutions that holistically help.
Designing for Accessibility
When we include accessibility into our designs, it means we’re ensuring that users can successfully navigate and comprehend to complete their tasks in the user interface. There are two ways to approach this.
The first way, leans heavier on design input, where designers create the experience. For example, we would design the order of steps that someone navigates through a task. (As designers, we do this already!) Or in other cases, we identify multiple options for someone to navigate through a form (e.g., via mouse or via keyboard only).
The second way, leans heavier on the technical implementation, where developers code designs so they’re accessible. As technology has evolved, there are more built-in code solutions to make products more accessible. Typically, these solutions help AT interpret things better. The AT can then do a better job providing information to the user. For example, we can code the site to have proper heading levels. This way, a screen reader can extract a table of contents and that allows users to quickly scan the page.
Let’s talk about how we might navigate and comprehend when we have different disabilities and impairments. We’ll keep things high level with some general solutions.
How might we navigate with an impairment?
For users navigating with an impairment or disability, we want to make sure they can get to the same areas to accomplish their tasks.
Navigating with visual impairments
Blind or partially-sighted users might use a screen reader and keyboard to navigate. The screen reader reads items on the screen such as text. It’ll also call out items like buttons, links, images, and text formatting such as bulleted lists. So elements that are typically identified by visual cues by sighted users are verbally described by the screen reader.
Navigating with motor skill impairments
If someone has motor skill impairments, they might only use a keyboard to navigate or use a special mouse. In some cases, solutions, like providing keyboard-only navigation, can help solve for more than one impairment.
Navigating with cognitive impairments
With cognitive impairments, some people might rely on visual cues or elements, such as headings or color, to navigate.
How might we comprehend information with an impairment?
For comprehension, we want to ensure everyone is getting the relevant information they need to accomplish their tasks.
Comprehension with visual impairments
For images or visual elements like charts and graphs, we provide alternative text (or “alt text”) or long descriptions that screen readers can read to them. Designers will typically describe an image in a succinct way so users have the right level of detail.
Coding elements with the proper semantics and labels is vital for ensuring screen readers are informing users accurately. For a more technical example, a table can be coded to help the screen reader relay how many rows and columns there are, what the header is for each column, and the context of each cell.
Comprehension with color blindness
People with color blindness benefit from visual elements that have high color contrast. This helps distinguish the words on buttons, icons, the different states of an element (e.g., selected or disabled), and so on. High color contrast also helps us as we age and can’t distinguish color differences as easily.
Comprehension with hearing impairments
For hearing impaired users, they might use captioned text when watching videos or participating in video calls or webinars.
Comprehension overall
There are a broad range of cognitive impairments and there are some common ways to address comprehension. The simplest approach is writing in plain language. Plain language is concise, leverages formatting, and avoids jargon. Rather than writing paragraphs of text, we can use headings, bullets, and shorter sentences.
What to learn next
Now that you have a high-level understanding that accessibility is about providing ways to navigate and comprehend, what should you learn next? Great question! Based on experience teaching, we recommend a progression of how people use AT, a set of basic topics, and a set of more advance topics for when you’re ready.
How people use AT
Here are a few videos on how people use assistive technology. This will help give you a sense of why accessibility is so important, too.
- Apple – Accessibility – Sady (<2 min) – Same video but with video descriptions (<2 min)
- Screen Reader Demo (<5 min)
- Blind Movie Critic – how blind people use Instagram (~2 min)
- Xbox Adaptive Controller (<3 min)
- AT examples with Amazon Echo (1 min)
Try searching YouTube for other examples of how others use different AT. Let us know if you have a great video people would benefit from and we’ll add it!
Basics
The basics include some foundational areas of accessible design, as well as some easy wins. Take your time as you learn more about these topics.
- Color contrast
- Alt text
- Writing in plain language
- Navigation – tab and reading order
- Heading levels
- Trying out assistive technology! This can be fun. Before you start, make sure you note how to turn off the AT!! On your computer or smartphone, you can try the accessibility settings for motor skills, visual elements, screen readers, screen magnifiers, and more.
Advanced
Once you’ve learned the basics of accessible design, there’s a lot more to uncover. Here are the more advanced topics to dive into:
- Semantic HTML – Even as a designer, it’s nice to know what HTML options there are. It makes collaborating with developers easier.
- ARIA attributes – similar to Semantic HTML, understanding what ARIA attributes you can leverage is great. As a designer, you don’t need to know how to implement them, you just need to know they exist and how they might be used.
- Web Content Accessibility Guidelines (WCAG) – these are the official guidelines for accessibility. They mostly provide guidelines around how something is deemed accessible, rather than provide a specific solution. There are a few explicit rules such as color contrast ratios. Reading these can be intimidating.
Additional resources
If you’re ready to learn more, there are several awesome resources out there. Here are some of our favorites. If you have a resource to recommend, please let us know!
Color contrast
- Colour Contrast Analyser – free standalone tool for Mac OS or Windows
- Stark plugin – for Figma, Adobe XD, and Sketch
- Material Design Color Tool – as you make your theme in Material, you can double check the colors are accessible
Concise writing
- The Hemingway app – helps you write more concise sentences
- Grammarly – also helps you write more concisely, corrects grammar, and more
- Plainlanguage.gov – great examples and tips on writing in plain language
Classes/conferences
- Understanding UX/UI Design for Accessibility (SkillShare) – Michelle made this a few years ago. This covers things at a basic level so things still hold up even if technology changes.
- Smashing Mag offers workshops from time to time – they can vary from more design/usability focused to more technical
- Axecon – a free, virtual conference hosted by Deque Systems. This conference has developer, designer, and organization-targeted talks. The topics range from beginner to advanced level content.
Books
- Giving a Damn About Accessibility by Sherry Byrne-Haber (UX Collective) – Free! This book is a very quick read and is a manifesto around why everyone should care about accessibility. There’s an audiobook that’s 47 minutes long.
- A Web for Everyone by Sarah Horton and Whitney Quesenberry (Rosenfeld Media)
- Demystifying Disability: What to Know, What to Say, and How to be an Ally by Emily Ladau – This book is a gem! While not specific to digital accessibility, it provides context around disabilities, the history, and etiquette, which is really helpful in being more understanding.
Accessibility checkers
- WAVE Web Accessibility Evaluation Tool – This only identifies specific items that need to be changed and doesn’t consider the holistic experience. This is why we recommend designing for accessibility first, then using this as a gut check to ensure you have your bases covered.
Did we leave anything out? Did you have additional questions? Reach out to us on our zheroes Slack community. We’d love to hear from you!
Be good to yourself
Designers want to do right by their users – it’s why we’re in this field. When it comes to accessibility, we often put a lot of pressure on ourselves. For example, you might think, “This has to be right so people who need accessibility can be successful.”
While this is our end goal, remember any time we’re learning something new, it’s not expected that we’re experts right away. So as you’re learning, take it slow, and start to build your accessible design expertise over time.