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.
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 both
context 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
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 alone
Mobile accessibility resources
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 appropriately
Luke 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 labels
1
2
3
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 Keith
Chrome 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 keyboards
Mobile input types – Jack Holmes
12.
13. 6. Structure Annotate wireframes
Content order
Heading / Lists
Containers / Landmarks
Labels
Content order on touch screens
14. 2. More (text, link)
1. BBC (image, link) 3. Search (text input field, butto
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 landmarks
across devices
15. Testing Android 4
Native browser, Chrome and Firefox
Nightly
Talkback and Spielvoice output
Eyes-Free-Keyboard
iPhone 3+ / iPad
Mobile Safari, Chrome
Voiceover
Inverse colours
Talk is cheap – screen reader testing
on mobile Nokia
Native browser
Talks