Global Accessibility Awareness Day 2022: Understanding how to design with everyone in mind

Learn the basic principles of accessibility design and how to start applying them today

We all have different needs, be they auditory, cognitive, psychological, medical, or a mix of them. But we’re all equal in our right to use and understand products. This is especially important in web design, though it can be applied to all digital touchpoints. In honor of Global Accessibility Awareness Day 2022, we’ll walk you through some common questions surrounding accessibility and give you actionable tips on how to make your products more accessible.

What is the purpose of accessibility?

The purpose of digital accessibility is to make sure that everyone can benefit from any online service. This can range from adding alt text to images so screen readers can scan visuals to checking the contrast ratio of different backgrounds.

In the words of Glucode’s UX/UI Designer Marianka Cilliers, “Your design is there to solve a user problem, and by not factoring in accessibility you are potentially missing the mark — because the problem is only being solved for a part of your audience.”

⚡ Want to learn about how Glucode designed an accessibility app for Sketch? Check out our full interview with Marianka.

What are the four principles of accessibility?

When we talk about accessibility, we’ll often use the term POUR. This is an acronym that stands for perceivable, operable, understandable and robust. You can think of these as four layers of understanding that need to happen in order for your end-user to truly grasp and benefit from the digital touchpoint you’ve created.

• Perceivable. Your user needs to be able to grasp the layout of the content and how you’ve presented it. Can their screen reader pick up on the fact that there’s a navigation bar at the top? Is the design easy to make out? This is a good place to think about color contrast, simplicity, and adaptability.
• Operable. Your user needs to be able to interact with your digital touchpoint. In the simplest of forms, it can be about how a button is big enough to be tapped on. In its more complex forms, it’s about whether users can complete tasks — such as filling out a form on your site or making a purchase through your app — using assistive technology. For example, you can navigate the Sketch homepage by using only your keyboard. There’s also a “Skip Navigation” button to help you reach your destination faster.

You can navigate through our homepage by pressing Tab.

• Understandable. The user should understand the interface and how to use it. This is a great place to think about how to make your digital touchpoint as intuitive as possible. Using a product or service shouldn’t be complicated. And, at the very least, it should be predictable. Make sure each page or screen is consistent with the rest.
• Robust. Your digital touchpoint — especially websites — should offer more than one form of accessibility. This way, your user will have the ability to choose between preferred accessibility tools so they can tailor their experience to better suit their needs.

⚡ Want to learn more on the subject? We recommend CUNY’s Accessibility Toolkit guide. Though it’s geared towards open educational resources, it has great information for anyone interested in making their products more accessible.

What are some examples of accessibility practices?

The great thing about accessibility is that, as long as we’re set on making our products and websites work for everyone, there’s always room to improve. Here are a few examples of how to make your product, design or website more accessible:

1. Use native fonts and default sizes to enable dynamic text scaling
2. Check the contrast ratio of your text on different backgrounds. A good ratio is 4.5:1
3. Simulate various forms of color blindness to ensure users can tell between different states
4. For iOS, ensure your tap states are at least 44px for anyone with mobility impairments
5. Ensure text labels accurately describe the functionality of a component.

Of course, we’re just scratching the surface with these five tips. We encourage you to read more on the subject and find use-case-friendly ways to make your project more accessible. Good places to start include the W3C Web Accessibility platform, Google and Apple ‘s accessibility guides — which can be particularly helpful depending on which operating system you’re designing for.

⚡ Need a hand with making your designs more accessible? Download Appibilities!

At the end of the day, accessibility is about making a genuine effort to connect with your users. It requires sitting down and really putting yourself in someone else’s shoes. And while there’s a lot of work involved, the payoff is worth it. Making your apps and websites accessible is not only contributing to the greater good — it also means you’ve created a better product than what you had before. A product that really speaks to the customer’s needs.

But when it comes to the importance of accessibility in design, it was Yana Gevorgyan who said it best. The creator of Cluse — a contrast checker plugin for Sketch — shared with us in an interview that, “It’s our moral responsibility as designers to create products that everyone can use, not just a subset of people. […] The majority of the world population is connected to the internet and depends on it for everyday tasks. Among them are people with varied backgrounds, ages and physical abilities. And while not all physical spaces are accessible to people with disabilities, there is no reason that websites should be the same way.”

Originally published at https://www.sketch.com and republished with permission.