Blog

Announcing Selectability.js: Style-able, Accessible Select Fields

Alex Ford

Technical Director, Forum One

Imagine that you are in a twisty little maze of different dropdown widgets. In addition to HTML’s own <select> element, there are others that add functionality such as rich autocompletion, template styling, and other whiz-bang features. Few address accessibility, and those that do, fail to do so completely. The public cried out for a widget that was both accessible and themable.

A history

As I just mentioned, Selectability was built as the result of evaluating a number of dropdown widgets for accessibility and amenability for styling. Our designs for the National Assessment of Educational Progress (NAEP) reports placed a dropdown widget front and center, and it needed to look good. However, neither Chosen nor Select2 (only version 3.5 was available at the time) were able to meet our needs.

The development of Selectability.js commenced in partnership with the Educational Testing Service and the National Center for Education Statistics, whose 508 reviewers helped refine the widget’s behavior. Development was funded by U.S. Department of Education through our relationship with NAEP.

What is it?

NAEP

Selectability.js helps you create single-select dropdowns that can be styled in CSS, and can still be understood by machines. That means complete 508 compliance, and total readability by search engines.

As it turns out, creating an accessible widget that acts natively across platforms is quite difficult. Luckily, WAI-ARIA defines a combobox role, which I implemented after doing a great deal of research on how, for example, OS X and Windows advertise <select> to their users.

We’ve been using Selectability.js on several sites we built for The Nation’s Report Card, and so far it has passed three government 508 compliance reviews! That means it’s battle hardened and ready for widespread use. See it in action on these reports:

Where can I find it?

The source is hosted on GitHub, and you can install it via Bower.

Selectability.js was made possible with government funding. 

Written By

Alex Ford

Technical Director, Forum One