Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Accessibility Standards and the Mobile Web
Similar to Accessibility Standards and the Mobile Web (20)
Recently uploaded
Recently uploaded (20)
Accessibility Standards and the Mobile Web
- 1. Mobile Web Accessibility Marco Maertens @marcomaertens EvoHaX Accessibility Hackathon Philly Tech Week 2015 April 17, 2015
- 2. 2 Mobile Accessibility? • There is no mobile Web. Just one Web • Is there mobile accessibility? • Large overlap between mobile concerns and accessibility • Mobile has made us think not just about mobile
- 3. 3 What Are Some Mobile Accessibility Differences? • Touchscreen • Screen size • Easily adjustable orientation • Use context • AT implementation
- 4. 4 What is (W3C WAI) WCAG? • An effort of the W3C • Focused on Web accessibility • Standards set by wide consultation (world wide) • The basis of many legal requirements • Original and future basis of US Section 508
- 5. 5 WCAG 2.0 Mobile Accessibility Mapping document • A draft. Did a mention it’s a draft? • Not a change to WCAG 2.0. • Applies to mobile devices • Targeted to web sites and web apps. Hybrid and native apps can benefit, too!
- 6. 6 Perceivable • Minimizing content • Sufficient size (targets, fonts) to avoid unnecessary zoom • Zoom/magnification may be necessary • Consider user may need to pan • Contrast – even more important because of context
- 7. 7
- 8. 8
- 9. 9 Operable • Don’t forget keyboards, yes keyboards • Touch-size minimum • Gestures • Mouseup/touchend • Keyboard equivalents
- 10. 10
- 11. 11 Understandable • Screen orientation • Consistent layout • But differences in orientation or size OK (important) • Provide clear indication that element is actionable
- 12. 12
- 13. 13 Robust • Data-type keyboards: a double-edged sword • Use standard elements and controls
- 14. 14
- 15. 15 Appendix A: The Four Principles of WCAG 2.0 Perceivable - Information and user interface components must be presentable to users in ways they can perceive. This means that users must be able to perceive the information being presented (it can't be invisible to all of their senses) Operable - User interface components and navigation must be operable. This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform) Understandable - Information and the operation of user interface must be understandable. This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding) Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)
Editor's Notes
- There is no mobile Web. Just one Web Is there mobile accessibility? Mobile devices do present new considerations When do we need to think about these considerations? Think of tablets Think of what else we don’t know about yet Large overlap between mobile concerns and accessibility Mobile has made us think not just about mobile
- Touchscreen Lack of cursor Target size Screen size Easily adjustable orientation Use context (but…) AT implementation (VoiceOver/TalkBack)
- http://www.w3.org/TR/mobile-accessibility-mapping/ A draft. Did a mention it’s a draft? Not a change to WCAG 2.0. Applies to mobile devices Handhelds Tablets But also wearables (glasses, watches, fitness tracking devices), car displays, airplane seatback sets, refrigerator screens, etc. Targeted to web sites and web apps. Hybrid and native apps can benefit, too!
- Minimizing content [vision, motor control, cognitive] e.g. Hidden menus, smaller images Sufficient size (targets, fonts) to avoid unnecessary zoom [vision] Font sizes are perceived smaller on a phone Zoom/magnification may be necessary [vision] Make sure to allow pinch-to-zoom with a correct viewport metatag <meta name="viewport" content="width=device-width, initial-scale=1.0"> Consider user may need to pan [vision, motor control, cognitive] Contrast – even more important because of context [vision] Font size is perceived smaller on phones, so guidelines, should be more generous than the WCAG guidelines of 1.2em and 1.5em
- Don’t forget keyboards, yes keyboards [vision, motor control, cognitive] Touch-size minimum 9mm (but don’t specify physical units); even more important [vision, motor control] Gestures – should be simple (conflict with expected system gestures) [vision, motor control, cognitive] Mouseup/touchend reduces unintended interactions [vision, motor control, cognitive] Orientation/shake/etc. should have keyboard equivalents [vision, motor control, cognitive]
- Screen orientation [vision, motor control, cognitive] Support changes when possible Consistent layout [cognitive] But differences in orientation or size OK (important) Provide clear indication that element is actionable [vision, motor control, cognitive] No indication from hover state or cursor change
- Data-type keyboards: a double-edged sword [vision, motor control, cognitive] Use standard elements and controls so built-in accessibility will work with it. [vision, hearing, motor control, cognitive]