![Page 1: Multiple selection component for Accessible UI lists](https://reader036.vdocuments.us/reader036/viewer/2022062311/58ac120c1a28ab33178b5c4f/html5/thumbnails/1.jpg)
Multiple Selection Component for Accessible UI Lists
Cosmin Nicula@Axwayhttp://cosmi.nu
BucharestJS, June 2016
![Page 3: Multiple selection component for Accessible UI lists](https://reader036.vdocuments.us/reader036/viewer/2022062311/58ac120c1a28ab33178b5c4f/html5/thumbnails/3.jpg)
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
![Page 4: Multiple selection component for Accessible UI lists](https://reader036.vdocuments.us/reader036/viewer/2022062311/58ac120c1a28ab33178b5c4f/html5/thumbnails/4.jpg)
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
![Page 5: Multiple selection component for Accessible UI lists](https://reader036.vdocuments.us/reader036/viewer/2022062311/58ac120c1a28ab33178b5c4f/html5/thumbnails/5.jpg)
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
![Page 6: Multiple selection component for Accessible UI lists](https://reader036.vdocuments.us/reader036/viewer/2022062311/58ac120c1a28ab33178b5c4f/html5/thumbnails/6.jpg)
What exactly are UI lists?
Data is represented as one-dimensional arrays
![Page 7: Multiple selection component for Accessible UI lists](https://reader036.vdocuments.us/reader036/viewer/2022062311/58ac120c1a28ab33178b5c4f/html5/thumbnails/7.jpg)
Some more UI lists...
Data could be represented as two-dimensional arrays or recursive data structures than can be flattened to one-dimensional arrays
![Page 8: Multiple selection component for Accessible UI lists](https://reader036.vdocuments.us/reader036/viewer/2022062311/58ac120c1a28ab33178b5c4f/html5/thumbnails/8.jpg)
Multiple selection behavior (Mouse + Keyboard)
Selection range 1
Selection range 2
“Head” / “Pivot”
![Page 9: Multiple selection component for Accessible UI lists](https://reader036.vdocuments.us/reader036/viewer/2022062311/58ac120c1a28ab33178b5c4f/html5/thumbnails/9.jpg)
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+→
![Page 10: Multiple selection component for Accessible UI lists](https://reader036.vdocuments.us/reader036/viewer/2022062311/58ac120c1a28ab33178b5c4f/html5/thumbnails/10.jpg)
Multiple selection for Accessible UI lists ( Screen-reader)
![Page 11: Multiple selection component for Accessible UI lists](https://reader036.vdocuments.us/reader036/viewer/2022062311/58ac120c1a28ab33178b5c4f/html5/thumbnails/11.jpg)
What we’ve covered so far
1. UI list
2. Multiple selection behavior
3. Multiple selection for Accessible UI lists
4. Multiple Selection Component ...
![Page 12: Multiple selection component for Accessible UI lists](https://reader036.vdocuments.us/reader036/viewer/2022062311/58ac120c1a28ab33178b5c4f/html5/thumbnails/12.jpg)
Multiple selection behavior
Multiple Selection Component design
Rendering layer+
event handlers
This is the Multiple Selection Component
![Page 13: Multiple selection component for Accessible UI lists](https://reader036.vdocuments.us/reader036/viewer/2022062311/58ac120c1a28ab33178b5c4f/html5/thumbnails/13.jpg)
Let’s see it in action with React!
![Page 14: Multiple selection component for Accessible UI lists](https://reader036.vdocuments.us/reader036/viewer/2022062311/58ac120c1a28ab33178b5c4f/html5/thumbnails/14.jpg)
And why not, with Angular 2
![Page 15: Multiple selection component for Accessible UI lists](https://reader036.vdocuments.us/reader036/viewer/2022062311/58ac120c1a28ab33178b5c4f/html5/thumbnails/15.jpg)
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
![Page 16: Multiple selection component for Accessible UI lists](https://reader036.vdocuments.us/reader036/viewer/2022062311/58ac120c1a28ab33178b5c4f/html5/thumbnails/16.jpg)
Thank you!