If you spend any time on the internet, you’ve probably encountered a website that is impossible to use. Maybe it has gigantic buttons or barely any text at all. We’ve been thinking about creating accessible, high-fidelity design at scale, and we have some ideas.
Though most of us are often ignorant, we build the products and frameworks powering our digital world. The seemingly routine tasks that drive our day-to-day work on these products can profoundly impact the design and implementation of accessibility technologies. Yet, they frequently go under-addressed or are designed as an afterthought. In this blog post, we will shed some light on some accessibility design at scale principles we can follow while architecting our systems and applying them at scale.
What Is Accessibility Design at Scale?
The simple answer is that it’s the practice of designing anything, from the smallest webpage to a massive enterprise software suite, so that it’s easy for everyone to access and use, no matter how they use it.
But what does that mean? It means that we’re not just thinking about the people who can use our products; we’re also thinking about those who might have trouble using them. We’re thinking about how hard it is for someone with low vision to read a website or how hard it is for someone with a motor impairment to click on a form button.
And we’re doing all this in real-time: as we build out our code and accessible design for users with disabilities, asking them questions about their experiences, and listening carefully to what they tell us. It’s not just about making things accessible; it’s also about making sure they work well enough so that even if someone has an impairment that makes using your product difficult, they’ll still be able to make progress.
Why Is Accessibility Important in Design?
Accessibility design is a process that ensures that people with disabilities can use your product. It’s not just about making sure everyone can use your product; it’s about making sure everyone can use it to its full potential, no matter what.
Why is it important in design? Because the world is more diverse than you may realize. More than 10% of Americans have disabilities; that’s over 56 million people! That number includes people who are deaf or hearing-impaired, blind or have low vision, who have learning disabilities, who have mobility issues like cerebral palsy, Parkinson’s disease, arthritis, or spinal cord injury, and more.
Tips to Scale and Build an Accessible Design System
When it comes to accessibility, it’s easy to get overwhelmed. There are so many requirements and standards that need to be met, and it can seem like there’s no way you’ll be able to keep up with them all. One of the most common questions from teams looking to build an accessible design system is: “How do I scale this?”
The answer, of course, is that it depends on your team and your needs, but there are some general guidelines we’ve found helpful when working with teams who want to ensure accessibility design at scale.
Here are some tips for building and scaling an accessible design system:
- Disconnect Your Mouse and Use Your Keyboard to Navigate
- Support Assistive Devices and Conduct Tests With Actual Users
- Utilize the Operating System’s Guidelines for Accessibility Design at Scale
- Make Good Alt Tags
- Pay Attention to the Contrast
- Use Proper States to Indicate Active vs. Inactive
- Use Heading Tags and Hierarchy in Your Typography
- Layouts Should Be Consistent and Clear
- Start Small
- Use Checklists
- Use Icons Instead of Texts
The first thing you should do when building out your accessibility system is disconnected your mouse and use your keyboard to navigate. This will help you see if there are any problems with the site being navigable by the keyboard alone. If there are issues, make sure they get fixed before implementing any other changes to your system.
Tip 2: Support Assistive Devices and Conduct Tests With Actual Users
One of the most prominent challenges organizations face when building an accessible design system is scaling. You can do many things to build a scalable and inclusive design system, such as supporting assistive devices.
Use ARIA attributes to provide information about your controls (e.g., “role” and “aria-label”), make sure there is sufficient contrast between text and background colors, and use appropriate alt text for images. And don’t forget to conduct tests with actual users. This will help you identify potential design issues that might not have been picked up by automated accessibility design at scale testing tools.
Tip 3: Utilize the Operating System’s Guidelines for Accessibility
To build an accessible design system, you should utilize the operating system’s guidelines for accessibility. The guidelines are a good starting point because they provide a high-level overview of what you should do regarding accessibility design at scale.
You can also use the guidelines as a reference point to check your designs against them and ensure they align with the standards. You can also use them to communicate with stakeholders or clients who might not have any knowledge of accessibility design at scale.
Make sure all your alt tags are good. If you’re trying to create an accessible design system, every image must have a descriptive alt tag. Don’t just stick “image” or “photo” in there; describe what the image is, what it represents, and what the user should expect to see when they visit your site.
The second thing is to ensure your design system is modular and reusable. This is key for accessibility because it allows easy customization across different media types (visual and auditory) and devices (desktop vs. mobile).
Tip 5: Pay Attention to Contrast
When designing for accessibility, one of the most important things you can do is pay attention to contrast. This means that if you’re using a light color on a dark background, or vice versa, you have to ensure that the contrast between those two colors is high enough so that people with low vision can still see them.
While many designers like to use rulers or other tools when designing layouts, this isn’t always possible when working on something at scale, but it’s essential! Try looking at your layout from different angles and distances (even if it’s just moving your chair back from your computer) to see how it will look when someone who uses ZoomText or VoiceOver navigates through it.
Tip 6: Use Proper States to Indicate Active vs. Inactive
Another thing we recommend is to use appropriate states to indicate active vs. inactive. For example, a button has a different look when it’s active than when it’s inactive; you can use color, shape changes, or both. These are great things to have in place, even if you’re building a small website or app.
But when you’re scaling up, they become even more critical because they allow users with low vision (who may not be able to see text at all) or no vision at all (who may not be able to see anything) to navigate through your content without having to rely on other forms of interaction like sound or touch alone.
When you’re building a design system, it’s easy to get caught up in the details of individual components. You might spend hours creating an icon that perfectly represents your company’s mission or spend days tweaking the exact shade of blue that makes your brand shine. But what happens when someone wants to change your brand’s color scheme? What if they want to change the font? What if they want to go from serif to sans-serif?
These things can be done quickly with a well-designed typography system and can be done without breaking everything else in the process. So, using heading tags and hierarchy in your typography is essential.
Tip 8: Layouts Should Be Consistent and Clear
You should aim for consistency in your layout. This is crucial for the UX and accessibility of the site. Having different ways to navigate the site can confuse users trying to figure out how to get from one page to another. It is essential to understand the accessibility UX design principles. Make sure your navigation is clearly labeled so people can easily understand what each link does.
Another important thing is color consistency throughout your website or app. This will keep users from being confused by different colors on each page or screen within your system. For example, if one page has blue text while another has red text, it could confuse those who are visually impaired or colorblind.
Tip 9: Start Small
Don’t try to build your entire website at once. Instead, focus on one page or feature until you’re confident you’ve got the hang of it. Start small, but do start.
Tip 10: Use Checklists
Checklists can help ensure you don’t miss anything important when designing a new page or feature. They also make it easy for others on your team (like developers) to get involved without understanding all the technical details behind accessibility design at scale. Checklists are great because they give everyone something concrete they can do instead of telling themselves, “I will be more inclusive” (which is hard).
Tip 11: Use Icons Instead of Texts
Another thing we recommend is using icons instead of text whenever possible when designing for accessibility and for overall usability purposes; icons are much quicker for users than reading through paragraphs of text, so this will help them move through your site faster.
Online Resources for Learning About Inclusive Design and Accessibility
There are a lot of resources for learning about accessibility design at scale online. Here are some of our favorites:
- Accessibility for Web Design Lynda.com Course
- W3C Web Content Accessibility Guidelines 2.1
- A11y Project
1) Accessibility for Web Design Lynda.com Course
This online course by Lynda.com is a great place to start. It covers the basics of accessibility design at scale and some of the more complex issues related to it, like designing for people with dyslexia and color blindness, as well as people with trouble hearing or seeing. The video lessons also provide examples of accessible websites to see what good looks like.
Many of us have been here before: you’re working on a project and suddenly realize that you need to be more inclusive. But where do you start?
The place to look is webAIM.org, which has an incredible database of resources for learning about accessibility design at scale. Their Learning Center is a great place to start if you want to learn about how accessibility works, but if you’re looking for more specific information about making your site more accessible, check out their Topic Guides.
3) WC Web Content Accessibility Guidelines 2.1
This is an excellent resource for anyone who wants to learn more about accessible design and how to implement it in their projects. It’s also a fantastic starting point if you want to create an accessible website or app from scratch (which we highly recommend). W3C web content accessibility guidelines 2.1 covers everything from color contrast to keyboard shortcuts, so there’s something in here for everyone.
4) A11y Project
A11y Project is a site that explains how to build an accessible website in plain language. Their approach is very hands-on: they tell you exactly what steps to take and why each step matters. They also provide links to helpful tutorials and tools throughout their site!
Accessibility Design Audit
You may ask yourself, “what does an audit look like?”.
An accessibility design at scale audit is a way of checking whether your website meets specific standards for being accessible. It’s a really useful exercise because it helps you identify any issues or problems preventing users from accessing your site in a way that works for them.
Before you Google “How do I do one?”, let us explain it.
There are many great tools for doing audits; you can use either a browser extension or an online tool like WAVE (Web Accessibility Evaluation) or WebAIM (Web Accessibility In Mind). Both of these tools will give you an idea of what needs fixing on your site and highlight any areas where there may be requirements for anything that needs fixing.
Up to this point, we’ve primarily focused on how individual designers can improve the accessibility of their web design creations. In other words, designers can be the key to making a particular website more accessible, but what about the chances of a large company improving its general web design practices?
Overall, accessibility design is not a concept that should be feared. Instead, it opens the door to many new possibilities and opportunities to create unique user experiences.
Which of the Four Accessibility Types Are There?
There are four different categories of accessibility, which are categorized according to the POUR principle, which states that content must be perceivable, operable, understandable, and robust (POUR).
Why Is a Good Design One That Is Accessible?
The curb-cut effect is among the main reasons accessibility provides advantages beyond enabling individuals with disabilities to utilize commercial products. The curb-cut effect describes how designs intended to help those with impairments frequently end up helping a much greater user population.