1 / 82

Henny Swan

Mobile Accessibility # MobA11y. Senior Usability and Accessibility Specialist, BBC @ iheni henny@iheni.com www.iheni.com AccessU 2012. Henny Swan. 1 / Mobile accessibility 2 / Strategy 3 / Build 4 / Debug 5 / Take aways. 1 / Mobile accessibility . What is ‘mobile’?.

jimbo
Download Presentation

Henny Swan

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Mobile Accessibility • #MobA11y Senior Usability and Accessibility Specialist, BBC @iheni henny@iheni.com www.iheni.com AccessU 2012 Henny Swan

  2. 1 / Mobile accessibility 2 / Strategy3 / Build4 /Debug5 / Take aways

  3. 1 / Mobile accessibility

  4. What is ‘mobile’? Mobile web Viewing content on devices with a browser Web apps Browser based web applications built with HTML, CSS and JavaScript Native apps Downloaded applications that take advantage of phone capabilities (proprietary or Java based) Hybrid apps Built with HTML, CSS and JavaScript, downloadable and can access phone capabilities

  5. What is ‘accessibility’? Diverse user model Access technology users Access services Hidden disability Aging Temporary Cultural Technology ‘There are 62 million potentially disabled users in the UK’ Gareth Ford Williams, BBC

  6. Mobile isby definitiondisabling Poor light Glare Small fonts Poor image and colour support Small keyboards No mouse Touch One hand Screen size

  7. Mobile isby definitionis enabling Integration with phone features Geolocation Camera integration Calendar integration Mobile is more agile than desktop Software development Uptake of web standards? Bridges the digital divide I can’t afford a computer but I have a mobile

  8. There’s nothing on iPhone or iPad that you can do that I can’t do. Stevie Wonder

  9. 2 / Strategy

  10. What devices should I support? 1. Assess mobile OS and browser market share 2. Review devices in existing company test plans 3. Assess which popular devices support accessibility 4. Establish what devices people are using 5. Review laws in your country Establishing a mobile accessibility strategy – iheni.com

  11. Market share globally Mobile browsers, Jan 2011 • Opera 21 % • iPhone 19 % • Nokia 15% • Blackberry 14% • Android 14% Mobile browsers, May2012 • Opera 22% (lead for 12 months) • Android 21% (steady rise) • iPhone20% (slight increase) • Nokia 11% (a decline) • UC browser 7% (New) Blackberry dropped out of the top 5 to 5% Source: StatCounter 2011-2012

  12. Device capability Speech input/output iOS Voiceover (iOS3+) Android Talkback (2.2, built in for v4 ) Android Accessibility iOSSiri Proloquo Accessibility settings Zoom Font resizing Custom gestures Colour settings Haptics Sound feedback Web technology support HTML, CSS, WAI ARIA, Flash Remember, people don’t just choose a device for browsing “The on-screen keyboard is fully speech enabled and supposedly accessible but how much skill in my fingertips am I going to need to use this thing?” Should I stay or should I go iPhone– Hugh Huddy

  13. User preference WebAIM Screen Reader Survey 2008 to 2010* 550% increase in mobile screen reader usage 2 years Advanced screen reader users more likely to use mobile * Not hard research but great anecdotal evidence

  14. Which of the following is your primary mobile platform? (2010)

  15. Which mobile screen reader do you commonly use? (2010)

  16. 21st Century Communications and Video Accessibility Act, USA All smartphones sold in the U.S. must have an accessible web browser by October, 2013 Smartphones will need to be accessible in general Solutions must be free or of "nominal cost”

  17. Separate versions or one fits all? What should you build? Responsive website Adaptive websites Separate websites Let the mobile web learn from the desktop web – www.iheni.com

  18. There is no mobile web. There is only The Web which we view in different ways. There is also no Desktop Web. Or Tablet Web. Thank you Stephen Hay, There is no Mobile Web

  19. Responsive design and accessibility One website across desktop, tablet and mobile which responds to screen size, orientation and environment …a seamless experience …a single accessible code base …consistency But what are the breakpoints?

  20. 3 / Build

  21. No definitive, universally accepted set of mobile accessibility guidelines

  22. Related guidelines Web Content Accessibility Guidelines (WCAG) Mobile Web Best Practices (MWBP) Relationship between WCAG and MWBP Funka.Nu Mobile Accessibility Guidelines Widget Accessibility Guidelines Widget Usability Best Practices Resources for mobile accessibility guidelines – iheni.com

  23. Device guidelines Android Android design Android Accessibility Blackberry Best Practice Designing Accessible Applications iOS: Accessibility Programming Guide Nokia/Symbian: User Experience checklist for Touch and Keypad (PDFs)

  24. Desktop and mobile web Shared principles: Equivalence Progressive enhancement Unobtrusive JavaScript Separation of content and presentation Content order and focus

  25. Agnostic standards and guidelines with device specific techniques

  26. Mobile Accessibility Guidelines & techniques Coming soon

  27. 1 Device capabilities

  28. Accessibility support Content must not break or disable device accessibility settings or assistive technology Web and platform 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

  29. WAI ARIA support Supported Menu bar, buttons, dialog, checkbox, accordion, tabs, auto-complete, panel Partially supported Tooltip (links and form fields not images) Landmarks (read out but not named) Not supported Slider, progress bar, tree, carousel, date picker, tabindex Think HTML first WAI ARIA support on iOS – iheni.com Device capability

  30. WAI ARIA support • iOS 3.2 up – partially supported • Opera Mini 5.0 – partially supported • Opera Mobile 10.0 – partially supported • Android – not supported Source: whencaniuse.com Device capability

  31. 2 Alternatives

  32. Images Provide alternatives for content and functionality: HTML: alt=“Description” iOS: labels, hints and traits Android: android:contentDescription Hide non content and functionality objects: HTML: alt=“” iOS do not ‘Enable Accessibility’ Android do not make focusable via android:focusable Alternatives

  33. Images Alternatives must be appropriate to the purpose or content of the object Assign brief and descriptive labels to all meaningful content Do not describe the type within the alternative (link, button etc) Announce changes of state Localise text The language rotor in iOS Alternatives

  34. iOS objects Label Short word or phrase Describes the object or view i.e. ‘Play’ Does not describe the type i.e. ‘Play button’ Trait Describes the type i.e. link, button, selected, adjustable More than one trait can be used i.e. selected Hint Use sparingly Explanation not a command i.e. ‘Plays video’ not ‘Play video’ Channel 4’s iOS app showing multiple programs with play buttons Alternatives

  35. Consistency Document image alternatives and tooltips Creates a consistent user experience Reinforces branding and ‘look and feel’ for a non visual user Alternatives

  36. 3 Colour

  37. Contrast Do not rely on colour alone to convey information Use blocks of colour rather than vague outlines/shades Use high contrast – but what is good contrast on mobile? WCAG 2.0 MWBP Default Delivery Context Check device specific advice Contrast

  38. Meaning Alternatives for colour must be both visible and readable by voice output Firefox: Mobile Safari: Colour

  39. 4 Links

  40. Grouping Good practice to group related links e.g. images and link text Creates one keypress / touchzone Reduces repetition and clutter Large clickable area Tabindexnot supported i.e. Tabindex=“-1” Use a single link: <a href="…”> <img width="172" height="96" alt="" src=”…images/episode.jpg"> <p>Episode 1…</p> </a> Links

  41. Title and span Title text: Supported on form inputs Not supported in on links Span: Supported on links Not supported on plain text Tested on iOS, IDEAL web reader Android, and Nokia Screen reader support for abbr and span on mobile – iheni.com Links

  42. Skip links Desktop: Sighted keyboard users Some screen reader users Mobile and some tablets: Collapsed navigation Redundant on touch Remove using media queries and JavaScript Skip links on mobile and tablets – iheni.com Links

  43. BBC Global navigation Links

  44. 5 Structure

  45. Semantics All structural elements must be marked up Headings: <h1>to <h6> Lists: <ol>, <ul>, <li> Text: <p> WAI ARIA landmarks Navigation, banner, main, complementry, search, contentinfo Partial support on mobile HTML5 sectioning elements Article, footer, header, nav, aside, section No support on mobile Tip: It’s not possible to code headings in iOS, only container views Structure

  46. ‘Accordion’ structure Should structure be consistent across desktop, tablet and mobile? Not always feasible Not always preferable Potentially verbose Mobile is a different context to Desktop Navigation packed away Content contracts Headings may be removed Landmarks less necessary Structure

  47. Smashing Magazine - Desktop Structure

  48. Tablet - landscape Structure

  49. Mobile Main navigation packed away Landmarksnow redundant (?) Heading structure collapsed Structure

  50. Page titles Ensure page/screen titles are visible iOS YouTube app 1 2 3 Structure

More Related