Mobile ux upa
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Mobile ux upa

  • 1,983 views
Uploaded 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......

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.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,983
On Slideshare
1,683
From Embeds
300
Number of Embeds
2

Actions

Shares
Downloads
23
Comments
0
Likes
3

Embeds 300

http://www.iheni.com 296
https://twitter.com 4

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Mobile UX 4 Accessibility? Henny Swan …accessibility?Henny Swan I @iheniIwww.iheni.comIhenny@iheni.com
  • 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. /Mobile accessibility originates withdesign and is implemented indevelopment
  • 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. Desktop - Firefox Mobile - Safari on iPhone
  • 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. 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. Avoid repeated touchzones and smalltargets (old iPlayer on iPad)
  • 9. Group touchzones, larger targets,content order (YouTube with VoiceOver on)
  • 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. 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. 6. Structure Annotate wireframes Content order Heading / Lists Containers / Landmarks LabelsContent order on touch screens
  • 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. 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. /Mobile accessibility doesnt hijackdesign, it solves the problems you neverknew you had
  • 16. / This is just a snapshotTo be continued…
  • 17. Mobile and Tablet Accessibility Guidelines & techniques Coming soon
  • 18. Thank you Henny Swan …accessibility?Henny Swan I @iheniIwww.iheni.comIhenny@iheni.com