Inclusive UI
development
tips & tricks
Marco Solazzi - @dwightjack
Our Digital Experience 2016
Slide 2
Slide 2 text
About me
- Senior Front-end @ AQuest
- Co-founder Frontenders Verona
Slide 3
Slide 3 text
Accessibility
Slide 4
Slide 4 text
“ … 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
Slide 5
Slide 5 text
“ … 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
Slide 6
Slide 6 text
Inclusive
Development
Slide 7
Slide 7 text
If you follow best practices you’re
already providing accessibility
Slide 8
Slide 8 text
+ vision impairments
+ limited fine motor control
+ cognitive disabilities
+ hearing impairments
+ older people (ourselves tomorrow)
For whom?
Slide 9
Slide 9 text
+ 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?
Slide 10
Slide 10 text
“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
Slide 11
Slide 11 text
“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
Slide 12
Slide 12 text
Websites are like shops, restaurants and
theatres: if you leave me out you don’t
deserve my money.
Slide 13
Slide 13 text
“Accessibility doesn't have to be perfect,
it just needs to be a little bit better than
yesterday.”
- Léonie Watson
Slide 14
Slide 14 text
Define an Inclusivity Baseline
Slide 15
Slide 15 text
- -itis outbreak
- Outline dilemma
- Now you see JavaScript
- U can't (just) touch this
How?
Slide 16
Slide 16 text
-itis
Outbreak
Slide 17
Slide 17 text
s are ugly!
Let’s use s with JS
Problems:
1. missing focus
2. missing keyboard interactions
Symptoms
Slide 18
Slide 18 text
Symptoms
Slide 19
Slide 19 text
Treatment
Slide 20
Slide 20 text
Outline
dilemma
Slide 21
Slide 21 text
“ … 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
Slide 22
Slide 22 text
“ … 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
Slide 23
Slide 23 text
default outlines are ugly!
- http://meyerweb.com/eric/tools/css/reset/reset200802.css
Outline dilemma
Slide 24
Slide 24 text
default outlines are ugly!
- http://meyerweb.com/eric/tools/css/reset/reset200802.css
Outline dilemma
Slide 25
Slide 25 text
Outline dilemma
Slide 26
Slide 26 text
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/
Slide 27
Slide 27 text
Now you see
JavaScript
Slide 28
Slide 28 text
Myth busting:
Screen readers don’t use
JavaScript
Slide 29
Slide 29 text
97.6% of screen reader users have
JavaScript enabled.
- http://webaim.org/projects/screenreadersurvey4/#javascript
Slide 30
Slide 30 text
- keybinding for modal controls
- dynamic tabindex management
- aria-* attributes management
“ From great powers… ”
Slide 31
Slide 31 text
“ … could come disasters...”
Slide 32
Slide 32 text
“ … could come disasters...”
Mouse only
interaction?
Slide 33
Slide 33 text
Keyboard
friendly
“ … you can easily fix...”
Slide 34
Slide 34 text
U can't (just)
touch this
Slide 35
Slide 35 text
“ … 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/
“ 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
Slide 40
Slide 40 text
a11y progress bar
Slide 41
Slide 41 text
ARIA is well supported but
sometimes badly implemented.
Use it wisely!
Slide 42
Slide 42 text
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