A talk given by Gavin Evans at UXPA UK's May 2017 event covering "Global Accessibility Awareness Day". http://uxpa-uk.org/events/uxpa-uk-gaad-2017/ Check out our Events page to see what's coming up in the future: http://uxpa-uk.org/events/

1. Real Life Accessibility
UXPA UK
Global Accessibility Awareness Day 2017
Twitter: @GavinAEvans
@DACcessibility

2. Because everyone matters
About DAC
The Digital Accessibility Centre is a Social Enterprise,
operating on a 100% not-for-profit basis.
• We have been in operation for 6 years and currently employ 30
people
• Most of our employees are people with disabilities
• We are a Living Wage Foundation accredited employer
• We work with many high street banks, media organisations and
Government agencies

3. Vision
Cognitive
Hearing
Physical
Users Groups to consider

4. Question: What types of assistive technologies are
available for these user groups?
Desktop
Voiceover (MAC)
Jaws (windows)
NVDA (Freeware)
Switch control/ Keyboard only
Speech to text (Dragon Naturally Speaking)
Zoom/magnification
Mobile
Text to speech for Android (TalkBack)
Speech to text for Android (S-Voice)
Switch control for Android
Text to speech for iOS (Voiceover)
Speech to text for iOS (Siri)
Switch control for iOS
Zoom for iOS
Assistive touch

5. Physical

6. People with Mobility
Impairments

7. • Z index below 100 for desktop voice
activation

8. People with Mobility
Impairments
• It is important that keyboard users can see which
element has focus. Therefore, display:none; or
display:0; must NOT be used.
• It is best practise to offer additional focus indicators
such as a background colour, border underline and/or
mouse change. This can be done via CSS using the
elements’ :focus attribute.
a:hover, a:focus, a:active { background-color: #ff9; }

10. Mobility Impaired users on mobile

11. Hearing

12. People with Hearing
Impairments

13. • English may be their second language
• Videos – Users may rely on information in
the audio track to be provided via opened
or closed captions in conjunction, and
synchronized with the audio
• Spoken words and some sounds may need
text alternatives
People with hearing impairments

14. Cognitive

15. •Therearemany
differenttypesof
cognitiveimpairment
•Readingagemaybe
lower
•Dyslexianeedstobe
considered
People with Cognitive Impairments
Because Everyone Matters

16. People with Cognitive Impairments
There are many different types of cognitive impairment
• May be easily distracted by moving animation
• Short term memory may be affected
• Busy page layouts can be confusing
(Keep it simple!)

17. • Can be affected by poor error handling
• Dyslexia needs to be considered – font style,
• Text alignment
• Inconsistent design
• Ambiguous labels and icons can be confusing
People with Cognitive Impairments
What did I
do wrong?

18. Vision

19. Low Vision Users

20. Because Everyone Matters

21. • Text may not be large enough to read
• Contrast between text and the
background may not be sufficient
• Screen magnification software may be
used to increase the size of the content
on screen
• Limited Screen space
Low Vision Users
Because Everyone Matters

22. Low Vision Users on Mobile
Text may not be large enough to read – Do Not Suppress zoom
capabilities on a mobile design
Don’t do this
<meta content=”width=device-width; initial-scale=1.0; maximum-
scale=1.0; user-scalable=1;” name=”viewport”>
Or
<meta name=”viewport” content=”user-scalable=no” />
Do this
<meta content=”width=device-width; initial-scale=1.0; maximum-
scale=2.0; user-scalable=1;” name=”viewport”>
or
<meta name=”viewport” content=”user-scalable=YES” />

23. Blind Users

24. • Require alternatives to visual content
• Require alternatives to mouse control
• Special software called screen readers
are used to translate written text into
speech
• Visual structure must be represented
programmatically
Blind Users
Because Everyone Matters

25. Press INS+F6 on Desktop and use rotor for mobile
Blind Users on desktop and mobile

26. Blind Users on Mobile
• F87: Failure of Success Criterion 1.3.1 due to inserting non-
decorative content by using :before and :after pseudo-
elements and the 'content' property in CSS
<style>
.icon-star:before { content: "★ "; }
</style>
<span><span class="icon-star" aria-
hidden="true"></span>Favorite</span>

27. • Ensure that users are aware of updating content occurring
elsewhere on the screen after making a selection
• Ensure that content does not result in the page auto-
refreshing
• Pop ups - Considerations for items that steal focus (an
advertisement for example).
Updating Content

28. • Choose an accessibility champion
• Write an accessibility policy/strategy
• Include references to current guidelines (WCAG 2.0)
• Provide training to designers, Developers and content teams
• Audit or test through all stages of the process (Using automated
as well as Assistive Technologies)
• Get expert help or certify content
• Get Users involved, Get Users involved, Get users involved
How do you get this done?

30. The end result…
Usable by everyone

31. Digital Accessibility Centre
Stephen Lloyd Suite, Llan Coed House,
Llandarcy, Neath, SA10 6FG.
Office: 01792 815267
Gavin Evans mobile – 07936685804
Email: gavin.evans@digitalaccessibilitycentre.org
Cam Nicholl mobile- 07597690358
Email: cam.nicholl@digitalaccessibilitycentre.org
info@digitalaccessibilitycentre.org
www.digitalaccessibilitycentre.org
Thank you