Accessible Custom Select Dropdowns

In web development, creating custom select dropdowns is difficult. It requires a lot of resources to sufficiently design (annotating the interaction, etc) and develop (the Javascript is fairly complex and the ARIA isn’t easy) and then test. Additional requirements such as option groups and auto-suggest make it even more challenging and time-consuming, and usually frustrating.

Most often the result is not fully accessible; browser and assistive technology is inconsistent; and implementations vary across the web. This is why it’s always better to use native selects with HTML/web. (Native components is also a better choice for native apps as well.) Don’t forget that HTML selects can be styled with CSS; see these resources by RTD, Filament Group, and LugoLabs.

If you must implement a custom select dropdown, you will most like need to use the ARIA listbox rolecombobox role (which specifies a composite widget), and often a combination of those roles. The option role is also required and usually a few other ARIA attributes (for label, state, etc.).

Here are some great examples which will save many folks a lot of time!

screen shot of custom select; category dropdown and submit button

Digital Accessibility Jobs, June 2017

Wow, many opportunities in digital accessibility opening! (U.S.)

Follow me, @a11yJobs, and @LyndonDunbar on Twitter for more!

newspaper icon says jobs

Landmark web accessibility ruling in U.S.

On June 12, a Miami federal judge ruled that Winn-Dixie violated the Americans with Disabilities Act by failing to make its website accessible to blind and visually impaired users.

The lawsuit was filed by blind Florida resident Juan Carlos Gil who uses screen reader software to access websites. Winn-Dixie operates nearly 500 grocery stores in the southeast United States. Judge Robert Scola ruled that the Winn-Dixie website is a place of public accommodation because of its integration with its stores such as downloading coupons, ordering prescriptions, and finding store locations.

Winn Dixie logo

The court order states “the website must be accessible by individuals with disabilities who use computers, laptops, tablets, and smart phones,” and content from third party vendors must also be fully accessible.

The estimated cost of $250,000 to make the website accessible was not consider by the court as an undue burden and “pales in comparison to the $2 million Winn-Dixie spent in 2015 to open the website and the $7 million it spent in 2016 to remake the website for the Plenti program.”

This case is especially important because it’s an actual trial with a federal ruling, not a settlement, and thus sets a legal precedent.

Related:

Addendum:

Digital Accessibility Jobs, April 2017

All in U.S.:

Follow me and @a11yJobs on Twitter for more! Also props to @LyndonDunbar for tweeting some of these positions.

CSUN17 Review

Another successful CSUN Assistive Technology Conference has come and gone. Below is a curated list of slide decks, reviews, photos, and more. Also check out my CSUN17 preview.

Slides etc. from presentations

Feel free to cite more in the comments.

Workshops

Other reviews, etc.

More awesome stuff

WCAG 2.1 First public working draft. Also see Quick Guide to WCAG 2.1 First Public Working Draft by David MacDonald

By IBM Va11yS, or Verified Accessibility Samples, is a repository of live working code samples that designers and developers can easily access to test with different assistive technologies and tools.

OATMEAL – An accessibility testing methodology for the web, by eBay. Stands for Open Accessibility Testing Methods for Experts And Layfolk—nice!

Mind Your Lang by Adrian Roselli from role=drinks event.

Photos

Terry Thompson speaking on audio description at CSUN17
Terry Thompson speaking on audio description at CSUN17
Denis Boudreau fills the Deque Suite at CSUN17
Denis Boudreau fills the Deque Suite at CSUN17
Karaoke at CSUN17, Makoto and Matt lead C-S-U-N
Karaoke at CSUN17, Makoto and Matt lead C-S-U-N (to the tune of YMCA)

More from CSUN17 Flickr album by Dennis Lembree