multiple selection component for accessible ui lists

Multiple Selection Component for Accessible UI Lists

Cosmin Nicula@Axwayhttp://cosmi.nu

BucharestJS, June 2016

Accessibility matters

http://imgur.com/gallery/JqyazR6

What is web accessibility (a11y)?

“Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities*.”

*disabilities = sight impairment, blind, mobility impairments, deaf etc.

https://en.wikipedia.org/wiki/Web_accessibility

Why would I care for web a11y?

● 1 bn (20% of people in our society) disabled individuals world wide, largest

minority on the web

● 220 bn $ discretionary spending power only in US

● imposed by laws in certain countries (Section 508 in US - any federal

government website must be accessible)

● not only financial issue, but also moral issue for ensuring an equitable

information platform

● solving a11y issues often implies solving UX issues

Three easy steps to approach web a11y in software development

1. Think a11y right from the start of the project

2. Discover the a11y requirements for each and every piece of your application

by reading the official documentation W3C Web Accessibility Initiative

3. Quickly test your web application by trying to access your website with

keyboard only

What exactly are UI lists?

Data is represented as one-dimensional arrays

Some more UI lists...

Data could be represented as two-dimensional arrays or recursive data structures than can be flattened to one-dimensional arrays

Multiple selection behavior (Mouse + Keyboard)

Selection range 1

Selection range 2

“Head” / “Pivot”

Multiple selection for Accessible UI lists ( Keyboard-only)

Behavior Shortcut Behavior Shortcut

Select down item j or ↓ Extend selection left Shift+←

Select up item k or ↑ Move down without changing selection ↓⌘

Select right item l or → Move up without changing selection ↑⌘

Select left item h or ← Move right without changing selection →⌘

Select/unselect item Ctrl+Space or x or x⌘ Move left without changing selection ←⌘

Extend selection down Shift+↓ Select all visible items ⌘a or Shift+a

Extend selection up Shift+↑ Clear all selections Shift+n

Extend selection right Shift+→

Multiple selection for Accessible UI lists ( Screen-reader)

What we’ve covered so far

1. UI list

2. Multiple selection behavior

3. Multiple selection for Accessible UI lists

4. Multiple Selection Component ...

Multiple selection behavior

Multiple Selection Component design

Rendering layer+

event handlers

This is the Multiple Selection Component

Let’s see it in action with React!

And why not, with Angular 2

Takeaways

● Accessibility is important and challenging. Don’t neglect it!

● Keyboard behaviors can be abstracted as reusable components

● Try to write your code as much as framework-agnostic as possible.

Complexity is our biggest enemy

Thank you!