Inclusive UI development tips & tricks

How to establish an inclusivity development baseline for accessible UI interfaces.
@ Our Digital Experience

Transcript

1. Inclusive UI development tips & tricks Marco Solazzi - @dwightjack Our Digital Experience 2016
2. About me - Senior Front-end @ AQuest - Co-founder Frontenders Verona
3. Accessibility
4. “ … enabling as many people as possible to use Web sites, even when those people's abilities are limited in some way. ” Accessibility - https://developer.mozilla.org/en-US/docs/Web/Accessibility
5. “ … enabling as many people as possible to use Web sites, even when those people's abilities are limited in some way. ” Accessibility - https://developer.mozilla.org/en-US/docs/Web/Accessibility
6. Inclusive Development
7. If you follow best practices you’re already providing accessibility
8. + vision impairments + limited fine motor control + cognitive disabilities + hearing impairments + older people (ourselves tomorrow) For whom?
9. + keyboard users + game / remote control users + users “in the wild” + non-native language speakers + inexperienced with using websites + users who can’t listen to sound at work For whom?
10. “I’m going to do the website that way. If people can’t use it they can go f**k themselves!” Everyday rant... - random world class designer / developer
11. “I’m going to put stairs here. If people can’t climb them they can go f**k themselves!” What if... - random world class architect
12. Websites are like shops, restaurants and theatres: if you leave me out you don’t deserve my money.
13. “Accessibility doesn't have to be perfect, it just needs to be a little bit better than yesterday.” - Léonie Watson
14. Define an Inclusivity Baseline
15. - <span>-itis outbreak - Outline dilemma - Now you see JavaScript - U can't (just) touch this How?
16. <span>-itis Outbreak
17. <button>s are ugly! Let’s use <span>s with JS Problems: 1. missing focus 2. missing keyboard interactions Symptoms
18. Symptoms
19. Treatment
20. Outline dilemma
21. “ … provides visual feedback for links that have "focus" when navigating a web document using the TAB key (or equivalent). ” Outline dilemma - http://www.outlinenone.com
22. “ … provides visual feedback for links that have "focus" when navigating a web document using the TAB key (or equivalent). ” - http://www.outlinenone.com Outline dilemma
23. default outlines are ugly! - http://meyerweb.com/eric/tools/css/reset/reset200802.css Outline dilemma
24. default outlines are ugly! - http://meyerweb.com/eric/tools/css/reset/reset200802.css Outline dilemma
25. Outline dilemma
26. If you really can’t stand outline, remove it just for mouse / touch interactions. Outline dilemma - https://github.com/lindsayevans/outline.js - https://www.paciellogroup.com/blog/2012/04/how-to-remove-css-outlines-in-an-acc essible-manner/
27. Now you see JavaScript
28. Myth busting: Screen readers don’t use JavaScript
29. 97.6% of screen reader users have JavaScript enabled. - http://webaim.org/projects/screenreadersurvey4/#javascript
30. - keybinding for modal controls - dynamic tabindex management - aria-* attributes management “ From great powers… ”
31. “ … could come disasters...”
32. “ … could come disasters...” Mouse only interaction?
33. Keyboard friendly “ … you can easily fix...”
34. U can't (just) touch this
35. “ … describes events and related interfaces for handling hardware agnostic pointer input from devices including a mouse, pen, touchscreen, etc. ” W3C Pointer Events - https://www.w3.org/TR/pointerevents2/
36. W3C Pointer Events - https://www.w3.org/TR/pointerevents2/#the-pointerup-event
37. W3C Pointer Events - http://caniuse.com/#feat=pointer - https://github.com/jquery/PEP/
38. BTW: What about aria-* attributes?
39. “ ARIA is a set of special accessibility attributes which can be added to any markup, but is especially suited to HTML.” Accessible Rich Internet Applications (ARIA) - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
40. a11y progress bar
41. ARIA is well supported but sometimes badly implemented. Use it wisely!
42. I want more! Resources - http://a11yproject.com/ - https://www.paciellogroup.com/ - http://webaim.org/ - http://a11yweekly.com/ - https://www.w3.org/TR/wai-aria-1.1/ People - https://twitter.com/LeonieWatson - https://twitter.com/stevefaulkner
43. Thanks