4.3. Components collection
Introduction
So far, you've learned that creating accessible websites isn't as hard as it sounds. Most of the UI can be fully accessible through native HTML elements and a couple of ARIA attributes.
The modern web experiences have been evolving way faster than the languages available (HTML). We don't have yet a <tooltip>, <modal> or <tabs> native elements, so we need to find our way around with the existing tools. I'll be truly honest with you: building custom components fully accessible is harder than it looks like.
Because of that, when I need to implement a new component that doesn't exist as an HTML element, I use existing components from the community instead of reinventing the wheel and risking creating a non-accessible experience.
I recommend you to do the same. Here's a personal accurated list of common UI patterns:
Libraries
- Accessible components - Plain HTML / JS, no library required.
- Reach UI - A headless accessible foundation of your React-based design system.
- React ARIA - A library of React hooks that provides accessible UI primitives for your design system.
- Awesome Vue.JS A1YY - List of things related to A11Y in Vue.js.
Solo Components
Before you use an "accessible package" from the community, don't get sold by "self-claimed" accessible components . Do your own research and aim to know their reality before you include their code in your codebase.
Modals (Dialogs)
- Package: a11y-dialog
- Blog post: Differences between modals implementations
Tooltips
- Package: tippyjs and tippyjs react
- Blog post: Inclusive tooltips
- Blog post: Tooltips in WCAG 21
Menus
- Blog post: Inclusive Menus & Menu Buttons
Tabs
- Blog post: Building a Tabs component
Selects (Dropdowns)
- Blog post: Select your poison
- Blog post: Under-engineered select menus
- Blog post: Striking a balance between native and custom select
- Blog post: Dropdown alternatives
Clickable cards
Accordion
- Tutorial: WAI ARIA Practices