UK Chapter of the User Experience Professionals' Association
29 de May de 2017•0 recomendaciones•433 vistas
1 de 31
"Real Life Accessibility" by Gavin Evans
29 de May de 2017•0 recomendaciones•433 vistas
Descargar para leer sin conexión
Denunciar
Diseño
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/
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
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
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; }
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
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?
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” />
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?
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
Notas del editor
Introduction to The Digital Accessibility Centre (DAC)
We are known as being…
Credible – Our team of testers are highly regarded and are well known for providing ‘real life’ accessibility testing services and advice, helping clients to embrace the spirit of accessibility and not just tick box compliance
Ethical – We are careful to always offer best advice, making sure that whichever services we offer are the most appropriate and cost effective for our client.
Expert – in ‘real life’ accessibility testing
Transparent – clients have open access to our test team.
Our services are of extremely high quality whilst being fairly priced.
We are a growing Social enterprise who genuinely cares about our clients.
May have limited dexterity
May not be able to use touch screen
Access can be slowed by heavy navigation (i.e. A-Z feature)
Buttons and links will need to be of a certain size
Z index below 100 for desktop
Alternatives for swipe gestures
May have limited dexterity
May not be able to use touch screen
Access can be slowed by heavy navigation (i.e. A-Z feature)
Buttons and links will need to be of a certain size
Alternatives for swipe gestures
44 x 44 px or 88x88 on a retina display - This is roughly 8-10mm
May not be able to use touch screen or be able to use gestures easily
The size of buttons and links are important
English is a second language so keep content legible – Check readability of content using Fog readability index or Flesch Kincaid
Considering the Deaf community
English as a second language so keep content legible
Video needs synchronised captions
Use TTML or DFXP file format for videos
Text may not be large enough to read
Contrast between text and the background may not be sufficient
Screen may need to be enlarged or zoomed to increase the size of the content on screen
Can help users with cognitive impairments
Do not update other areas of the screen not close to the actionable button
Text may not be large enough to read
Screen may need to be enlarged or zoomed to increase the size of the content on screen
It’s the initial-scale=1.0 and maximum-scale=1.0 which effectively disables zoom in the first example and content=”user-scalable=no” in the second. On mobile you want to give the user as much control over screen size as you can so instead do something like this:
Special software called screen readers are used to translate written text into speech
All non-text elements (images, multimedia) require a text alternative.
Visual structure must be represented in a logical order
use headings
Careful how to hide content (Use HTML5 hidden or aria-hidden=“true” alongside display:none
If the pseudo before or after are used for important content, ensure that this has aria hidden in order to label the element correctly for voiceover.