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.
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.
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. 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.
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 accessibility 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.
We want every app and website built with Web Awesome to be inclusive, and we know that starts with us.
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.
- 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.
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.
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.
