Mobile ux upa
-
Upload
henny-swan -
Category
Technology
-
view
123 -
download
0
description
Transcript of Mobile ux upa
Mobile UX 4 Accessibility?
Henny Swan
…accessibility?
Henny Swan I @iheni I www.iheni.com I [email protected]
The mobile context
We’re all disabled on mobile both physically and mentally
Small screensLight / glareNoiseSmall keyboards / Touch
Build in accessibility and you will solve usability issues
If you can’t make something accessible go back to the design
/ Mobile accessibility originates with design and is implemented in development
1. Colour ContrastWCAG 2.0 (5:1 Level AA)MWBP Default Delivery Context (256 colours minimum)Device specific advice
MeaningUse colour to reinforce meaning, not to convey meaning alone
Mobile accessibility resources
Desktop - Firefox
Mobile - Safari on iPhone
2. Layout SizingiPhone - baseline, margins and touch
targets are multiples of 44pxTouch targets should be 9.2-9.6mm minimally (Neilson)
PositioningProvide 1mm inactive space around elementsProvide enough read-tap symmetryPosition content appropriately
Luke Wroblewski’s book Mobile First
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 labels
1
2
3
Avoid repeated touchzones and small targets (old iPlayer on iPad)
Group touchzones, larger targets, content order (YouTube with VoiceOver on)
4. Zoom Support pinch zoomNo:<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
5. Input Limit to only what is necessaryName, email, password
Limit free input of formsUse menus insteadUse the appropriate keyboard - HTML5 forms (iOS and Android) - Map to standard UI keyboards
Mobile input types – Jack Holmes
6. Structure Annotate wireframesContent orderHeading / ListsContainers / LandmarksLabels
Content order on touch screens
1. BBC (image, link)
2. More (text, link)
3. Search (text input field, button)4. 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 landmarksacross devices
Testing Android 4Native browser, Chrome and Firefox NightlyTalkback and Spiel voice outputEyes-Free-Keyboard
iPhone 3+ / iPad Mobile Safari, ChromeVoiceoverInverse colours
NokiaNative browserTalks
Talk is cheap – screen reader testing on mobile
/Mobile accessibility doesn't hijack design, it solves the problems you never knew you had
/ This is just a snapshotTo be continued…
Mobile and Tablet Accessibility Guidelines & techniques
Coming soon