The document summarizes Denis Boudreau's presentation on 2017 design trends and their impact on accessibility. It discusses issues that people with various disabilities face with placeholder labels, parallax scrolling, and chatbots. For each trend, it outlines top issues according to fictional personas and provides design tips for addressing accessibility, such as ensuring all content is conveyed in text for screen readers. It emphasizes that the average user does not exist and accessible design benefits all users.

1. 2017 design trends
(and their impact on accessibility)
Denis Boudreau
WAQ 2017, Quebec city
Principal consultant & trainer
db@deque.com

2. Gilbert S. Daniels
Military researcher
Aero medical laboratory
“ There is no such thing
as an average pilot…

3. …

4. “ If you’ve designed
a cockpit to fit the
average pilot, then
you’ve designed it
to fit NO ONE.
Gilbert S. Daniels
Military researcher
Aero medical laboratory

5. User eXperience. Accessibility. Inclusive Design. Gamification. Empathy.
Empowering all users. Geek. Introvert. Pragmatism. Good design = inclusive design.
Denis Boudreau
Deque Systems / Knowbility / W3C

6. WHAT DOES
GREAT DESIGN
MEAN TO YOU?

7. Great design
According to Awwwards.com
Reference
http://immersive-g.com/wishes-2017/

8. 1 000 000 000+

9. Blindness
Cognitive
Situational disabilities
Chemo brain
Color blindness
Neurodiversity
Gamer’s thumb
Dyslexia
Language barriers
Photosensitive epilepsy
Astigmatism
Hard of hearing
Lazy-Eyes
Directionally challenged
Poor hearing
Age-related macular degeneration
Multiple sclerosis
Learning difficulties
Visual impairments
Tremors
Muscle slowness
Deuteranopia
Monochromacy
Dichromacy
Anomalous trichromacy
Protanopia
Protanomaly
Deuteranomaly
Tritanopia
Tritanomaly
Deafness
Achromatopsia
Loss of fine muscle controlParkinson’s disease
Muscular dystrophy
Cerebral palsy
Stroke
Photoepileptic seizures
Developmental disabilities
Dyscalculia
Attention deficit disorders
Dementia
Acquired brain injuries
Neurodegenerative diseases
Difficulty concentrating
Dysgraphia
Getting older
Post-concussion syndrome
Sleep deprivation
Vertigo
Illiteracy
Amputation
Cataracts
Glaucoma
Auditory
Autism spectrum disorders
Motor Diabetic retinopathy
Low vision
Noise-induced hearing loss
Aphasia
Reading disorders
Visual
Vestibular disorders
Arthritis
Corneal opacification
Trachoma
Amblyopia
ADHD
Alzheimer's disease
Spino-cerebellar ataxia
Dysphasia
Dyspraxia
Dysorthographia
Chronic migraines
Fatigue
Motion sicknessPost traumatic stress disorder
Benign paroxysmal positional vertigo
Carpal tunnel syndrome
Charcot-Marie-Tooth disease
Down syndrome
Dystonia
Amyotrophic lateral sclerosis
Tendinitis
Huntington's disease
Wrist pains
Achromatopsia
Retinal detachment
Tunnel vision
Noonan syndrome
Retinoblastoma
Nearsightedness
Fuchs' dystrophy
Optic neuritis
Actually, too many to count!
Asperger’s syndrome
Bipolar disorders
Cystic Fibrosis
Narcolepsy

10. Leaving no one behind
One size never truly fits all
People using
smart phones
People
getting older
People with
disabilities
People using
tablet devices
Average
users

11. We have a collective responsibility
to people with disabilities, but also
to our clients, to help bridge the gap
of digital exclusion.

12. Accessibility / UX Personas
Emma
ADHD
Anja
Blindness
Are your average users different than mine?
Joseph
Vertigo

13. Conversational interfaces
(chatbots)
Parallax
scrolling
Placeholder
labels

14. Placeholder
labels

15. Using placeholder labels
“Forms relying on placeholder labels make it very hard for me
to use them, because they lack guidance and increase the
likelihood that I will miss critically important information...
“
Emma Joe Anja

16. According to Emma
Top 3 Issues with placeholder labels
Emma Smith - ADD
Poor contrasts
I tend to glance over things quickly, so I often miss poorly
contrasted labels when positioned within text fields.
Confusion over input value
Some sites will make the placeholder label darker, but in
such cases, I’m likely to confuse labels with my own data.
Non-persistent labels
Placeholder labels disappear when I type, meaning that I
no longer can double-check my info before submitting it.

18. 100%
Design tips
Dealing with placeholder labels
Estimated percentage of people who hate when
form labels disappear and it’s no longer possible
to double-check if values entered are accurate.
Provide programmatically associated text labels to
each field, even if it means hiding them off-screen.
Make sure programmatic labels become visible above
the controls when placeholder text vanishes from view.
Make the placeholder text color darker, and provide
visual indicators to identify placeholder labels as such.

19. Parallax
scrolling

20. Using parallax scrolling
“I miss the days when sites were built with real sections. Now,
sites are more like long pages, with annoying transitions. It’s
pretty hard to keep focus, and find my way around them.
“
Emma Joe Anja

21. According to Joe
Top 3 Issues with parallax scrolling
Joe Hammett - Vestibular
Feelings of motion sickness
After spending more than a few minutes on parallax sites,
I often feel dizzy and nauseous, as if I could throw up.
No way to control the movement
These motion effects are usually decorative, and very
distracting. Why can’t I just click a button to stop them?
No warning beforehand
Wouldn’t it be great if developers cared enough to warn
us ahead of time, so we would know what to expect?

23. 35%
Design tips
Dealing with parallax scrolling
Estimated number of US adults aged 40+ who
might experience feelings of motion sickness
on sites using parallax effects.
Limit the amount of animations and movement effects in
the page or the views. Less is often more.
Provide a warning on page load, to inform users about
risks for people with vestibular disorders.
Provide a means to disable parallax effects, so users can
quickly switch to a static version, if they so choose.

24. Conversational
interfaces
(chatbots)

25. Using chatbots
“I like the concept of browsing with no interface, this appeals
to me quite a lot. But if I’m going to miss half of the content,
then there’s really no point, is there…
“
Emma Joe Anja

26. CNN news Chatbot experience

27. According to Anja
Top 3 Issues with chatbots
Anja Beckett – Blindness
Buttons are not labeled properly
I keep hearing about buttons that are only labeled as
“button”, and text fields that are not labeled at all.
Keyboard focus is not managed properly
Keyboard focus is constantly sent back to the top of the
screen, forcing me to start over each time.
Content not visible to screen readers
Options like “Topics” are just not detected by my screen
reader. Some of the content is completely skipped as well.

28. 34k
Design tips
Dealing with conversational interfaces (chatbots)
Estimated number of chatbots that have been
developed for the Facebook Messenger platform
alone in the past 2 years.
Make sure buttons, links are other calls to action are
properly labeled for assistive technologies.
Ensure keyboard focus is properly handled, and set where
it needs to be, based on user interactions.
Verify that every piece of information provided in the
chatbot is also programmatically conveyed in text.

29. It doesn’t work for planes…
It doesn’t work for cars…
And it sure as hell doesn’t work for accessibility either!

30. Designing for the extremes
Letting the middle take care of itself
People using
smart phones
People
getting older
People with
disabilities
People using
tablet devices
Average
users

31. There’s no such thing as an “average user”

32. If you’ve designed a site to please the average
user, then you’ve designed it to please no one.

33. Anja Beckett
web developer
“ I look forward to the
day when designers
and developers
realize the power they
have over my ability
TO SUCCEED.

34. Questions & comments
db@deque.com
@dboudreauStay in touch!

35. 18avril 2017, 18h30
Accessibilité : pensez-y avant de désactiver JavaScript
April 18th, 6:30pm
Accessibility: Don't turn off that JavaScript just yet
Shopify Montréal
490, rue de la Gauchetière Ouest

36. Merci beaucoup!
Accessible design provides a better UX for everyone.
ca.linkedin.com/in/dboudreau about.me/dboudreautwitter.com/dboudreau
Me