Lindsay MillerAccessibility isn’t just a buzzword; it’s a necessity. In today’s digital world, ensuring everyone can use your products is crucial not just because of a bottom line, but so folks of all abilities have an opportunity to interact with your product. In fact, accessibility in design systems is so important that the DOJ has ruled that websites of public programs and services must be accessible to people with disabilities.
That’s right — ADA website compliance now extends to digital platforms, not just physical spaces.
And with more goods and services going exclusively online (especially post-2020), digital accessibility isn’t just helpful — it’s essential.
So, let’s dive into why accessibility is a cornerstone of great design systems and how you can make sure yours is up to snuff.
🎙️ Want the full scoop on building accessible websites?
Don’t miss our convo with Lindsay on Podcast Awesome. Learn why accessibility isn’t just a compliance checkbox — but a cornerstone of great design.
The challenges of accessibility in design systems
Think about it: How often do you move through a site using only your keyboard? Or without your monitor? For many, that’s the norm. Web accessibility means ensuring that your entire site is usable for everyone, regardless of their abilities or the tools they use to navigate the web. If it isn’t built with accessibility in mind, your site is sort of like a sidewalk without curb ramps — not cool.
Here’s the thing: we can’t assume that every user is going to experience the web in the same way. A sidewalk without curb ramps might work perfectly well for unencumbered walking. But, having to hoist a stroller over the curb makes the sidewalk much harder to use. And how about using the sidewalk with a wheelchair? That’s likely impossible.
And just like sidewalks themselves are accessibility features we often take for granted, accessible websites ensure no one gets left out—whether they’re pushing a stroller, using a screen reader, or navigating via keyboard.
Accessibility is, at its core, about empathy in design. It’s not just about permanent disabilities — it includes temporary and situational limitations too. Imagine trying to navigate a site while holding a squirmy toddler, recovering from a wrist injury, or dealing with screen glare from a sunny café window. Inclusive web design ensures that everyone, in any situation, can access the content they need.
Design bias can sneak in when designers create experiences that look beautiful but sacrifice usability. If a visually sleek site isn’t readable or navigable, it’s not functional. Accessibility and visual appeal aren’t at odds — they’re both essential parts of good design.
Users come to our products with a variety of abilities, devices, and assistive technologies, so there’s a lot to consider to make sure that any user who comes along can use what you have to offer. Take the humble checkbox, for example. It seems simple enough, right? But there are a ton of accessibility features that make checkboxes usable — color contrast, keyboard controls, programmatic labels and states, visible focus indicators, and more.
Standard HTML elements have that accessibility built-in. But, as design system developers, we take that responsibility upon ourselves when we build components.
Accessibility in design systems (in Web Awesome)
At Web Awesome, we make accessibility a priority at every stage from design through development. Each component is built with WCAG guidelines in mind, and we make our best efforts to ensure that you’ll have a smooth, intuitive experience whether you’re using a mouse, a keyboard, or a screen reader.
That’s the power of building on the web’s native foundation. We’re using standard HTML, enhancing it with accessible Web Components, and vetting our patterns for usability, clarity, and compliance.
We want every app and website built with Web Awesome to be inclusive, and we know that starts with us.
Web Awesome Pro includes pre-vetted patterns—combinations of components and HTML structures—that meet accessibility standards right out of the gate. These include best practices for keyboard operability, screen reader compatibility, and visible focus states.
Case Study: The Date Picker component
The complexity of a simple control
Ah, the date picker. So much is packed into such a tiny control. Ensuring that users can navigate it easily with a keyboard, understand where they are with a screen reader, and select dates without any hiccups is no small feat. But we’re working hard to make that happen.
Keyboard navigation challenges
One thing we often take for granted is how easy it is to move your mouse from one interactive item to another, bypassing any number of items in between. However, if you’re navigating with a keyboard, you’re typically locked into moving sequentially from one item to the next. Using a mouse, for example, you can change the selected date in a date picker from the 1st to the 31st in one fell swoop. But using a keyboard, pressing a key 30 times to accomplish the same task is needlessly cumbersome.
Innovative solutions: roving tabindex and keyboard shortcuts
Techniques like roving tabindex allow us to treat the entire grid of dates in a month as a single tab stop, making it easy to move past all dates to, say, a ‘Close’ button or a control to change months. But that doesn’t solve the need for efficiency within the grid itself. For this, we need to do a bit more to support a number of different keyboard shortcuts — allowing the Up or Down arrows to move between weeks, Home and End to move to the beginning or end of the current week, etc. — all of which help get to the date you need in fewer keystrokes.
Addressing screen reader challenges
Similarly, sighted folks may take for granted the recognizable shape that words and their abbreviations have. When we see “Su” in the context of a date picker, we likely recognize this as an abbreviation for Sunday. But, for folks who rely on screen readers, hearing “S – U,” “Sue,” or some other interpretation may not be as recognizable.
A Multi-Benefit solution
One thing we can do is wrap the abbreviations in elements with title attributes containing the full name of the day. Sighted users will see the abbreviation, and screen reader users will hear the full name. Win-win! And, as a bonus, this technique also supports varied cognitive abilities: when mousing over the abbreviation, the corresponding title appears as a tooltip. Win-win-win!
The Bigger Picture
These are just a few examples of the accessibility considerations we tackle when developing components like the Date Picker. As you can see, creating truly accessible components requires thoughtful design and implementation. But don’t worry – you don’t have to reinvent the wheel every time. Let’s look at some best practices that can guide you in making your design system more accessible across the board.
And good news — Web Awesome Pro includes accessibility-tested patterns so you can drop in entire chunks of UI that are already vetted against WCAG compliance checklists.
- Look beyond the look: Visual cues are crucial for sighted users to efficiently manage tasks on a site. Think about how you can afford the same efficiency to users who are visually impaired.
- Use ARIA wisely: Using ARIA is crucial when you’re building components from scratch, so get familiar! But, beware: bad ARIA could lead non-sighted users astray. We recommend reading why no ARIA can be better than bad ARIA.
- Test, test, test: Learn how to navigate the web with a keyboard. Practice using a screen reader. Get used to the tools that folks might be using when they visit your site. But best of all, test with real users whenever possible.
- Keep learning: There’s a ton to learn about accessibility, and the rules evolve. Remember that nobody gets everything 100% right 100% of the time, but growing your knowledge of accessibility and incorporating it into your development process helps us get closer to an inclusive web.
Looking to brush up on accessibility? Bookmark these tools to improve your accessibility toolkit:
- WebAIM – great for contrast checking and screen reader data
- The A11Y Project – community-powered accessibility guidance
- WAI-ARIA Authoring Practices – vital for custom component building
- Axe by Deque + Google Lighthouse – automated audits that surface common accessibility issues
Conclusion
Accessibility isn’t an afterthought; it’s a core part of design. By prioritizing it in your design system, you’re not only creating better products but also making the web a more inclusive place. So let’s roll up our sleeves and build things everyone can use.
And remember: accessibility helps everyone, not just those with permanent disabilities. Temporary and situational impairments — like bright screen glare, hand injuries, or even aging—mean accessibility is for all of us.
Pst! Did you know the easiest way to support accessible Font Awesome icons is by using the Auto-Accessibility feature included in our web software? Check out our docs page for more info.
