< back to all blog posts

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.

Paper dolls holding hand in a circle

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.

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.

  1. Color contrast
  2. Alt text
  3. Writing in plain language
  4. Navigation – tab and reading order
  5. Heading levels
  6. 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:

  1. Semantic HTML – Even as a designer, it’s nice to know what HTML options there are. It makes collaborating with developers easier.
  2. 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.
  3. 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

Concise writing

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

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.