Web Accessibility Cookbook

Chapter 10. Filtering Data

Online shops, marketplaces, real estate websites, and large blogs often have one thing in common: a lot of data the user can access. Working with large datasets can quickly become daunting and overwhelming. Filters allow users to narrow down results, making finding what they’re looking for easier. At the same time, they can also increase the complexity of your interface. When you create a filter form, it’s crucial to keep it as simple as possible so that users can apply their settings quickly and efficiently. No matter how people access the web, they must always know which filters are active and whether they’ve been applied.

10.1 Create a Form

Problem

When you present users with a list of hundreds or thousands of items, it can be difficult for them to find what they’re looking for. If the list contains interactive elements, navigating through it can become physically demanding for people who use an assistive technology like a switch device.

Solution

Allow users to filter out irrelevant results. Example 10-1 shows an exemplary filter in HTML.

Example 10-1. A filter form with various types of form elements

<form role="form" aria-label="Filter" id="filter">
  <label for="artist">Artist</label>
  <select id="artist" name="artist">
    <option value="">All</option>
    <option>AFI</option>
    <option>Absolute Beginner</option>
    <option>Akne Kid Joe</option>
    <option>Bad Religion</option>
    <option>Beastie Boys</option>
    <option>Bilderbuch</option>
    <option>Billy Joel</