Mobile UX 4 Accessibility?                 Henny Swan            …accessibility?Henny Swan I @iheniIwww.iheni.comIhenny@ih...
The mobile   We’re all disabled on mobile bothcontext      physically and mentally                Small screens           ...
/Mobile accessibility originates withdesign and is implemented indevelopment
1. Colour                        Contrast                                 WCAG 2.0 (5:1 Level AA)                         ...
Desktop - Firefox Mobile - Safari on iPhone
2. Layout                             Sizing                                      iPhone - baseline, margins and touch    ...
3. Navigation   Visible navigation cues: Arrows, icons etc                   to indicate where to select, swipe, tap      ...
Avoid repeated touchzones and smalltargets (old iPlayer on iPad)
Group touchzones, larger targets,content order (YouTube with VoiceOver on)
4. Zoom           Support pinch zoom                    No:                    <meta content=”width=device-width;         ...
5. Input                           Limit to only what is necessary                                   Name, email, password...
6. Structure                     Annotate wireframes                                 Content order                        ...
2. More (text, link)1. BBC (image, link)                                3. Search (text input field, butto4. role="navigat...
Testing                                 Android 4                                        Native browser, Chrome and Firefo...
/Mobile accessibility doesnt hijackdesign, it solves the problems you neverknew you had
/ This is just a snapshotTo be continued…
Mobile and Tablet Accessibility  Guidelines & techniques           Coming soon
Thank you                 Henny Swan             …accessibility?Henny Swan I @iheniIwww.iheni.comIhenny@iheni.com
Mobile ux upa
Upcoming SlideShare
Loading in...5
×

Mobile ux upa

1,723

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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,723
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
27
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Mobile ux upa

  1. 1. Mobile UX 4 Accessibility? Henny Swan …accessibility?Henny Swan I @iheniIwww.iheni.comIhenny@iheni.com
  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 @iheniIwww.iheni.comIhenny@iheni.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×