How developers easily can test if their web or mobile apps are accessible for users with disabilities. Slides from our presentation on Mobile Era 2016.

1. Sofia Hussain @uxsophia
Tom Widerøe @twidero
Can everyone use your app?

2. Abdellaif Baka from Algeria won the 1500 meters for
partially sighted in The Paralymics in Rio 2016.
The top 4 runners in the final ran faster than the gold
medal winner in The Olympics the same year.
https://static.independent.co.uk/s3fs-
public/styles/story_large/public/thumbnails/
image/2016/09/13/09/abdellatif-baka.jpg

3. Why? How? Getting everyone
on board
1 2 3
Accessibility

4. 1
Why should we care about accessiblity?

5. 17% of the population between 16 and 66
years are registered with temporary or
permanent disabilities

6. Disabilities
• Visual
Blindness, low vision, color blindness
• Hearing
Deafness and hard-of-hearing
• Motor
Inability to use a mouse, slow response time, limited fine motor control
• Cognitive
Learning disabilities, distractibility, inability to remember or focus on large amounts of
information

8. You are not disabled
by the disabilities
you have

9. Universal design
”The design of products and
environments to be usable by
all people, to the greatest
extent possible, without the
need for adaptation or
specialized design.”
The centre for Universal Design, North
Carolina University

10. Inclusive mobile society
Mobile society

11. Annoying for some, impossible for others
The signs on both sides of the road say «Please use
sidewalk on the other side». How could a person in
wheelchair pass this street in heavy traffic?

12. We can also make such
blunders if we do not think
about all our users.

13. How can blind people use smartphones?
With assistive technologies,
smartphones make life even
easier for people with disabilities
than for the rest of us
Photo: VCG - www.chinadaily.com.cn/

14. How can blind people
take a selfie?

15. Physical abilities
Photo:http://www.johnlund.com/
Images/Elephant-Balancing.jpg

16. It is hard to use sliders when
you are sitting on a shaking bus

17. How we made it more
accessible

18. 2
How can we design and develop for accessibility?

19. The Web Content Accessibility Guidelines (WCAG)
It’s great that standards are in place,
but it’s not easy to apply the standard in
the creative phases of a design process

20. Death by standards
Photo:https://www.linkedin.com/pulse

21. The straw test

22. Zoom

23. Zoom

24. Assistive technologies

25. Explore the accessibility
settings on your phone

26. Filter for the color blind

27. Inverted colors, for people who are
sensitive to bright light

28. Screen readers

29. VoiceOver seems to read
content fra a different layer.
BBC news logo is missing
alternative text.
<h> tag is not used on the
headings, which makes it
impossible to jump between
headings.

30. This is how it should work

31. User tests
• Different from regular user testing
– Always allow users to test their own equipment
– Fewer tasks
– More guidance
• Requires profound knowledge about assistive technologies

32. User tests
Heading
Content before
heading
Blind user can not find the close
window button because it is placed
before the heading in markup

33. User tests
“One more
field”. WTF?
No shortcut to
the missing field
Blind user is unable to
navigate to missing field
because clickable text
does not work with
VoiceOver.
It is hard to find the other
missing fields when you
can not see the fields that
are missing.

34. How to avoid blunders

35. <button>
– done
<div class=button>
– Make it look like a button
– Make it work as a button
– Show the right mouse pointer
– Insert into tabindex
– Make screen reader tell it is a button
– +++
• Trust the browser
Make it simple.
Use standard elements.

36. Zoom
• Do not lock the page size
Do not take away the
possibility to zoom a
web page

37. 3
Getting everyone on board

38. The challenge is not to do things right,
but to make your colleagues do it

39. Accessibility group in FINN
Do not try to change the culture alone.
In a group it is easier to get things
done.

40. Workshops

41. Design guide

42. Give some friendly reminders of the
importance og accessibility

43. Let them feel what it is like

44. Summary
• Why?
– So that products can be used by people with all ranges of sight, hearing, movement and cognitive abilities
• How?
– Use the straw test to see only small parts of a page
– Do not only rely on one kind of input
– Test with screen readers
– Use standard components
– Include people with disabilities in user tests
• Getting everyone on board
– Form a group, you can not take this fight alone
– Keep reminding your colleagues
– Run workshops to teach how to test for accessibility
– Make accessibility a part of the style guide

45. Unknown
possibilities
The technology is there!
Why can't we all use it?
www.smh.com.au/digital-life/games/

46. http://bit.ly/finn_ios
We’re hiring iOS developers!

47. Thank you
@UXSophia
Sofia Hussain
@twidero
Tom Widerøe