Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/2nnxh9x. Molly Watt and Chris Bush discuss designing for people with specific visual, auditory, cognitive and mobility needs, accessibility features and challenges for certain users engaging digital services. Filmed at qconsf.com. Molly Watt is a Director of Molly Watt Ltd, a usability and accessibility consulting group and co-founder of the Molly Watt Trust, a non-profit helping to raise awareness about Usher Syndrome and provide access to technology. Chris Bush leads the Experience Design team at Sigma, a Swedish IT consulting organization. He leads the group’s center of excellence for Experience Design.

1. How to design and develop
in an inclusive way

2. InfoQ.com: News & Community Site
• Over 1,000,000 software developers, architects and CTOs read the site world-
wide every month
• 250,000 senior developers subscribe to our weekly newsletter
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• 2 dedicated podcast channels: The InfoQ Podcast, with a focus on
Architecture and The Engineering Culture Podcast, with a focus on building
• 96 deep dives on innovative topics packed as downloadable emags and
minibooks
• Over 40 new content items per week
Watch the video with slide
synchronization on InfoQ.com!
https://www.infoq.com/presentations/
ux-assistive

3. Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide
Presented at QCon San Francisco
www.qconsf.com

4. Chris Bush
Head of Experience Design
-
@suthen @wearesigma
Molly Watt
Technology, Web Accessibility
& Usability consultant
@mollywatttalks @mollywatttrust
How to design and develop
in an inclusive way

5. My story
► 1994
► 18 months on
► Support > Speech therapy > Included > Happy childhood
► 2006
► 2008
► 2010

6. Deafness + retinitis pigmentosa =
Usher syndrome

7. Toughest thing about usher syndrome?
► Ignorance and lack of understanding - ignorance
► Being born severely deaf and then acquiring blindness
► Access to assistive technology
Inclusion
► Resulting in education being severely affected
► Communication and mobility affected
Depression, anxiety, and isolation

8. Educate, don’t assume
► Most common form of congenital deaf blindness
► 2nd to ageing in number
► I can empathise with the ageing population
► Many will acquire sensory impairment, more turn to technology, more are
subjected to accessibility challenges.

9. How do I, and many people access
the world?
► It's simple, technology.
► Those of us lucky to have access to technology
► Some class as 'assistive technology'
► It's not rocket science either...

10. Evolution of Hearing aid technology
► Analogue
► Digital
► GN Resound Linx2

11. Apple ecosystem = access = inclusion
► iPhone
► iPad
► MacBook
► Apple Watch

12. However, Assistive technology does
not fully compensate
► Almost everything can be done online now...
► However, design can limit effectiveness
► Assistive technologies are valuable to all - BUT
► Those who create online environments must create with ACCESSIBILITY in
mind in order for assistive technologies to be most effective.

13. Anyone can have challenges
► Disability is more common than you may imagine.
► We will all experience disability at some point.
► 1 in 5 (around 20%) of us have some kind of a disability.
► Example : By the age of 45 most of us will need glasses
- glasses are considered as an assistive tech.
► Yet many websites do not enable dynamic text.
► Many on iPhone use 'Large Text,' many apps are still not compatible.

14. Accessibility should not be considered
as an afterthought or as 'help' but as
reasonable built-in adjustments for all...

15. Acquiring a disability
> being born with a disability
► Many like myself, I was born deaf but sighted and then lost vision.
► I am now registered blind however still rely on the remaining vision I have
left (5% in one eye)
► Many think if you are blind you use auditory tech
► Being born blind if different to being born sighted.
► Only 5% of blind people have no useful sight.
► The rest have some, however not completely useful.

16. So, what is the best way to think about
designing for inclusion?

17. Exemplar examples of
inclusive design
are formed from
user needs
not just compliance

18. What’s wrong
with this
picture?

19. Designing for extremes

21. Vision
Ability to see, or
process visual
information
Hearing
Ability to hear, or
process acoustic
information
Motor
Ability to interact
with a device
easily and
accurately
Cognitive
Ability in mentally
demanding areas;
reading, memory,
attention, complex
concepts or language
Types of impairment

22. Vision
Blindness,
low vision &
colour blindness
Hearing
Hearing loss
Motor
Dyspraxia,
RSI, arthritis
and
cerebral palsy
Cognitive
Down’s syndrome,
Asperger’s and
dyslexia, learning
difficulties
Types of impairment – long term

23. Vision
Forgot my glasses
Glare when using a
device in bright
sunlight
Hearing
Communication
within a noisy
environment
Motor
Temporary injury
such as a broken
wrist
Carrying a child
Cognitive
Medication,
Tiredness, Stress,
Hangover :D
Types of impairment – temporary & situational

25. What can you do to make your products
more inclusive?

26. Design and understanding

27. Consider colour and contrast
2.7 million
people in the
UK are
colour blind

28. Consider colour and contrast
ChromeLens
to the rescue

29. Design hit areas to be easy to click or tap
Standard
touch size of
7-10mm
Provide
3-5mm
inactive
space around
elements

30. Design for comfort
iPhone 4

31. Design for comfort
iPhone 4 iPhone 5 iPhone 6 iPhone 6+

32. Design for comfort
iPhone 4 iPhone 5 iPhone 6 iPhone 6+

33. Design for readability
Clear
visual
hierarchy
A
background
colour
that does
not flicker
10-15
words on
a line
Adequate
line-heights
(120-150%)

34. Ensure that content is easy to understand
readable.com
Reading age
of 11-12 years is
generally good
practice

35. Provide captions for video

36. Help users find your content
Providing
auto-complete
helps to
reduce user
error

37. Help users fix errors
Show;
What the error is,
Where the error is,
and
How to solve it

38. Think carefully before using custom controls
Custom
controls can
be very
empowering
or very
prohibitive

39. Development and implementation

40. Start with solid foundations - ARIA
The Accessible Rich Internet Applications Suite, defines a way to make web
content more accessible to people with disabilities.
It especially helps with dynamic content and advanced user interfaces
► Landmark roles
► States and properties

41. ARIA landmark roles
<header role=“banner”>
<aside role=
“complimentary”>
<main role=“main”>
<footer role=“contentinfo”>
<nav role="navigation">
<div id=“search” role=“search”>
Users are able
to quickly
navigate to
known content

42. ARIA landmark roles
<header role=“banner”>
<aside role=
“complimentary”>
<main role=“main”>
<footer role=“contentinfo”>
<nav role="navigation">
<div id=“search” role=“search”>
29% of users
prefer 6 or
less per page
(WebAIM screen
reader survey)
Don’t over
use them

43. Avoiding chatty screen readers

44. Avoiding chatty screen readers
<div class="ottSidekickFeedLeadArticleWrapper ">
<a id=“{removed}" href=“http://news.sky.com/story/1020776" class="Article" onclick="{removed}">
<img title="Autumn Statement: Osborne Tightens The Screw"
alt="Autumn Statement: Osborne Tightens The Screw" src="-90x90.jpg">
</a>
</div>
<div class=“{removed}">
<h4 class="hbx-lid"><a href="http://news.sky.com/story/1020776"
title="Autumn Statement: Osborne Tightens The Screw" onclick=“{removed}”>
Autumn Statement: Osborne Tightens The Screw
</a></h4>
<p title="Chancellor George Osborne will warn there are no &quot;miracle cures&quot; as he admi…">
Chancellor George Osborne will warn there are no "miracle cures" as he admi…
</p>
</div>

45. Avoiding chatty screen readers
<a href="/news/uk-england-beds-bucks-herts-20603182“ class=“article”>
<img alt="Euromillions logo"
src="http://news.bbcimg.co.uk/media/images/30185-1.jpg">
<h2 class=“secondary-story-header“>Deadline day for £64 lotto prize</h2>
<p>The highest lottery prize ever to remain unclaimed nearly £64m - will go to good causes if
the winner does not come forward by 23:00 GMT</p>
</a>

46. Where did the zoom go?
Everybody
finds zoom
useful

47. Why inclusive design really matters

48. Isolation
► Many platforms are still inaccessible, creating everyday barriers
► Without inclusion online, many miss out...
► Getting a job, reading the news, personal banking, applying for
colleges, playing online games, learning new information, making
reservations, shopping online...
► All these can make life incredibly easier with the right access.
► Benefits everybody

49. Reasonable adjustments / accessibility
► One of the best universities in London for Primary Education (to teach children
aged 5-11 years)
► Applying was impossible without help - no independence = confidence knock.
► I was unable to access the course through ignorance and a completely
inaccessible website - where I was referred for my reading material and email.
► I was excluded online as well as in lectures.
► Easily preventable

50. Everyone will experience a real need for
inclusive services at least once in their
lives.
Consider everyone's journey.

51. Chris Bush
Head of Experience Design
-
@wearesigma @suthen
Molly Watt
Technology, Web Accessibility
& Usability consultant
@mollywatttalks @mollywatttrust
Thank you. Any questions?
http://bit.ly/2fTeNxx

52. Prepared by Sigma: Putting users at the heart of our
solutions delivers better products to a happier audience
www.wearesigma.com
Prepared by Sigma: Putting users at the heart of our
solutions delivers better products to a happier audience
www.wearesigma.com

53. Watch the video with slide
synchronization on InfoQ.com!
https://www.infoq.com/presentations/
ux-assistive