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.
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
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
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.
17.
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.
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?
22.
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.
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
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
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