Creating a WCAG compliant multi-select
When creating any user interface component, it's important to take its accessibility, or WCAG compliance into account. By doing so, we can make sure that websites are fully accessible for everyone, including people with disabilities. Unfortunately, most solutions and packages out there lack accessibility, and improvements are often not on the priority list. We therefore rely on the WCAG, including during the creation of our multi-select module, which is now fully usable by everyone.
Key takeaways
- Accessibility and WCAG compliance are crucial when designing user interface components to ensure websites are fully accessible for people with disabilities.
- The Web Content Accessibility Guidelines (WCAG) provide technical guidelines for web developers to create websites that are perceivable, operable, understandable, and robust for everyone, including people with disabilities.
- Creating an accessible multi-select module involves using semantic HTML, adding keyboard navigation, and providing visual feedback, which makes the module usable for everyone.
What is WCAG and why is it important?
The World Wide Web Consortium (W3C), a global community that develops open standards to ensure the long-term growth of the web, has developed a set of technical guidelines known as Web Content Accessibility Guidelines (WCAG). The WCAG guides web developers to create perceivable, operable, understandable, and robust websites for people with various disabilities. Creating the multi-select module in three steps
Step 1: Use Semantic HTML
The first step in creating an accessible multi-select module is to use semantic HTML. This means using HTML tags that have meaning and purpose, such as ‘
For our multi-select module, we used a combination of ‘
Step 2: Add Keyboard Navigation
The second step is to add keyboard navigation. This means ensuring that users can navigate the module using their keyboard, without relying on a mouse or other pointing device. We added keyboard navigation to the dropdown menu of our multi-select module. Users can open and close the menu using the enter or spacebar keys and navigate the options using the up and down arrow keys. When an option is selected, the enter key can be used to add it to the selected options list.
Step 3: Provide Visual Feedback
The third and final step is to provide visual feedback, in other words, ensuring that users can see what is happening when interacting with the module, even if they can't see the screen. For our multi-select module, we added visual feedback to the dropdown menu. When the menu is open, we change the button's appearance to indicate it is active.
After following these steps, our multi-select module is now accessible to all users, including those with disabilities. You can find the full source code on GitHub.
More stories
