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?

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:

• The 2013 Puerto Rico Mathematics Report
• The 2013 NAEP Vocabulary Report
• The 2014 U.S. History, Geography, and Civics Report

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.