inclusive and accessible mobile
DESCRIPTION
An introduction to mobile accessibility for Mobile Monday, June 11, 2012TRANSCRIPT
![Page 1: Inclusive and accessible mobile](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c891e14a7959e51e8b45a0/html5/thumbnails/1.jpg)
Henny Swan
Senior Usability and Accessibility Specialist, BBC
Inclusive and Accessible Mobile #MobA11y
![Page 2: Inclusive and accessible mobile](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c891e14a7959e51e8b45a0/html5/thumbnails/2.jpg)
Mobile and accessibility Diverse user model, age, technology,
temporary
Mobile is by defini9on disabling
Mobile is by defini9on enabling
USA 21st Century Communica9ons and Video Act
‘There are 62 million poten9ally disabled users in the UK’
Gareth Ford Williams, BBC
![Page 3: Inclusive and accessible mobile](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c891e14a7959e51e8b45a0/html5/thumbnails/3.jpg)
Mobile Accessibility Guidelines & techniques Coming soon
![Page 4: Inclusive and accessible mobile](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c891e14a7959e51e8b45a0/html5/thumbnails/4.jpg)
1. Support device capabiliEes Content
must not break device accessibility
Web and plaKorm specific controls should be used as intended
Accessibility features must be implemented in a way that is not mutually exclusive
Device specific guidelines should be followed
Device capability
![Page 5: Inclusive and accessible mobile](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c891e14a7959e51e8b45a0/html5/thumbnails/5.jpg)
2. AlternaEves Provide alterna9ves for content and func9onality: HTML: alt=“Description”!iOS: labels, hints and traits!
Android: android:contentDescription!
Hide non content and func9onality objects: HTML: alt=“”!iOS do not ‘Enable Accessibility’
Android do not make focusable via android:focusable !
Provide appropriate editorial
Alterna9ves
![Page 6: Inclusive and accessible mobile](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c891e14a7959e51e8b45a0/html5/thumbnails/6.jpg)
3. NavigaEon Provide consistent, recognisable naviga9on
Group related links: Tabindex=“-1”not supported a single link ahref is supported
Remove skip links on touch and mobile
Links
![Page 7: Inclusive and accessible mobile](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c891e14a7959e51e8b45a0/html5/thumbnails/7.jpg)
4. Structure Provide a logical focus order and content order
Use headings (H1 to H6), WAI ARIA Landmarks, HTML5 sec9oning elements
‘Accordion’ structure from desktop to mobile
Structure
![Page 8: Inclusive and accessible mobile](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c891e14a7959e51e8b45a0/html5/thumbnails/8.jpg)
Desktop
Structure
www.smashingmagazine.com
![Page 9: Inclusive and accessible mobile](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c891e14a7959e51e8b45a0/html5/thumbnails/9.jpg)
Mobile
Structure
Main naviga9on packed away
Heading structure collapsed
Banner, naviga9on landmarks can be removed
![Page 10: Inclusive and accessible mobile](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c891e14a7959e51e8b45a0/html5/thumbnails/10.jpg)
5. Touch Visual cues to help users navigate
Audible cues for voice output users
‘BBC Two'
No9fy screen readers of changes to layout
Provide enough ‘read-‐tap symmetry’
Touch targets should be large enough
BBC iPhone app for iPlayer
Touch
![Page 11: Inclusive and accessible mobile](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c891e14a7959e51e8b45a0/html5/thumbnails/11.jpg)
Talk is cheap
Screen reader tes9ng on mobile
![Page 12: Inclusive and accessible mobile](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c891e14a7959e51e8b45a0/html5/thumbnails/12.jpg)
There is no subs9tute for tes9ng with users with disabili9es on mobile