Mobile UX 4 Accessibility?

Henny Swan

…accessibility?

Henny Swan I @iheni I www.iheni.com I henny@iheni.com

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

Thank you

Henny Swan

…accessibility?

Henny Swan I @iheni I www.iheni.com I henny@iheni.com