Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile ux upa


Published on

In this talk give at the Usability Experience Professional's Association I look at where the love is between mobile UX and accessibility, discuss how accessibility originates with design not development, and how it fixes the usability problems you never knew you had.

Published in: Technology, Design
  • Be the first to comment

Mobile ux upa

  1. 1. Mobile UX 4 Accessibility? Henny Swan …accessibility?Henny Swan I
  2. 2. The mobile We’re all disabled on mobile bothcontext physically and mentally Small screens Light / glare Noise Small keyboards / Touch Build in accessibility and you will solve usability issues If you can’t make something accessible go back to the design
  3. 3. /Mobile accessibility originates withdesign and is implemented indevelopment
  4. 4. 1. Colour Contrast WCAG 2.0 (5:1 Level AA) MWBP Default Delivery Context (256 colours minimum) Device specific advice Meaning Use colour to reinforce meaning, not to convey meaning aloneMobile accessibility resources
  5. 5. Desktop - Firefox Mobile - Safari on iPhone
  6. 6. 2. Layout Sizing iPhone - baseline, margins and touch targets are multiples of 44px Touch targets should be 9.2-9.6mm minimally (Neilson) Positioning Provide 1mm inactive space around elements Provide enough read-tap symmetry Position content appropriatelyLuke Wroblewski’s book Mobile First
  7. 7. 3. Navigation Visible navigation cues: Arrows, icons etc to indicate where to select, swipe, tap Signposting: replace back buttons with labels, create page titles, visible labels123
  8. 8. Avoid repeated touchzones and smalltargets (old iPlayer on iPad)
  9. 9. Group touchzones, larger targets,content order (YouTube with VoiceOver on)
  10. 10. 4. Zoom Support pinch zoom No: <meta content=”width=device-width; initial-scale=1.0; maximum- scale=1.0; user-scalable=1;” name=”viewport”> Yes: <meta content=”width=device-width; initial-scale=1.0; maximum- scale=2.0; user-scalable=1;” name=”viewport”> iOS bug: Scale and orientation Jeremy KeithChrome on Android
  11. 11. 5. Input Limit to only what is necessary Name, email, password Limit free input of forms Use menus instead Use the appropriate keyboard - HTML5 forms (iOSand Android) - Map to standard UI keyboardsMobile input types – Jack Holmes
  12. 12. 6. Structure Annotate wireframes Content order Heading / Lists Containers / Landmarks LabelsContent order on touch screens
  13. 13. 2. More (text, link)1. BBC (image, link) 3. Search (text input field, butto4. role="navigation" aria-label="Channels" 6. role=“main” 5. UL, 4 items 7. TV, H1 8. Best of BBC One, H2 9. Live, Our Greatest: At.. (image, text in a single ahref, list item Usable landmarks across devices
  14. 14. Testing Android 4 Native browser, Chrome and Firefox Nightly Talkback and Spielvoice output Eyes-Free-Keyboard iPhone 3+ / iPad Mobile Safari, Chrome Voiceover Inverse coloursTalk is cheap – screen reader testingon mobile Nokia Native browser Talks
  15. 15. /Mobile accessibility doesnt hijackdesign, it solves the problems you neverknew you had
  16. 16. / This is just a snapshotTo be continued…
  17. 17. Mobile and Tablet Accessibility Guidelines & techniques Coming soon
  18. 18. Thank you Henny Swan …accessibility?Henny Swan I