"Real Life Accessibility" by Gavin Evans
31
Real Life Accessibility UXPA UK Global Accessibility Awareness Day 2017 Twitter: @GavinAEvans @DACcessibility
Transcript of "Real Life Accessibility" by Gavin Evans
Real Life Accessibility
UXPA UKGlobal Accessibility Awareness Day 2017
Twitter: @GavinAEvans
@DACcessibility
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
Vision
Cognitive
Hearing
Physical
Users Groups to consider
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
Physical
People with Mobility Impairments
• Z index below 100 for desktop voice activation
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; }
Mobility Impaired users on mobile
Hearing
People with Hearing Impairments
• 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
Cognitive
•Th
ere
are
man
y
dif
fere
nt
typ
es o
f
cogn
itiv
e im
pai
rmen
t
•R
ead
ing
age
may
be
low
er
•D
ysle
xia
nee
ds
to b
e
con
sid
ere
d
People with Cognitive Impairments
Because Everyone Matters
People with Cognitive ImpairmentsThere 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!)
• 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?
Vision
Low Vision Users
Because Everyone Matters
• 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
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” />
Blind Users
• 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
Press INS+F6 on Desktop and use rotor for mobile
Blind Users on desktop and mobile
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>
• 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
• 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?
The end result…Usable by everyone
Digital Accessibility CentreStephen Lloyd Suite, Llan Coed House,
Llandarcy, Neath, SA10 6FG.
Office: 01792 815267
Gavin Evans mobile – 07936685804
Email: [email protected]
Cam Nicholl mobile- 07597690358
Email: [email protected]
www.digitalaccessibilitycentre.org
Thank you
