Accessible Combobox Filters

The WorldSpace Assure web application by Deque Systems is built for QA testers and accessibility testers who want to perform full accessibility audits of websites. The application includes issue storage, with UI to allow users to view, filter, and sort all of the issues that have been logged against a given page or set of pages. We created a fully accessible combobox and filter system for the application so that users could more easily find the issues they were looking for.

Colleagues I worked with for this project: Harris Schneiderman, Aaron Pearlman, Dian Fay, Jacob Roman, Ian Kelly

Harris is also the primary architect behind Combobo, the open source version of the combobox widget.

The Old Filters

The old multi-select filters in WorldSpace Assure were problematic when there were more than 12 options.

Previously, filters for the issue tables were implemented as simple multi-select dropdowns. They worked well for a small amounts of data, but it was difficult to find specific options and know which options were selected when there were more than a dozen options. We decided to replace the multi-select filters with comboboxes and an “active filters” page area so that users could use the filters more easily and have a better sense of which filters were active at any given time.

Accessible Comboboxes

We estimated that about 15-20% of the user base for our products had some form of disability. Therefore, everything we designed and built, including Assure, had to be accessible. Comboboxes are not native HTML controls. There are many examples out there based on JavaScript or JQuery, but we were not able to find any examples that were accessible. Combobox controls are also complicated enough that we didn’t feel comfortable adapting an existing example. We decided the easiest way to guarantee accessibility was to build our combobox from scratch.

Designs and Iteration

Visual design for the WorldSpace Assure combobox

Aaron and I worked on designs in parallel. I worked on a visual design for the combobox that would match the aesthetic of WorldSpace Assure, while Aaron worked on designs that would fit in our pattern library, which had been started later. We both reviewed our designs with each other and with the rest of the team, and were able to make each other’s designs stronger as a result. Reviewing the designs with the developers on the team was particularly useful, as it helped us to understand the different states the combobox could be in.


Option filtering in Combobo, Harris’s open source combobox

While Aaron and I designed the combobox that we would use in our products, Harris built a working prototype, which is now open source. It was important to have a coded prototype so we could test it with a keyboard and with screen readers, which Harris spent a lot of time doing. By building it, we found things in the visual design that needed improvement and made decisions on interactions that we hadn’t thought of when designing on paper.

Usability Testing

Despite the thorough screen reader and keyboard testing that Harris and a few others put the prototype through, there were still some interactions we weren’t sure about. All of us on the team have good vision, so none of us need to use a screen reader on a regular basis. That means we couldn’t anticipate what an actual screen reader user would expect. I pulled in a few of our other coworkers – including a couple screen reader users – to do quick usability tests on our combobox. By observing and listening to them, we were able to pinpoint and fix some usability problems.

Implementation in the Product

The new filters and active filter “pills” in WorldSpace Assure

Once we were sure the prototype was stable, we started to replace the filters in WorldSpace Assure with comboboxes. The process took longer than expected – Harris had not used the same visual design for the prototype as we were designing for the product, since we were still working on the visual design when he started his work. We had to make a number of quick decisions on aspects of the visual design we had not accounted for, as well as on minor functionality changes that were necessary because of dependencies in the application that didn’t exist for the prototype. It was incredibly helpful that the entire team was co-located during this process – it made it much easier to ask questions and find answers quickly.

Thoughts on the Process

Overall, it took us months to design, develop and implement the new filters in Assure. If we all hadn’t taken the time to iterate on the design and the implementation as a team, and hadn’t taken the time to test it with actual users, we would’ve ended up with a much weaker pattern. I am thankful that I was co-located with all of my coworkers who worked on this pattern with me. I feel the communication between us would have been a lot slower otherwise.