Embed Size (px)
Citation preview
Multiple Selection Component for Accessible UI Lists
Cosmin Nicula@Axwayhttp://cosmi.nu
BucharestJS, June 2016
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!
