Henny Swan @iheni | www.iheni.com | [email protected] Introduc)on to Mobile Accessibility Tuesday, 21 May 13
Aug 17, 2014
Henny13 Swan13 iheni13 |13 wwwihenicom13 |13 hennyihenicom
Introduc)on13 to13 Mobile13 Accessibility
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
You
3
Tuesday 21 May 13
4
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
5
Discovery13 Design13 amp13 Build13
Test13
Tuesday 21 May 13
WhoDisabled13 ageing13 young13 legacy13 techYou
WhatMobile13 web13 RWD13 Apps13 HybridsPlaormsDevices
HowGuidelinesTechnology13 and13 device13 supportTest13 plans
6
DiscoveryDiscovery
Tuesday 21 May 13
Who
7
Tuesday 21 May 13
People13 first13 disability13 secondPeople13 not13 defined13 by13 disabilityPeople13 are13 not13 defined13 by13 assisEve13 techMay13 have13 mulEple13 or13 changing13 impairmentsBeware13 disability13 silos
Design13 for13 different13 acEvity13 flowsI13 am13 a13 first13 Eme13 user13 13 I13 am13 a13 repeat13 userI13 am13 on13 the13 moveI13 am13 task13 focusedI13 am13 on13 the13 sofa
Challenge13 your13 assumpEons13 about13 disabled13 users
8
WhoDiscovery
Tuesday 21 May 13
Design13 for13 disability13 not13 in13 spite13 of13 it
9
WhoDiscovery
Tuesday 21 May 13
10
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
First13 )me13 user
ArheriEsArheriEs
lsquoLean13 backrsquo13 user
Design13 for13 the13 MulEfaceted13 User13 by13 Stephanie13 Troeth
Tuesday 21 May 13
11
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Low13 vision
First13 )me13 user
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Screen13 reader13 userMobility
Travelling
On13 the13 sofa
lsquoLean13 backrsquo13 user
Dexterity
Children
Tuesday 21 May 13
12
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
Dexterity
Children
Cogni)on
Tuesday 21 May 13
13
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
TouchKeyboardD13 Pad
Dexterity
Children
Cogni)on
AppsHybridWeb
MobileTabletTV
WindowsAndroidiOS
Tuesday 21 May 13
Irsquom13 going13 to13 s=ck13 with13 my13 Nokia13 C513 I13 want13 my13 mobile13 to13 be13 something13 thatrsquos13 mobile13 as13 in13 I13 can13 walk13 and13 use13 it13 without13 having13 to13 stop
Hugh13 Huddy13 Nokia13 and13 Talks13 user
14
Tuesday 21 May 13
Flip13 phoneA13 phone13 that13 flips13 open13 and13 answers13 automaEcally13 may13 be13 useful13 for13 blind13 low13 vision13 or13 users13 with13 mobility13 impaired13 users
Monoblock13 13 sEckFor13 people13 with13 arthriEs13 or13 poor13 dexterity13
useful13 to13 avoid13 the13 need13 for13 added13 movements
13 like13 sliding13 or13 flipping13 open13 the13 phone13 to13 use13 it
15
WhoDiscovery
Source13 wwwMobileAccessibilityinfo
Tuesday 21 May 13
Slide13 or13 slipUseful for people with limited or low vision
or who are blind as they will answer
automatically upon sliding open
Touch13 and13 SmartphoneMay13 be13 useful13 to13 people13 who13 are13 deaf13 or13 hard13 of13 hearing13 and13 who13 use13 larger13 screen13 sizes13 for13 texEng13 or13 video13 calling
16
WhoDiscovery
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
You
3
Tuesday 21 May 13
4
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
5
Discovery13 Design13 amp13 Build13
Test13
Tuesday 21 May 13
WhoDisabled13 ageing13 young13 legacy13 techYou
WhatMobile13 web13 RWD13 Apps13 HybridsPlaormsDevices
HowGuidelinesTechnology13 and13 device13 supportTest13 plans
6
DiscoveryDiscovery
Tuesday 21 May 13
Who
7
Tuesday 21 May 13
People13 first13 disability13 secondPeople13 not13 defined13 by13 disabilityPeople13 are13 not13 defined13 by13 assisEve13 techMay13 have13 mulEple13 or13 changing13 impairmentsBeware13 disability13 silos
Design13 for13 different13 acEvity13 flowsI13 am13 a13 first13 Eme13 user13 13 I13 am13 a13 repeat13 userI13 am13 on13 the13 moveI13 am13 task13 focusedI13 am13 on13 the13 sofa
Challenge13 your13 assumpEons13 about13 disabled13 users
8
WhoDiscovery
Tuesday 21 May 13
Design13 for13 disability13 not13 in13 spite13 of13 it
9
WhoDiscovery
Tuesday 21 May 13
10
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
First13 )me13 user
ArheriEsArheriEs
lsquoLean13 backrsquo13 user
Design13 for13 the13 MulEfaceted13 User13 by13 Stephanie13 Troeth
Tuesday 21 May 13
11
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Low13 vision
First13 )me13 user
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Screen13 reader13 userMobility
Travelling
On13 the13 sofa
lsquoLean13 backrsquo13 user
Dexterity
Children
Tuesday 21 May 13
12
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
Dexterity
Children
Cogni)on
Tuesday 21 May 13
13
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
TouchKeyboardD13 Pad
Dexterity
Children
Cogni)on
AppsHybridWeb
MobileTabletTV
WindowsAndroidiOS
Tuesday 21 May 13
Irsquom13 going13 to13 s=ck13 with13 my13 Nokia13 C513 I13 want13 my13 mobile13 to13 be13 something13 thatrsquos13 mobile13 as13 in13 I13 can13 walk13 and13 use13 it13 without13 having13 to13 stop
Hugh13 Huddy13 Nokia13 and13 Talks13 user
14
Tuesday 21 May 13
Flip13 phoneA13 phone13 that13 flips13 open13 and13 answers13 automaEcally13 may13 be13 useful13 for13 blind13 low13 vision13 or13 users13 with13 mobility13 impaired13 users
Monoblock13 13 sEckFor13 people13 with13 arthriEs13 or13 poor13 dexterity13
useful13 to13 avoid13 the13 need13 for13 added13 movements
13 like13 sliding13 or13 flipping13 open13 the13 phone13 to13 use13 it
15
WhoDiscovery
Source13 wwwMobileAccessibilityinfo
Tuesday 21 May 13
Slide13 or13 slipUseful for people with limited or low vision
or who are blind as they will answer
automatically upon sliding open
Touch13 and13 SmartphoneMay13 be13 useful13 to13 people13 who13 are13 deaf13 or13 hard13 of13 hearing13 and13 who13 use13 larger13 screen13 sizes13 for13 texEng13 or13 video13 calling
16
WhoDiscovery
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
You
3
Tuesday 21 May 13
4
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
5
Discovery13 Design13 amp13 Build13
Test13
Tuesday 21 May 13
WhoDisabled13 ageing13 young13 legacy13 techYou
WhatMobile13 web13 RWD13 Apps13 HybridsPlaormsDevices
HowGuidelinesTechnology13 and13 device13 supportTest13 plans
6
DiscoveryDiscovery
Tuesday 21 May 13
Who
7
Tuesday 21 May 13
People13 first13 disability13 secondPeople13 not13 defined13 by13 disabilityPeople13 are13 not13 defined13 by13 assisEve13 techMay13 have13 mulEple13 or13 changing13 impairmentsBeware13 disability13 silos
Design13 for13 different13 acEvity13 flowsI13 am13 a13 first13 Eme13 user13 13 I13 am13 a13 repeat13 userI13 am13 on13 the13 moveI13 am13 task13 focusedI13 am13 on13 the13 sofa
Challenge13 your13 assumpEons13 about13 disabled13 users
8
WhoDiscovery
Tuesday 21 May 13
Design13 for13 disability13 not13 in13 spite13 of13 it
9
WhoDiscovery
Tuesday 21 May 13
10
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
First13 )me13 user
ArheriEsArheriEs
lsquoLean13 backrsquo13 user
Design13 for13 the13 MulEfaceted13 User13 by13 Stephanie13 Troeth
Tuesday 21 May 13
11
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Low13 vision
First13 )me13 user
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Screen13 reader13 userMobility
Travelling
On13 the13 sofa
lsquoLean13 backrsquo13 user
Dexterity
Children
Tuesday 21 May 13
12
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
Dexterity
Children
Cogni)on
Tuesday 21 May 13
13
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
TouchKeyboardD13 Pad
Dexterity
Children
Cogni)on
AppsHybridWeb
MobileTabletTV
WindowsAndroidiOS
Tuesday 21 May 13
Irsquom13 going13 to13 s=ck13 with13 my13 Nokia13 C513 I13 want13 my13 mobile13 to13 be13 something13 thatrsquos13 mobile13 as13 in13 I13 can13 walk13 and13 use13 it13 without13 having13 to13 stop
Hugh13 Huddy13 Nokia13 and13 Talks13 user
14
Tuesday 21 May 13
Flip13 phoneA13 phone13 that13 flips13 open13 and13 answers13 automaEcally13 may13 be13 useful13 for13 blind13 low13 vision13 or13 users13 with13 mobility13 impaired13 users
Monoblock13 13 sEckFor13 people13 with13 arthriEs13 or13 poor13 dexterity13
useful13 to13 avoid13 the13 need13 for13 added13 movements
13 like13 sliding13 or13 flipping13 open13 the13 phone13 to13 use13 it
15
WhoDiscovery
Source13 wwwMobileAccessibilityinfo
Tuesday 21 May 13
Slide13 or13 slipUseful for people with limited or low vision
or who are blind as they will answer
automatically upon sliding open
Touch13 and13 SmartphoneMay13 be13 useful13 to13 people13 who13 are13 deaf13 or13 hard13 of13 hearing13 and13 who13 use13 larger13 screen13 sizes13 for13 texEng13 or13 video13 calling
16
WhoDiscovery
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
You
3
Tuesday 21 May 13
4
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
5
Discovery13 Design13 amp13 Build13
Test13
Tuesday 21 May 13
WhoDisabled13 ageing13 young13 legacy13 techYou
WhatMobile13 web13 RWD13 Apps13 HybridsPlaormsDevices
HowGuidelinesTechnology13 and13 device13 supportTest13 plans
6
DiscoveryDiscovery
Tuesday 21 May 13
Who
7
Tuesday 21 May 13
People13 first13 disability13 secondPeople13 not13 defined13 by13 disabilityPeople13 are13 not13 defined13 by13 assisEve13 techMay13 have13 mulEple13 or13 changing13 impairmentsBeware13 disability13 silos
Design13 for13 different13 acEvity13 flowsI13 am13 a13 first13 Eme13 user13 13 I13 am13 a13 repeat13 userI13 am13 on13 the13 moveI13 am13 task13 focusedI13 am13 on13 the13 sofa
Challenge13 your13 assumpEons13 about13 disabled13 users
8
WhoDiscovery
Tuesday 21 May 13
Design13 for13 disability13 not13 in13 spite13 of13 it
9
WhoDiscovery
Tuesday 21 May 13
10
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
First13 )me13 user
ArheriEsArheriEs
lsquoLean13 backrsquo13 user
Design13 for13 the13 MulEfaceted13 User13 by13 Stephanie13 Troeth
Tuesday 21 May 13
11
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Low13 vision
First13 )me13 user
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Screen13 reader13 userMobility
Travelling
On13 the13 sofa
lsquoLean13 backrsquo13 user
Dexterity
Children
Tuesday 21 May 13
12
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
Dexterity
Children
Cogni)on
Tuesday 21 May 13
13
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
TouchKeyboardD13 Pad
Dexterity
Children
Cogni)on
AppsHybridWeb
MobileTabletTV
WindowsAndroidiOS
Tuesday 21 May 13
Irsquom13 going13 to13 s=ck13 with13 my13 Nokia13 C513 I13 want13 my13 mobile13 to13 be13 something13 thatrsquos13 mobile13 as13 in13 I13 can13 walk13 and13 use13 it13 without13 having13 to13 stop
Hugh13 Huddy13 Nokia13 and13 Talks13 user
14
Tuesday 21 May 13
Flip13 phoneA13 phone13 that13 flips13 open13 and13 answers13 automaEcally13 may13 be13 useful13 for13 blind13 low13 vision13 or13 users13 with13 mobility13 impaired13 users
Monoblock13 13 sEckFor13 people13 with13 arthriEs13 or13 poor13 dexterity13
useful13 to13 avoid13 the13 need13 for13 added13 movements
13 like13 sliding13 or13 flipping13 open13 the13 phone13 to13 use13 it
15
WhoDiscovery
Source13 wwwMobileAccessibilityinfo
Tuesday 21 May 13
Slide13 or13 slipUseful for people with limited or low vision
or who are blind as they will answer
automatically upon sliding open
Touch13 and13 SmartphoneMay13 be13 useful13 to13 people13 who13 are13 deaf13 or13 hard13 of13 hearing13 and13 who13 use13 larger13 screen13 sizes13 for13 texEng13 or13 video13 calling
16
WhoDiscovery
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
You
3
Tuesday 21 May 13
4
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
5
Discovery13 Design13 amp13 Build13
Test13
Tuesday 21 May 13
WhoDisabled13 ageing13 young13 legacy13 techYou
WhatMobile13 web13 RWD13 Apps13 HybridsPlaormsDevices
HowGuidelinesTechnology13 and13 device13 supportTest13 plans
6
DiscoveryDiscovery
Tuesday 21 May 13
Who
7
Tuesday 21 May 13
People13 first13 disability13 secondPeople13 not13 defined13 by13 disabilityPeople13 are13 not13 defined13 by13 assisEve13 techMay13 have13 mulEple13 or13 changing13 impairmentsBeware13 disability13 silos
Design13 for13 different13 acEvity13 flowsI13 am13 a13 first13 Eme13 user13 13 I13 am13 a13 repeat13 userI13 am13 on13 the13 moveI13 am13 task13 focusedI13 am13 on13 the13 sofa
Challenge13 your13 assumpEons13 about13 disabled13 users
8
WhoDiscovery
Tuesday 21 May 13
Design13 for13 disability13 not13 in13 spite13 of13 it
9
WhoDiscovery
Tuesday 21 May 13
10
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
First13 )me13 user
ArheriEsArheriEs
lsquoLean13 backrsquo13 user
Design13 for13 the13 MulEfaceted13 User13 by13 Stephanie13 Troeth
Tuesday 21 May 13
11
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Low13 vision
First13 )me13 user
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Screen13 reader13 userMobility
Travelling
On13 the13 sofa
lsquoLean13 backrsquo13 user
Dexterity
Children
Tuesday 21 May 13
12
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
Dexterity
Children
Cogni)on
Tuesday 21 May 13
13
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
TouchKeyboardD13 Pad
Dexterity
Children
Cogni)on
AppsHybridWeb
MobileTabletTV
WindowsAndroidiOS
Tuesday 21 May 13
Irsquom13 going13 to13 s=ck13 with13 my13 Nokia13 C513 I13 want13 my13 mobile13 to13 be13 something13 thatrsquos13 mobile13 as13 in13 I13 can13 walk13 and13 use13 it13 without13 having13 to13 stop
Hugh13 Huddy13 Nokia13 and13 Talks13 user
14
Tuesday 21 May 13
Flip13 phoneA13 phone13 that13 flips13 open13 and13 answers13 automaEcally13 may13 be13 useful13 for13 blind13 low13 vision13 or13 users13 with13 mobility13 impaired13 users
Monoblock13 13 sEckFor13 people13 with13 arthriEs13 or13 poor13 dexterity13
useful13 to13 avoid13 the13 need13 for13 added13 movements
13 like13 sliding13 or13 flipping13 open13 the13 phone13 to13 use13 it
15
WhoDiscovery
Source13 wwwMobileAccessibilityinfo
Tuesday 21 May 13
Slide13 or13 slipUseful for people with limited or low vision
or who are blind as they will answer
automatically upon sliding open
Touch13 and13 SmartphoneMay13 be13 useful13 to13 people13 who13 are13 deaf13 or13 hard13 of13 hearing13 and13 who13 use13 larger13 screen13 sizes13 for13 texEng13 or13 video13 calling
16
WhoDiscovery
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
You
3
Tuesday 21 May 13
4
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
5
Discovery13 Design13 amp13 Build13
Test13
Tuesday 21 May 13
WhoDisabled13 ageing13 young13 legacy13 techYou
WhatMobile13 web13 RWD13 Apps13 HybridsPlaormsDevices
HowGuidelinesTechnology13 and13 device13 supportTest13 plans
6
DiscoveryDiscovery
Tuesday 21 May 13
Who
7
Tuesday 21 May 13
People13 first13 disability13 secondPeople13 not13 defined13 by13 disabilityPeople13 are13 not13 defined13 by13 assisEve13 techMay13 have13 mulEple13 or13 changing13 impairmentsBeware13 disability13 silos
Design13 for13 different13 acEvity13 flowsI13 am13 a13 first13 Eme13 user13 13 I13 am13 a13 repeat13 userI13 am13 on13 the13 moveI13 am13 task13 focusedI13 am13 on13 the13 sofa
Challenge13 your13 assumpEons13 about13 disabled13 users
8
WhoDiscovery
Tuesday 21 May 13
Design13 for13 disability13 not13 in13 spite13 of13 it
9
WhoDiscovery
Tuesday 21 May 13
10
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
First13 )me13 user
ArheriEsArheriEs
lsquoLean13 backrsquo13 user
Design13 for13 the13 MulEfaceted13 User13 by13 Stephanie13 Troeth
Tuesday 21 May 13
11
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Low13 vision
First13 )me13 user
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Screen13 reader13 userMobility
Travelling
On13 the13 sofa
lsquoLean13 backrsquo13 user
Dexterity
Children
Tuesday 21 May 13
12
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
Dexterity
Children
Cogni)on
Tuesday 21 May 13
13
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
TouchKeyboardD13 Pad
Dexterity
Children
Cogni)on
AppsHybridWeb
MobileTabletTV
WindowsAndroidiOS
Tuesday 21 May 13
Irsquom13 going13 to13 s=ck13 with13 my13 Nokia13 C513 I13 want13 my13 mobile13 to13 be13 something13 thatrsquos13 mobile13 as13 in13 I13 can13 walk13 and13 use13 it13 without13 having13 to13 stop
Hugh13 Huddy13 Nokia13 and13 Talks13 user
14
Tuesday 21 May 13
Flip13 phoneA13 phone13 that13 flips13 open13 and13 answers13 automaEcally13 may13 be13 useful13 for13 blind13 low13 vision13 or13 users13 with13 mobility13 impaired13 users
Monoblock13 13 sEckFor13 people13 with13 arthriEs13 or13 poor13 dexterity13
useful13 to13 avoid13 the13 need13 for13 added13 movements
13 like13 sliding13 or13 flipping13 open13 the13 phone13 to13 use13 it
15
WhoDiscovery
Source13 wwwMobileAccessibilityinfo
Tuesday 21 May 13
Slide13 or13 slipUseful for people with limited or low vision
or who are blind as they will answer
automatically upon sliding open
Touch13 and13 SmartphoneMay13 be13 useful13 to13 people13 who13 are13 deaf13 or13 hard13 of13 hearing13 and13 who13 use13 larger13 screen13 sizes13 for13 texEng13 or13 video13 calling
16
WhoDiscovery
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
You
3
Tuesday 21 May 13
4
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
5
Discovery13 Design13 amp13 Build13
Test13
Tuesday 21 May 13
WhoDisabled13 ageing13 young13 legacy13 techYou
WhatMobile13 web13 RWD13 Apps13 HybridsPlaormsDevices
HowGuidelinesTechnology13 and13 device13 supportTest13 plans
6
DiscoveryDiscovery
Tuesday 21 May 13
Who
7
Tuesday 21 May 13
People13 first13 disability13 secondPeople13 not13 defined13 by13 disabilityPeople13 are13 not13 defined13 by13 assisEve13 techMay13 have13 mulEple13 or13 changing13 impairmentsBeware13 disability13 silos
Design13 for13 different13 acEvity13 flowsI13 am13 a13 first13 Eme13 user13 13 I13 am13 a13 repeat13 userI13 am13 on13 the13 moveI13 am13 task13 focusedI13 am13 on13 the13 sofa
Challenge13 your13 assumpEons13 about13 disabled13 users
8
WhoDiscovery
Tuesday 21 May 13
Design13 for13 disability13 not13 in13 spite13 of13 it
9
WhoDiscovery
Tuesday 21 May 13
10
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
First13 )me13 user
ArheriEsArheriEs
lsquoLean13 backrsquo13 user
Design13 for13 the13 MulEfaceted13 User13 by13 Stephanie13 Troeth
Tuesday 21 May 13
11
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Low13 vision
First13 )me13 user
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Screen13 reader13 userMobility
Travelling
On13 the13 sofa
lsquoLean13 backrsquo13 user
Dexterity
Children
Tuesday 21 May 13
12
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
Dexterity
Children
Cogni)on
Tuesday 21 May 13
13
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
TouchKeyboardD13 Pad
Dexterity
Children
Cogni)on
AppsHybridWeb
MobileTabletTV
WindowsAndroidiOS
Tuesday 21 May 13
Irsquom13 going13 to13 s=ck13 with13 my13 Nokia13 C513 I13 want13 my13 mobile13 to13 be13 something13 thatrsquos13 mobile13 as13 in13 I13 can13 walk13 and13 use13 it13 without13 having13 to13 stop
Hugh13 Huddy13 Nokia13 and13 Talks13 user
14
Tuesday 21 May 13
Flip13 phoneA13 phone13 that13 flips13 open13 and13 answers13 automaEcally13 may13 be13 useful13 for13 blind13 low13 vision13 or13 users13 with13 mobility13 impaired13 users
Monoblock13 13 sEckFor13 people13 with13 arthriEs13 or13 poor13 dexterity13
useful13 to13 avoid13 the13 need13 for13 added13 movements
13 like13 sliding13 or13 flipping13 open13 the13 phone13 to13 use13 it
15
WhoDiscovery
Source13 wwwMobileAccessibilityinfo
Tuesday 21 May 13
Slide13 or13 slipUseful for people with limited or low vision
or who are blind as they will answer
automatically upon sliding open
Touch13 and13 SmartphoneMay13 be13 useful13 to13 people13 who13 are13 deaf13 or13 hard13 of13 hearing13 and13 who13 use13 larger13 screen13 sizes13 for13 texEng13 or13 video13 calling
16
WhoDiscovery
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
You
3
Tuesday 21 May 13
4
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
5
Discovery13 Design13 amp13 Build13
Test13
Tuesday 21 May 13
WhoDisabled13 ageing13 young13 legacy13 techYou
WhatMobile13 web13 RWD13 Apps13 HybridsPlaormsDevices
HowGuidelinesTechnology13 and13 device13 supportTest13 plans
6
DiscoveryDiscovery
Tuesday 21 May 13
Who
7
Tuesday 21 May 13
People13 first13 disability13 secondPeople13 not13 defined13 by13 disabilityPeople13 are13 not13 defined13 by13 assisEve13 techMay13 have13 mulEple13 or13 changing13 impairmentsBeware13 disability13 silos
Design13 for13 different13 acEvity13 flowsI13 am13 a13 first13 Eme13 user13 13 I13 am13 a13 repeat13 userI13 am13 on13 the13 moveI13 am13 task13 focusedI13 am13 on13 the13 sofa
Challenge13 your13 assumpEons13 about13 disabled13 users
8
WhoDiscovery
Tuesday 21 May 13
Design13 for13 disability13 not13 in13 spite13 of13 it
9
WhoDiscovery
Tuesday 21 May 13
10
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
First13 )me13 user
ArheriEsArheriEs
lsquoLean13 backrsquo13 user
Design13 for13 the13 MulEfaceted13 User13 by13 Stephanie13 Troeth
Tuesday 21 May 13
11
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Low13 vision
First13 )me13 user
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Screen13 reader13 userMobility
Travelling
On13 the13 sofa
lsquoLean13 backrsquo13 user
Dexterity
Children
Tuesday 21 May 13
12
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
Dexterity
Children
Cogni)on
Tuesday 21 May 13
13
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
TouchKeyboardD13 Pad
Dexterity
Children
Cogni)on
AppsHybridWeb
MobileTabletTV
WindowsAndroidiOS
Tuesday 21 May 13
Irsquom13 going13 to13 s=ck13 with13 my13 Nokia13 C513 I13 want13 my13 mobile13 to13 be13 something13 thatrsquos13 mobile13 as13 in13 I13 can13 walk13 and13 use13 it13 without13 having13 to13 stop
Hugh13 Huddy13 Nokia13 and13 Talks13 user
14
Tuesday 21 May 13
Flip13 phoneA13 phone13 that13 flips13 open13 and13 answers13 automaEcally13 may13 be13 useful13 for13 blind13 low13 vision13 or13 users13 with13 mobility13 impaired13 users
Monoblock13 13 sEckFor13 people13 with13 arthriEs13 or13 poor13 dexterity13
useful13 to13 avoid13 the13 need13 for13 added13 movements
13 like13 sliding13 or13 flipping13 open13 the13 phone13 to13 use13 it
15
WhoDiscovery
Source13 wwwMobileAccessibilityinfo
Tuesday 21 May 13
Slide13 or13 slipUseful for people with limited or low vision
or who are blind as they will answer
automatically upon sliding open
Touch13 and13 SmartphoneMay13 be13 useful13 to13 people13 who13 are13 deaf13 or13 hard13 of13 hearing13 and13 who13 use13 larger13 screen13 sizes13 for13 texEng13 or13 video13 calling
16
WhoDiscovery
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
You
3
Tuesday 21 May 13
4
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
5
Discovery13 Design13 amp13 Build13
Test13
Tuesday 21 May 13
WhoDisabled13 ageing13 young13 legacy13 techYou
WhatMobile13 web13 RWD13 Apps13 HybridsPlaormsDevices
HowGuidelinesTechnology13 and13 device13 supportTest13 plans
6
DiscoveryDiscovery
Tuesday 21 May 13
Who
7
Tuesday 21 May 13
People13 first13 disability13 secondPeople13 not13 defined13 by13 disabilityPeople13 are13 not13 defined13 by13 assisEve13 techMay13 have13 mulEple13 or13 changing13 impairmentsBeware13 disability13 silos
Design13 for13 different13 acEvity13 flowsI13 am13 a13 first13 Eme13 user13 13 I13 am13 a13 repeat13 userI13 am13 on13 the13 moveI13 am13 task13 focusedI13 am13 on13 the13 sofa
Challenge13 your13 assumpEons13 about13 disabled13 users
8
WhoDiscovery
Tuesday 21 May 13
Design13 for13 disability13 not13 in13 spite13 of13 it
9
WhoDiscovery
Tuesday 21 May 13
10
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
First13 )me13 user
ArheriEsArheriEs
lsquoLean13 backrsquo13 user
Design13 for13 the13 MulEfaceted13 User13 by13 Stephanie13 Troeth
Tuesday 21 May 13
11
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Low13 vision
First13 )me13 user
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Screen13 reader13 userMobility
Travelling
On13 the13 sofa
lsquoLean13 backrsquo13 user
Dexterity
Children
Tuesday 21 May 13
12
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
Dexterity
Children
Cogni)on
Tuesday 21 May 13
13
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
TouchKeyboardD13 Pad
Dexterity
Children
Cogni)on
AppsHybridWeb
MobileTabletTV
WindowsAndroidiOS
Tuesday 21 May 13
Irsquom13 going13 to13 s=ck13 with13 my13 Nokia13 C513 I13 want13 my13 mobile13 to13 be13 something13 thatrsquos13 mobile13 as13 in13 I13 can13 walk13 and13 use13 it13 without13 having13 to13 stop
Hugh13 Huddy13 Nokia13 and13 Talks13 user
14
Tuesday 21 May 13
Flip13 phoneA13 phone13 that13 flips13 open13 and13 answers13 automaEcally13 may13 be13 useful13 for13 blind13 low13 vision13 or13 users13 with13 mobility13 impaired13 users
Monoblock13 13 sEckFor13 people13 with13 arthriEs13 or13 poor13 dexterity13
useful13 to13 avoid13 the13 need13 for13 added13 movements
13 like13 sliding13 or13 flipping13 open13 the13 phone13 to13 use13 it
15
WhoDiscovery
Source13 wwwMobileAccessibilityinfo
Tuesday 21 May 13
Slide13 or13 slipUseful for people with limited or low vision
or who are blind as they will answer
automatically upon sliding open
Touch13 and13 SmartphoneMay13 be13 useful13 to13 people13 who13 are13 deaf13 or13 hard13 of13 hearing13 and13 who13 use13 larger13 screen13 sizes13 for13 texEng13 or13 video13 calling
16
WhoDiscovery
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
You
3
Tuesday 21 May 13
4
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
5
Discovery13 Design13 amp13 Build13
Test13
Tuesday 21 May 13
WhoDisabled13 ageing13 young13 legacy13 techYou
WhatMobile13 web13 RWD13 Apps13 HybridsPlaormsDevices
HowGuidelinesTechnology13 and13 device13 supportTest13 plans
6
DiscoveryDiscovery
Tuesday 21 May 13
Who
7
Tuesday 21 May 13
People13 first13 disability13 secondPeople13 not13 defined13 by13 disabilityPeople13 are13 not13 defined13 by13 assisEve13 techMay13 have13 mulEple13 or13 changing13 impairmentsBeware13 disability13 silos
Design13 for13 different13 acEvity13 flowsI13 am13 a13 first13 Eme13 user13 13 I13 am13 a13 repeat13 userI13 am13 on13 the13 moveI13 am13 task13 focusedI13 am13 on13 the13 sofa
Challenge13 your13 assumpEons13 about13 disabled13 users
8
WhoDiscovery
Tuesday 21 May 13
Design13 for13 disability13 not13 in13 spite13 of13 it
9
WhoDiscovery
Tuesday 21 May 13
10
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
First13 )me13 user
ArheriEsArheriEs
lsquoLean13 backrsquo13 user
Design13 for13 the13 MulEfaceted13 User13 by13 Stephanie13 Troeth
Tuesday 21 May 13
11
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Low13 vision
First13 )me13 user
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Screen13 reader13 userMobility
Travelling
On13 the13 sofa
lsquoLean13 backrsquo13 user
Dexterity
Children
Tuesday 21 May 13
12
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
Dexterity
Children
Cogni)on
Tuesday 21 May 13
13
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
TouchKeyboardD13 Pad
Dexterity
Children
Cogni)on
AppsHybridWeb
MobileTabletTV
WindowsAndroidiOS
Tuesday 21 May 13
Irsquom13 going13 to13 s=ck13 with13 my13 Nokia13 C513 I13 want13 my13 mobile13 to13 be13 something13 thatrsquos13 mobile13 as13 in13 I13 can13 walk13 and13 use13 it13 without13 having13 to13 stop
Hugh13 Huddy13 Nokia13 and13 Talks13 user
14
Tuesday 21 May 13
Flip13 phoneA13 phone13 that13 flips13 open13 and13 answers13 automaEcally13 may13 be13 useful13 for13 blind13 low13 vision13 or13 users13 with13 mobility13 impaired13 users
Monoblock13 13 sEckFor13 people13 with13 arthriEs13 or13 poor13 dexterity13
useful13 to13 avoid13 the13 need13 for13 added13 movements
13 like13 sliding13 or13 flipping13 open13 the13 phone13 to13 use13 it
15
WhoDiscovery
Source13 wwwMobileAccessibilityinfo
Tuesday 21 May 13
Slide13 or13 slipUseful for people with limited or low vision
or who are blind as they will answer
automatically upon sliding open
Touch13 and13 SmartphoneMay13 be13 useful13 to13 people13 who13 are13 deaf13 or13 hard13 of13 hearing13 and13 who13 use13 larger13 screen13 sizes13 for13 texEng13 or13 video13 calling
16
WhoDiscovery
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
You
3
Tuesday 21 May 13
4
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
5
Discovery13 Design13 amp13 Build13
Test13
Tuesday 21 May 13
WhoDisabled13 ageing13 young13 legacy13 techYou
WhatMobile13 web13 RWD13 Apps13 HybridsPlaormsDevices
HowGuidelinesTechnology13 and13 device13 supportTest13 plans
6
DiscoveryDiscovery
Tuesday 21 May 13
Who
7
Tuesday 21 May 13
People13 first13 disability13 secondPeople13 not13 defined13 by13 disabilityPeople13 are13 not13 defined13 by13 assisEve13 techMay13 have13 mulEple13 or13 changing13 impairmentsBeware13 disability13 silos
Design13 for13 different13 acEvity13 flowsI13 am13 a13 first13 Eme13 user13 13 I13 am13 a13 repeat13 userI13 am13 on13 the13 moveI13 am13 task13 focusedI13 am13 on13 the13 sofa
Challenge13 your13 assumpEons13 about13 disabled13 users
8
WhoDiscovery
Tuesday 21 May 13
Design13 for13 disability13 not13 in13 spite13 of13 it
9
WhoDiscovery
Tuesday 21 May 13
10
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
First13 )me13 user
ArheriEsArheriEs
lsquoLean13 backrsquo13 user
Design13 for13 the13 MulEfaceted13 User13 by13 Stephanie13 Troeth
Tuesday 21 May 13
11
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Low13 vision
First13 )me13 user
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Screen13 reader13 userMobility
Travelling
On13 the13 sofa
lsquoLean13 backrsquo13 user
Dexterity
Children
Tuesday 21 May 13
12
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
Dexterity
Children
Cogni)on
Tuesday 21 May 13
13
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
TouchKeyboardD13 Pad
Dexterity
Children
Cogni)on
AppsHybridWeb
MobileTabletTV
WindowsAndroidiOS
Tuesday 21 May 13
Irsquom13 going13 to13 s=ck13 with13 my13 Nokia13 C513 I13 want13 my13 mobile13 to13 be13 something13 thatrsquos13 mobile13 as13 in13 I13 can13 walk13 and13 use13 it13 without13 having13 to13 stop
Hugh13 Huddy13 Nokia13 and13 Talks13 user
14
Tuesday 21 May 13
Flip13 phoneA13 phone13 that13 flips13 open13 and13 answers13 automaEcally13 may13 be13 useful13 for13 blind13 low13 vision13 or13 users13 with13 mobility13 impaired13 users
Monoblock13 13 sEckFor13 people13 with13 arthriEs13 or13 poor13 dexterity13
useful13 to13 avoid13 the13 need13 for13 added13 movements
13 like13 sliding13 or13 flipping13 open13 the13 phone13 to13 use13 it
15
WhoDiscovery
Source13 wwwMobileAccessibilityinfo
Tuesday 21 May 13
Slide13 or13 slipUseful for people with limited or low vision
or who are blind as they will answer
automatically upon sliding open
Touch13 and13 SmartphoneMay13 be13 useful13 to13 people13 who13 are13 deaf13 or13 hard13 of13 hearing13 and13 who13 use13 larger13 screen13 sizes13 for13 texEng13 or13 video13 calling
16
WhoDiscovery
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Me
2
Tuesday 21 May 13
You
3
Tuesday 21 May 13
4
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
5
Discovery13 Design13 amp13 Build13
Test13
Tuesday 21 May 13
WhoDisabled13 ageing13 young13 legacy13 techYou
WhatMobile13 web13 RWD13 Apps13 HybridsPlaormsDevices
HowGuidelinesTechnology13 and13 device13 supportTest13 plans
6
DiscoveryDiscovery
Tuesday 21 May 13
Who
7
Tuesday 21 May 13
People13 first13 disability13 secondPeople13 not13 defined13 by13 disabilityPeople13 are13 not13 defined13 by13 assisEve13 techMay13 have13 mulEple13 or13 changing13 impairmentsBeware13 disability13 silos
Design13 for13 different13 acEvity13 flowsI13 am13 a13 first13 Eme13 user13 13 I13 am13 a13 repeat13 userI13 am13 on13 the13 moveI13 am13 task13 focusedI13 am13 on13 the13 sofa
Challenge13 your13 assumpEons13 about13 disabled13 users
8
WhoDiscovery
Tuesday 21 May 13
Design13 for13 disability13 not13 in13 spite13 of13 it
9
WhoDiscovery
Tuesday 21 May 13
10
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
First13 )me13 user
ArheriEsArheriEs
lsquoLean13 backrsquo13 user
Design13 for13 the13 MulEfaceted13 User13 by13 Stephanie13 Troeth
Tuesday 21 May 13
11
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Low13 vision
First13 )me13 user
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Screen13 reader13 userMobility
Travelling
On13 the13 sofa
lsquoLean13 backrsquo13 user
Dexterity
Children
Tuesday 21 May 13
12
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
Dexterity
Children
Cogni)on
Tuesday 21 May 13
13
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
TouchKeyboardD13 Pad
Dexterity
Children
Cogni)on
AppsHybridWeb
MobileTabletTV
WindowsAndroidiOS
Tuesday 21 May 13
Irsquom13 going13 to13 s=ck13 with13 my13 Nokia13 C513 I13 want13 my13 mobile13 to13 be13 something13 thatrsquos13 mobile13 as13 in13 I13 can13 walk13 and13 use13 it13 without13 having13 to13 stop
Hugh13 Huddy13 Nokia13 and13 Talks13 user
14
Tuesday 21 May 13
Flip13 phoneA13 phone13 that13 flips13 open13 and13 answers13 automaEcally13 may13 be13 useful13 for13 blind13 low13 vision13 or13 users13 with13 mobility13 impaired13 users
Monoblock13 13 sEckFor13 people13 with13 arthriEs13 or13 poor13 dexterity13
useful13 to13 avoid13 the13 need13 for13 added13 movements
13 like13 sliding13 or13 flipping13 open13 the13 phone13 to13 use13 it
15
WhoDiscovery
Source13 wwwMobileAccessibilityinfo
Tuesday 21 May 13
Slide13 or13 slipUseful for people with limited or low vision
or who are blind as they will answer
automatically upon sliding open
Touch13 and13 SmartphoneMay13 be13 useful13 to13 people13 who13 are13 deaf13 or13 hard13 of13 hearing13 and13 who13 use13 larger13 screen13 sizes13 for13 texEng13 or13 video13 calling
16
WhoDiscovery
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
You
3
Tuesday 21 May 13
4
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
5
Discovery13 Design13 amp13 Build13
Test13
Tuesday 21 May 13
WhoDisabled13 ageing13 young13 legacy13 techYou
WhatMobile13 web13 RWD13 Apps13 HybridsPlaormsDevices
HowGuidelinesTechnology13 and13 device13 supportTest13 plans
6
DiscoveryDiscovery
Tuesday 21 May 13
Who
7
Tuesday 21 May 13
People13 first13 disability13 secondPeople13 not13 defined13 by13 disabilityPeople13 are13 not13 defined13 by13 assisEve13 techMay13 have13 mulEple13 or13 changing13 impairmentsBeware13 disability13 silos
Design13 for13 different13 acEvity13 flowsI13 am13 a13 first13 Eme13 user13 13 I13 am13 a13 repeat13 userI13 am13 on13 the13 moveI13 am13 task13 focusedI13 am13 on13 the13 sofa
Challenge13 your13 assumpEons13 about13 disabled13 users
8
WhoDiscovery
Tuesday 21 May 13
Design13 for13 disability13 not13 in13 spite13 of13 it
9
WhoDiscovery
Tuesday 21 May 13
10
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
First13 )me13 user
ArheriEsArheriEs
lsquoLean13 backrsquo13 user
Design13 for13 the13 MulEfaceted13 User13 by13 Stephanie13 Troeth
Tuesday 21 May 13
11
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Low13 vision
First13 )me13 user
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Screen13 reader13 userMobility
Travelling
On13 the13 sofa
lsquoLean13 backrsquo13 user
Dexterity
Children
Tuesday 21 May 13
12
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
Dexterity
Children
Cogni)on
Tuesday 21 May 13
13
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
TouchKeyboardD13 Pad
Dexterity
Children
Cogni)on
AppsHybridWeb
MobileTabletTV
WindowsAndroidiOS
Tuesday 21 May 13
Irsquom13 going13 to13 s=ck13 with13 my13 Nokia13 C513 I13 want13 my13 mobile13 to13 be13 something13 thatrsquos13 mobile13 as13 in13 I13 can13 walk13 and13 use13 it13 without13 having13 to13 stop
Hugh13 Huddy13 Nokia13 and13 Talks13 user
14
Tuesday 21 May 13
Flip13 phoneA13 phone13 that13 flips13 open13 and13 answers13 automaEcally13 may13 be13 useful13 for13 blind13 low13 vision13 or13 users13 with13 mobility13 impaired13 users
Monoblock13 13 sEckFor13 people13 with13 arthriEs13 or13 poor13 dexterity13
useful13 to13 avoid13 the13 need13 for13 added13 movements
13 like13 sliding13 or13 flipping13 open13 the13 phone13 to13 use13 it
15
WhoDiscovery
Source13 wwwMobileAccessibilityinfo
Tuesday 21 May 13
Slide13 or13 slipUseful for people with limited or low vision
or who are blind as they will answer
automatically upon sliding open
Touch13 and13 SmartphoneMay13 be13 useful13 to13 people13 who13 are13 deaf13 or13 hard13 of13 hearing13 and13 who13 use13 larger13 screen13 sizes13 for13 texEng13 or13 video13 calling
16
WhoDiscovery
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
4
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
5
Discovery13 Design13 amp13 Build13
Test13
Tuesday 21 May 13
WhoDisabled13 ageing13 young13 legacy13 techYou
WhatMobile13 web13 RWD13 Apps13 HybridsPlaormsDevices
HowGuidelinesTechnology13 and13 device13 supportTest13 plans
6
DiscoveryDiscovery
Tuesday 21 May 13
Who
7
Tuesday 21 May 13
People13 first13 disability13 secondPeople13 not13 defined13 by13 disabilityPeople13 are13 not13 defined13 by13 assisEve13 techMay13 have13 mulEple13 or13 changing13 impairmentsBeware13 disability13 silos
Design13 for13 different13 acEvity13 flowsI13 am13 a13 first13 Eme13 user13 13 I13 am13 a13 repeat13 userI13 am13 on13 the13 moveI13 am13 task13 focusedI13 am13 on13 the13 sofa
Challenge13 your13 assumpEons13 about13 disabled13 users
8
WhoDiscovery
Tuesday 21 May 13
Design13 for13 disability13 not13 in13 spite13 of13 it
9
WhoDiscovery
Tuesday 21 May 13
10
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
First13 )me13 user
ArheriEsArheriEs
lsquoLean13 backrsquo13 user
Design13 for13 the13 MulEfaceted13 User13 by13 Stephanie13 Troeth
Tuesday 21 May 13
11
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Low13 vision
First13 )me13 user
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Screen13 reader13 userMobility
Travelling
On13 the13 sofa
lsquoLean13 backrsquo13 user
Dexterity
Children
Tuesday 21 May 13
12
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
Dexterity
Children
Cogni)on
Tuesday 21 May 13
13
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
TouchKeyboardD13 Pad
Dexterity
Children
Cogni)on
AppsHybridWeb
MobileTabletTV
WindowsAndroidiOS
Tuesday 21 May 13
Irsquom13 going13 to13 s=ck13 with13 my13 Nokia13 C513 I13 want13 my13 mobile13 to13 be13 something13 thatrsquos13 mobile13 as13 in13 I13 can13 walk13 and13 use13 it13 without13 having13 to13 stop
Hugh13 Huddy13 Nokia13 and13 Talks13 user
14
Tuesday 21 May 13
Flip13 phoneA13 phone13 that13 flips13 open13 and13 answers13 automaEcally13 may13 be13 useful13 for13 blind13 low13 vision13 or13 users13 with13 mobility13 impaired13 users
Monoblock13 13 sEckFor13 people13 with13 arthriEs13 or13 poor13 dexterity13
useful13 to13 avoid13 the13 need13 for13 added13 movements
13 like13 sliding13 or13 flipping13 open13 the13 phone13 to13 use13 it
15
WhoDiscovery
Source13 wwwMobileAccessibilityinfo
Tuesday 21 May 13
Slide13 or13 slipUseful for people with limited or low vision
or who are blind as they will answer
automatically upon sliding open
Touch13 and13 SmartphoneMay13 be13 useful13 to13 people13 who13 are13 deaf13 or13 hard13 of13 hearing13 and13 who13 use13 larger13 screen13 sizes13 for13 texEng13 or13 video13 calling
16
WhoDiscovery
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
5
Discovery13 Design13 amp13 Build13
Test13
Tuesday 21 May 13
WhoDisabled13 ageing13 young13 legacy13 techYou
WhatMobile13 web13 RWD13 Apps13 HybridsPlaormsDevices
HowGuidelinesTechnology13 and13 device13 supportTest13 plans
6
DiscoveryDiscovery
Tuesday 21 May 13
Who
7
Tuesday 21 May 13
People13 first13 disability13 secondPeople13 not13 defined13 by13 disabilityPeople13 are13 not13 defined13 by13 assisEve13 techMay13 have13 mulEple13 or13 changing13 impairmentsBeware13 disability13 silos
Design13 for13 different13 acEvity13 flowsI13 am13 a13 first13 Eme13 user13 13 I13 am13 a13 repeat13 userI13 am13 on13 the13 moveI13 am13 task13 focusedI13 am13 on13 the13 sofa
Challenge13 your13 assumpEons13 about13 disabled13 users
8
WhoDiscovery
Tuesday 21 May 13
Design13 for13 disability13 not13 in13 spite13 of13 it
9
WhoDiscovery
Tuesday 21 May 13
10
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
First13 )me13 user
ArheriEsArheriEs
lsquoLean13 backrsquo13 user
Design13 for13 the13 MulEfaceted13 User13 by13 Stephanie13 Troeth
Tuesday 21 May 13
11
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Low13 vision
First13 )me13 user
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Screen13 reader13 userMobility
Travelling
On13 the13 sofa
lsquoLean13 backrsquo13 user
Dexterity
Children
Tuesday 21 May 13
12
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
Dexterity
Children
Cogni)on
Tuesday 21 May 13
13
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
TouchKeyboardD13 Pad
Dexterity
Children
Cogni)on
AppsHybridWeb
MobileTabletTV
WindowsAndroidiOS
Tuesday 21 May 13
Irsquom13 going13 to13 s=ck13 with13 my13 Nokia13 C513 I13 want13 my13 mobile13 to13 be13 something13 thatrsquos13 mobile13 as13 in13 I13 can13 walk13 and13 use13 it13 without13 having13 to13 stop
Hugh13 Huddy13 Nokia13 and13 Talks13 user
14
Tuesday 21 May 13
Flip13 phoneA13 phone13 that13 flips13 open13 and13 answers13 automaEcally13 may13 be13 useful13 for13 blind13 low13 vision13 or13 users13 with13 mobility13 impaired13 users
Monoblock13 13 sEckFor13 people13 with13 arthriEs13 or13 poor13 dexterity13
useful13 to13 avoid13 the13 need13 for13 added13 movements
13 like13 sliding13 or13 flipping13 open13 the13 phone13 to13 use13 it
15
WhoDiscovery
Source13 wwwMobileAccessibilityinfo
Tuesday 21 May 13
Slide13 or13 slipUseful for people with limited or low vision
or who are blind as they will answer
automatically upon sliding open
Touch13 and13 SmartphoneMay13 be13 useful13 to13 people13 who13 are13 deaf13 or13 hard13 of13 hearing13 and13 who13 use13 larger13 screen13 sizes13 for13 texEng13 or13 video13 calling
16
WhoDiscovery
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
WhoDisabled13 ageing13 young13 legacy13 techYou
WhatMobile13 web13 RWD13 Apps13 HybridsPlaormsDevices
HowGuidelinesTechnology13 and13 device13 supportTest13 plans
6
DiscoveryDiscovery
Tuesday 21 May 13
Who
7
Tuesday 21 May 13
People13 first13 disability13 secondPeople13 not13 defined13 by13 disabilityPeople13 are13 not13 defined13 by13 assisEve13 techMay13 have13 mulEple13 or13 changing13 impairmentsBeware13 disability13 silos
Design13 for13 different13 acEvity13 flowsI13 am13 a13 first13 Eme13 user13 13 I13 am13 a13 repeat13 userI13 am13 on13 the13 moveI13 am13 task13 focusedI13 am13 on13 the13 sofa
Challenge13 your13 assumpEons13 about13 disabled13 users
8
WhoDiscovery
Tuesday 21 May 13
Design13 for13 disability13 not13 in13 spite13 of13 it
9
WhoDiscovery
Tuesday 21 May 13
10
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
First13 )me13 user
ArheriEsArheriEs
lsquoLean13 backrsquo13 user
Design13 for13 the13 MulEfaceted13 User13 by13 Stephanie13 Troeth
Tuesday 21 May 13
11
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Low13 vision
First13 )me13 user
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Screen13 reader13 userMobility
Travelling
On13 the13 sofa
lsquoLean13 backrsquo13 user
Dexterity
Children
Tuesday 21 May 13
12
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
Dexterity
Children
Cogni)on
Tuesday 21 May 13
13
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
TouchKeyboardD13 Pad
Dexterity
Children
Cogni)on
AppsHybridWeb
MobileTabletTV
WindowsAndroidiOS
Tuesday 21 May 13
Irsquom13 going13 to13 s=ck13 with13 my13 Nokia13 C513 I13 want13 my13 mobile13 to13 be13 something13 thatrsquos13 mobile13 as13 in13 I13 can13 walk13 and13 use13 it13 without13 having13 to13 stop
Hugh13 Huddy13 Nokia13 and13 Talks13 user
14
Tuesday 21 May 13
Flip13 phoneA13 phone13 that13 flips13 open13 and13 answers13 automaEcally13 may13 be13 useful13 for13 blind13 low13 vision13 or13 users13 with13 mobility13 impaired13 users
Monoblock13 13 sEckFor13 people13 with13 arthriEs13 or13 poor13 dexterity13
useful13 to13 avoid13 the13 need13 for13 added13 movements
13 like13 sliding13 or13 flipping13 open13 the13 phone13 to13 use13 it
15
WhoDiscovery
Source13 wwwMobileAccessibilityinfo
Tuesday 21 May 13
Slide13 or13 slipUseful for people with limited or low vision
or who are blind as they will answer
automatically upon sliding open
Touch13 and13 SmartphoneMay13 be13 useful13 to13 people13 who13 are13 deaf13 or13 hard13 of13 hearing13 and13 who13 use13 larger13 screen13 sizes13 for13 texEng13 or13 video13 calling
16
WhoDiscovery
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Who
7
Tuesday 21 May 13
People13 first13 disability13 secondPeople13 not13 defined13 by13 disabilityPeople13 are13 not13 defined13 by13 assisEve13 techMay13 have13 mulEple13 or13 changing13 impairmentsBeware13 disability13 silos
Design13 for13 different13 acEvity13 flowsI13 am13 a13 first13 Eme13 user13 13 I13 am13 a13 repeat13 userI13 am13 on13 the13 moveI13 am13 task13 focusedI13 am13 on13 the13 sofa
Challenge13 your13 assumpEons13 about13 disabled13 users
8
WhoDiscovery
Tuesday 21 May 13
Design13 for13 disability13 not13 in13 spite13 of13 it
9
WhoDiscovery
Tuesday 21 May 13
10
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
First13 )me13 user
ArheriEsArheriEs
lsquoLean13 backrsquo13 user
Design13 for13 the13 MulEfaceted13 User13 by13 Stephanie13 Troeth
Tuesday 21 May 13
11
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Low13 vision
First13 )me13 user
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Screen13 reader13 userMobility
Travelling
On13 the13 sofa
lsquoLean13 backrsquo13 user
Dexterity
Children
Tuesday 21 May 13
12
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
Dexterity
Children
Cogni)on
Tuesday 21 May 13
13
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
TouchKeyboardD13 Pad
Dexterity
Children
Cogni)on
AppsHybridWeb
MobileTabletTV
WindowsAndroidiOS
Tuesday 21 May 13
Irsquom13 going13 to13 s=ck13 with13 my13 Nokia13 C513 I13 want13 my13 mobile13 to13 be13 something13 thatrsquos13 mobile13 as13 in13 I13 can13 walk13 and13 use13 it13 without13 having13 to13 stop
Hugh13 Huddy13 Nokia13 and13 Talks13 user
14
Tuesday 21 May 13
Flip13 phoneA13 phone13 that13 flips13 open13 and13 answers13 automaEcally13 may13 be13 useful13 for13 blind13 low13 vision13 or13 users13 with13 mobility13 impaired13 users
Monoblock13 13 sEckFor13 people13 with13 arthriEs13 or13 poor13 dexterity13
useful13 to13 avoid13 the13 need13 for13 added13 movements
13 like13 sliding13 or13 flipping13 open13 the13 phone13 to13 use13 it
15
WhoDiscovery
Source13 wwwMobileAccessibilityinfo
Tuesday 21 May 13
Slide13 or13 slipUseful for people with limited or low vision
or who are blind as they will answer
automatically upon sliding open
Touch13 and13 SmartphoneMay13 be13 useful13 to13 people13 who13 are13 deaf13 or13 hard13 of13 hearing13 and13 who13 use13 larger13 screen13 sizes13 for13 texEng13 or13 video13 calling
16
WhoDiscovery
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
People13 first13 disability13 secondPeople13 not13 defined13 by13 disabilityPeople13 are13 not13 defined13 by13 assisEve13 techMay13 have13 mulEple13 or13 changing13 impairmentsBeware13 disability13 silos
Design13 for13 different13 acEvity13 flowsI13 am13 a13 first13 Eme13 user13 13 I13 am13 a13 repeat13 userI13 am13 on13 the13 moveI13 am13 task13 focusedI13 am13 on13 the13 sofa
Challenge13 your13 assumpEons13 about13 disabled13 users
8
WhoDiscovery
Tuesday 21 May 13
Design13 for13 disability13 not13 in13 spite13 of13 it
9
WhoDiscovery
Tuesday 21 May 13
10
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
First13 )me13 user
ArheriEsArheriEs
lsquoLean13 backrsquo13 user
Design13 for13 the13 MulEfaceted13 User13 by13 Stephanie13 Troeth
Tuesday 21 May 13
11
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Low13 vision
First13 )me13 user
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Screen13 reader13 userMobility
Travelling
On13 the13 sofa
lsquoLean13 backrsquo13 user
Dexterity
Children
Tuesday 21 May 13
12
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
Dexterity
Children
Cogni)on
Tuesday 21 May 13
13
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
TouchKeyboardD13 Pad
Dexterity
Children
Cogni)on
AppsHybridWeb
MobileTabletTV
WindowsAndroidiOS
Tuesday 21 May 13
Irsquom13 going13 to13 s=ck13 with13 my13 Nokia13 C513 I13 want13 my13 mobile13 to13 be13 something13 thatrsquos13 mobile13 as13 in13 I13 can13 walk13 and13 use13 it13 without13 having13 to13 stop
Hugh13 Huddy13 Nokia13 and13 Talks13 user
14
Tuesday 21 May 13
Flip13 phoneA13 phone13 that13 flips13 open13 and13 answers13 automaEcally13 may13 be13 useful13 for13 blind13 low13 vision13 or13 users13 with13 mobility13 impaired13 users
Monoblock13 13 sEckFor13 people13 with13 arthriEs13 or13 poor13 dexterity13
useful13 to13 avoid13 the13 need13 for13 added13 movements
13 like13 sliding13 or13 flipping13 open13 the13 phone13 to13 use13 it
15
WhoDiscovery
Source13 wwwMobileAccessibilityinfo
Tuesday 21 May 13
Slide13 or13 slipUseful for people with limited or low vision
or who are blind as they will answer
automatically upon sliding open
Touch13 and13 SmartphoneMay13 be13 useful13 to13 people13 who13 are13 deaf13 or13 hard13 of13 hearing13 and13 who13 use13 larger13 screen13 sizes13 for13 texEng13 or13 video13 calling
16
WhoDiscovery
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Design13 for13 disability13 not13 in13 spite13 of13 it
9
WhoDiscovery
Tuesday 21 May 13
10
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
First13 )me13 user
ArheriEsArheriEs
lsquoLean13 backrsquo13 user
Design13 for13 the13 MulEfaceted13 User13 by13 Stephanie13 Troeth
Tuesday 21 May 13
11
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Low13 vision
First13 )me13 user
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Screen13 reader13 userMobility
Travelling
On13 the13 sofa
lsquoLean13 backrsquo13 user
Dexterity
Children
Tuesday 21 May 13
12
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
Dexterity
Children
Cogni)on
Tuesday 21 May 13
13
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
TouchKeyboardD13 Pad
Dexterity
Children
Cogni)on
AppsHybridWeb
MobileTabletTV
WindowsAndroidiOS
Tuesday 21 May 13
Irsquom13 going13 to13 s=ck13 with13 my13 Nokia13 C513 I13 want13 my13 mobile13 to13 be13 something13 thatrsquos13 mobile13 as13 in13 I13 can13 walk13 and13 use13 it13 without13 having13 to13 stop
Hugh13 Huddy13 Nokia13 and13 Talks13 user
14
Tuesday 21 May 13
Flip13 phoneA13 phone13 that13 flips13 open13 and13 answers13 automaEcally13 may13 be13 useful13 for13 blind13 low13 vision13 or13 users13 with13 mobility13 impaired13 users
Monoblock13 13 sEckFor13 people13 with13 arthriEs13 or13 poor13 dexterity13
useful13 to13 avoid13 the13 need13 for13 added13 movements
13 like13 sliding13 or13 flipping13 open13 the13 phone13 to13 use13 it
15
WhoDiscovery
Source13 wwwMobileAccessibilityinfo
Tuesday 21 May 13
Slide13 or13 slipUseful for people with limited or low vision
or who are blind as they will answer
automatically upon sliding open
Touch13 and13 SmartphoneMay13 be13 useful13 to13 people13 who13 are13 deaf13 or13 hard13 of13 hearing13 and13 who13 use13 larger13 screen13 sizes13 for13 texEng13 or13 video13 calling
16
WhoDiscovery
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
10
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
First13 )me13 user
ArheriEsArheriEs
lsquoLean13 backrsquo13 user
Design13 for13 the13 MulEfaceted13 User13 by13 Stephanie13 Troeth
Tuesday 21 May 13
11
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Low13 vision
First13 )me13 user
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Screen13 reader13 userMobility
Travelling
On13 the13 sofa
lsquoLean13 backrsquo13 user
Dexterity
Children
Tuesday 21 May 13
12
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
Dexterity
Children
Cogni)on
Tuesday 21 May 13
13
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
TouchKeyboardD13 Pad
Dexterity
Children
Cogni)on
AppsHybridWeb
MobileTabletTV
WindowsAndroidiOS
Tuesday 21 May 13
Irsquom13 going13 to13 s=ck13 with13 my13 Nokia13 C513 I13 want13 my13 mobile13 to13 be13 something13 thatrsquos13 mobile13 as13 in13 I13 can13 walk13 and13 use13 it13 without13 having13 to13 stop
Hugh13 Huddy13 Nokia13 and13 Talks13 user
14
Tuesday 21 May 13
Flip13 phoneA13 phone13 that13 flips13 open13 and13 answers13 automaEcally13 may13 be13 useful13 for13 blind13 low13 vision13 or13 users13 with13 mobility13 impaired13 users
Monoblock13 13 sEckFor13 people13 with13 arthriEs13 or13 poor13 dexterity13
useful13 to13 avoid13 the13 need13 for13 added13 movements
13 like13 sliding13 or13 flipping13 open13 the13 phone13 to13 use13 it
15
WhoDiscovery
Source13 wwwMobileAccessibilityinfo
Tuesday 21 May 13
Slide13 or13 slipUseful for people with limited or low vision
or who are blind as they will answer
automatically upon sliding open
Touch13 and13 SmartphoneMay13 be13 useful13 to13 people13 who13 are13 deaf13 or13 hard13 of13 hearing13 and13 who13 use13 larger13 screen13 sizes13 for13 texEng13 or13 video13 calling
16
WhoDiscovery
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
11
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Low13 vision
First13 )me13 user
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Screen13 reader13 userMobility
Travelling
On13 the13 sofa
lsquoLean13 backrsquo13 user
Dexterity
Children
Tuesday 21 May 13
12
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
Dexterity
Children
Cogni)on
Tuesday 21 May 13
13
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
TouchKeyboardD13 Pad
Dexterity
Children
Cogni)on
AppsHybridWeb
MobileTabletTV
WindowsAndroidiOS
Tuesday 21 May 13
Irsquom13 going13 to13 s=ck13 with13 my13 Nokia13 C513 I13 want13 my13 mobile13 to13 be13 something13 thatrsquos13 mobile13 as13 in13 I13 can13 walk13 and13 use13 it13 without13 having13 to13 stop
Hugh13 Huddy13 Nokia13 and13 Talks13 user
14
Tuesday 21 May 13
Flip13 phoneA13 phone13 that13 flips13 open13 and13 answers13 automaEcally13 may13 be13 useful13 for13 blind13 low13 vision13 or13 users13 with13 mobility13 impaired13 users
Monoblock13 13 sEckFor13 people13 with13 arthriEs13 or13 poor13 dexterity13
useful13 to13 avoid13 the13 need13 for13 added13 movements
13 like13 sliding13 or13 flipping13 open13 the13 phone13 to13 use13 it
15
WhoDiscovery
Source13 wwwMobileAccessibilityinfo
Tuesday 21 May 13
Slide13 or13 slipUseful for people with limited or low vision
or who are blind as they will answer
automatically upon sliding open
Touch13 and13 SmartphoneMay13 be13 useful13 to13 people13 who13 are13 deaf13 or13 hard13 of13 hearing13 and13 who13 use13 larger13 screen13 sizes13 for13 texEng13 or13 video13 calling
16
WhoDiscovery
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
12
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
Dexterity
Children
Cogni)on
Tuesday 21 May 13
13
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
TouchKeyboardD13 Pad
Dexterity
Children
Cogni)on
AppsHybridWeb
MobileTabletTV
WindowsAndroidiOS
Tuesday 21 May 13
Irsquom13 going13 to13 s=ck13 with13 my13 Nokia13 C513 I13 want13 my13 mobile13 to13 be13 something13 thatrsquos13 mobile13 as13 in13 I13 can13 walk13 and13 use13 it13 without13 having13 to13 stop
Hugh13 Huddy13 Nokia13 and13 Talks13 user
14
Tuesday 21 May 13
Flip13 phoneA13 phone13 that13 flips13 open13 and13 answers13 automaEcally13 may13 be13 useful13 for13 blind13 low13 vision13 or13 users13 with13 mobility13 impaired13 users
Monoblock13 13 sEckFor13 people13 with13 arthriEs13 or13 poor13 dexterity13
useful13 to13 avoid13 the13 need13 for13 added13 movements
13 like13 sliding13 or13 flipping13 open13 the13 phone13 to13 use13 it
15
WhoDiscovery
Source13 wwwMobileAccessibilityinfo
Tuesday 21 May 13
Slide13 or13 slipUseful for people with limited or low vision
or who are blind as they will answer
automatically upon sliding open
Touch13 and13 SmartphoneMay13 be13 useful13 to13 people13 who13 are13 deaf13 or13 hard13 of13 hearing13 and13 who13 use13 larger13 screen13 sizes13 for13 texEng13 or13 video13 calling
16
WhoDiscovery
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
13
The13 mul)faceted13 user
Repeat13 user
Task13 based13 user
Aspergers
Low13 vision
First13 )me13 user
Second13 language
Old
ArheriEsArheriEs
Limited13 data
Hard13 of13 hearing
Deaf
Poor13 connec)on
Screen13 reader13 user
Zoom13 user
BlindVoice13 input13 user
Mobility
Travelling
On13 the13 sofa
Depressed
Young
lsquoLean13 backrsquo13 user
Cap)ons13
Scrolling
TouchKeyboardD13 Pad
Dexterity
Children
Cogni)on
AppsHybridWeb
MobileTabletTV
WindowsAndroidiOS
Tuesday 21 May 13
Irsquom13 going13 to13 s=ck13 with13 my13 Nokia13 C513 I13 want13 my13 mobile13 to13 be13 something13 thatrsquos13 mobile13 as13 in13 I13 can13 walk13 and13 use13 it13 without13 having13 to13 stop
Hugh13 Huddy13 Nokia13 and13 Talks13 user
14
Tuesday 21 May 13
Flip13 phoneA13 phone13 that13 flips13 open13 and13 answers13 automaEcally13 may13 be13 useful13 for13 blind13 low13 vision13 or13 users13 with13 mobility13 impaired13 users
Monoblock13 13 sEckFor13 people13 with13 arthriEs13 or13 poor13 dexterity13
useful13 to13 avoid13 the13 need13 for13 added13 movements
13 like13 sliding13 or13 flipping13 open13 the13 phone13 to13 use13 it
15
WhoDiscovery
Source13 wwwMobileAccessibilityinfo
Tuesday 21 May 13
Slide13 or13 slipUseful for people with limited or low vision
or who are blind as they will answer
automatically upon sliding open
Touch13 and13 SmartphoneMay13 be13 useful13 to13 people13 who13 are13 deaf13 or13 hard13 of13 hearing13 and13 who13 use13 larger13 screen13 sizes13 for13 texEng13 or13 video13 calling
16
WhoDiscovery
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Irsquom13 going13 to13 s=ck13 with13 my13 Nokia13 C513 I13 want13 my13 mobile13 to13 be13 something13 thatrsquos13 mobile13 as13 in13 I13 can13 walk13 and13 use13 it13 without13 having13 to13 stop
Hugh13 Huddy13 Nokia13 and13 Talks13 user
14
Tuesday 21 May 13
Flip13 phoneA13 phone13 that13 flips13 open13 and13 answers13 automaEcally13 may13 be13 useful13 for13 blind13 low13 vision13 or13 users13 with13 mobility13 impaired13 users
Monoblock13 13 sEckFor13 people13 with13 arthriEs13 or13 poor13 dexterity13
useful13 to13 avoid13 the13 need13 for13 added13 movements
13 like13 sliding13 or13 flipping13 open13 the13 phone13 to13 use13 it
15
WhoDiscovery
Source13 wwwMobileAccessibilityinfo
Tuesday 21 May 13
Slide13 or13 slipUseful for people with limited or low vision
or who are blind as they will answer
automatically upon sliding open
Touch13 and13 SmartphoneMay13 be13 useful13 to13 people13 who13 are13 deaf13 or13 hard13 of13 hearing13 and13 who13 use13 larger13 screen13 sizes13 for13 texEng13 or13 video13 calling
16
WhoDiscovery
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Flip13 phoneA13 phone13 that13 flips13 open13 and13 answers13 automaEcally13 may13 be13 useful13 for13 blind13 low13 vision13 or13 users13 with13 mobility13 impaired13 users
Monoblock13 13 sEckFor13 people13 with13 arthriEs13 or13 poor13 dexterity13
useful13 to13 avoid13 the13 need13 for13 added13 movements
13 like13 sliding13 or13 flipping13 open13 the13 phone13 to13 use13 it
15
WhoDiscovery
Source13 wwwMobileAccessibilityinfo
Tuesday 21 May 13
Slide13 or13 slipUseful for people with limited or low vision
or who are blind as they will answer
automatically upon sliding open
Touch13 and13 SmartphoneMay13 be13 useful13 to13 people13 who13 are13 deaf13 or13 hard13 of13 hearing13 and13 who13 use13 larger13 screen13 sizes13 for13 texEng13 or13 video13 calling
16
WhoDiscovery
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Slide13 or13 slipUseful for people with limited or low vision
or who are blind as they will answer
automatically upon sliding open
Touch13 and13 SmartphoneMay13 be13 useful13 to13 people13 who13 are13 deaf13 or13 hard13 of13 hearing13 and13 who13 use13 larger13 screen13 sizes13 for13 texEng13 or13 video13 calling
16
WhoDiscovery
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
What
17
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 disabling13
18
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Screen13 sizeiPhone13 is13 11213 a13 typical13 desktop13 screen13 size4013 pixel13 finger13 is13 big13 on13 small13 targetsReach
Fonts13 and13 colourPoor13 support13 on13 older13 phonesSmall13 textFixed13 text
InputDexterity13 and13 touchEnvironment13 and13 voiceSingle13 handed
Barriers13 mulEplied13 x13 1013 for13 diverse13 users 19
Restric=ons13 on13 mobileDiscovery
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Mobile13 is13 by13 defini)on13 is13 enabling13
20
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Mobile13 over13 desktopFaster13 innovaEonPortability
LocaEon13 servicesMapsTailored13 content
Device13 integraEonContactsCameraMaps
Accessibility13 supportBuilt13 in13 amp13 third13 partySe[ngs
Second13 screen21
Opportuni=es13 on13 mobileDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 ne13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 ee13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
22
Second13 screening13 amp13 accessibilityDiscovery
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
While13 engaging13 with13 content13 on13 one13 device13 eg13 TV13 addiEonal13 contextual13 informaEon13 is13 displayed13 on13 a13 companion13 device13 such13 as13 a13 mobile13 or13 tablet
EPG13 The13 app13 synchronises13 content13 via13 listening13 to13 the13 TVSelect13 camera13 angles13 for13 awards13 shows13 13 sport
Audio13 descripEon13 13 Enriched13 commentary13 at13 The13 Olympic13 Opening13 Ceremony
Massive13 opportuniEes13 for13 people13 with13 disabiliEesDelivery13 of13 access13 services13 -shy‐13 signing13 AD13 capEoningUsing13 a13 device13 as13 a13 remoteShared13 but13 tailored13 experiences13
23
Second13 screen13 amp13 accessibilityDiscovery
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
yenHo
24
PlaSorm13 accessibility13 support13 13 seUngs User13 profiles
Voice13 output Blind13 low13 vision13 cogniEveZoom Low13 vision13 cogniEon13 mobility
Black13 amp13 White13 Inverse13 colors13 brightness Low13 vision13 cogniEon
Headphone Hearing13 cogniEon
Speak13 text Low13 vision13 cogniEon
Voice13 input Blind13 low13 vision13 cogniEon13 mobility
External13 amp13 virtual13 keyboards Blind13 mobility
CapEoning Deaf13 cogniEon
Audio13 descripEon Blind13 low13 vision
Accessibility13 sePngs13 amp13 supportDiscovery
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
iOS13 Accessibility13 features13 and13 API13 are13 the13 most13 mature
Android13 has13 some13 good13 accessibility13 features13 Google13 are13 working13 to13 improve
Current13 market13 share13 favours13 iOS13 and13 Android13 devices13 over13 other13 vendors
BlackBerryCurve13 smartphones13 have13 free13 BlackBerry13 Screen13 Reader
Symbian13 Phones13 have13 accessibility13 features13 including13 text-shy‐to-shy‐speech13 but13 plaorm13 currently13 has13 no13 accessibility13 API
Windows13 Phone13 8Phones13 appears13 to13 have13 accessibility13 features13 but13 no13 accessibility13 API
25
Mobile13 accessibility13 landscapeDiscovery
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Se[ng UserVoiceover Blind13 low13 vision13 learning13 and13 cogniEon
Zoom13 Large13 Text Blind13 low13 vision13 learning13 and13 cogniEon
Invert13 colours Low13 vision13 colour13 blindness13 learning13 cogniEon
Speak13 selecEon Low13 vision13 learning13 and13 cogniEon
Speak13 auto-shy‐text Blind13 low13 vision13 learning13 and13 cogniEon13
Hearing13 aid13 mode Deaf13 hard13 of13 hearing13 deaf13 blind
Guided13 access Everybody13 including13 children13 ampeducaEon
AssisEve13 touch Mobility
iOS13 accessibility13 sePngs13 Discovery
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Speech13 output13 Available13 in13 3613 languages
Supports13 zoom13 and13 VoiceOveriOS613 +
Gesture13 and13 explore13 by13 touch
Supports13 Braille13 output
27
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
1 Triple13 click13 the13 Home13 key13 to13 acEvate2 Dial13 to13 open13 the13 Web13 Rotor3 Swipe13 updown13 to13 navigate13 parts4 Swipe13 rightled13 for13 nextprevious13 content
28
iOS13 VoiceOverDiscovery
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Explore13 by13 touchDrag13 finger13 across13 screenItems13 read13 by13 VODouble13 tap13 to13 acEvate
GesturesSwipe13 updown13 to13 jump13 secEonsSwipe13 rightled13 for13 nextprevious13 content
RotorWeb13 and13 Apps13 Lines13 Links13 Form13 Controls13 Tables13 Lists13 Landmarks13 Non-shy‐Visited13 Links13 Bugons13 Text13 Fields13 Images13 StaEc13 Text13 Zoom13 In-shy‐page13 links13 Search13 Fields13 Same13 Item13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEonApps13 Headings13 Speech13 Rate13 Volume13 Hints13 (onoff)13 13 Characters13 Words13 VerEcal13 NavigaEon13 PunctuaEon
29
Naviga=ng13 with13 iOS13 VoiceOverDiscovery
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
30
iOS13 VoiceOver13 gestures
Gesture Func)on
Switch13 VO13 onoff Triple13 click13 the13 home13 keySpeak13 an13 element Single13 tap
pAcEvate13 an13 element Double13 tap
Open13 the13 Rotor Turn13 a13 dial
Zoom 313 finger13 double13 tap13 -shy‐13 iOS6+13 only
Next13 secEon13 in13 Rotor Swipe13 updown
Nextprevious13 item13 in13 content13 order Swipe13 rightled
Pass13 through13 gesture13 (drag13 amp13 drop) Double13 tap13 hold
PlayPause 213 finger13 double13 tap
Discovery
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
31
313 finger13 triple13 tapScreen13 curtain
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
32
iOS13 clipDiscovery
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Se[ng UserVoice13 output Blind13 low13 vision13 learning13 and13 cogniEon
HapEc13 feedback Blind13 Deaf-shy‐Blind13 Low13 vision13 deaf
Large13 text Low13 vision13 cogniEon13 learning
Speak13 passwords Blind13 low13 vision13 cogniEon13 learning
Enhance13 web13 accessibility Blind
Android13 accessibility13 sePngsDiscovery
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Force13 enable13 zoomText13 sizeText13 scalingZoom13 on13 double-shy‐tapMinimum13 font13 sizeInverted13 coloursContrast
A13 useful13 lsquoscreen13 curtainrsquo13 equivalentShades13 app13 can13 also13 do13 this
34
Android13 na=ve13 browser13 sePngsDiscovery
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
NaEve13 browser13 (Webkit)Poor13 support13 for13 screen13 readers
Ideal13 Web13 ReaderSelf13 voicing13 thin13 clientBrowser13 text13 messages13 contacts13 phone
Chrome13 (4+)Zoom13 on13 linksForce13 enable13 zoom
FirefoxQuick13 navigaEon13 keysFind13 in13 page
35
Browsers13 on13 AndroidDiscovery
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Quick13 navigaEon13 keysRequires13 a13 physical13 keyboard13 bluetooth13 connected13 or13 Eyes-shy‐free13 keyboardArrow13 around13 browser13 contentDonrsquot13 work13 with13 the13 browser13 UIDonrsquot13 work13 when13 focus13 is13 on13 entry13 or13 password13 field13 in13 a13 form
Explore13 by13 touch13 also13 supported
36
Firefox13 on13 AndroidDiscovery
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
SupportGingerbread13 23-shy‐13 13 very13 basicIce13 Cream13 Sandwich13 4013 a13 bit13 beYerJelly13 Bean13 41+13 much13 beYer
Screen13 readersTalkBackSpielMobile13 SpeakMobile13 Reader
All13 available13 from13 the13 Play13 Store
37
Speech13 output13 on13 AndroidDiscovery
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Pre13 Ice13 Cream13 Sandwich13 Download13 TalksEnable13 WebScripts13 via13 Settings gt Accessibility gt lsquoEnable Accessibilityrsquo
Download13 the13 Eyes13 Free13 Keyboard
BrowsingVoice13 output13 sEll13 not13 well13 supportedCan13 use13 Firefox13 for13 tesEng
ApplicaEonsTalkback13 well13 supportedBeware13 hybrid13 content
Maps13 adverts13 Terms13 and13 CondiEonsHelp13 pages13 13 etc
38
Naviga=ng13 with13 Android13 TalkbackDiscovery
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
39
Android13 clipDiscovery
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Play)me
40
iOSTriple13 click13 the13 Home13 Key
Se[ngs13 gt13 General13 Accessibility13 gtVoiceOver13 ON
AndroidSe[ngs13 gt13 Accessibility13 gt13 Talkback13 on
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
How
41
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Mobile13 websiteA13 separate13 mobile13 WebsiteDifferent13 user13 experience13 -shy‐13 good13 or13 bad13 thing
Responsive13 websiteA13 site13 that13 adapts13 screen13 size13 and13 contentWidest13 potenEal13 reach
NaEve13 appPlaorm13 specific13 applicaEonsBenefits13 from13 device13 capabiliEesMay13 contain13 Web13 contentBeger13 accessibility13 support
HybridNaEve13 and13 WebEasier13 to13 maintain 42
DeliveryDiscovery
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Stand-shy‐alone13 mobile13 apps13 will13 only13 be13 considered13 once13 the13 core13 web13 service13 works13 well13 on13 mobile13 devices13 and13 if13 specifically13 agreed13 with13 the13 Cabinet13 Office
UK13 Government13 Digital13 StrategyWe13 are13 not13 lsquoappy13 not13 lsquoappy13 at13 all
43
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
No13 internaEonally13 accepted13 independent13 set13 of13 guidelines(a13 la13 WCAG)13 for13 mobile
FragmentaEon13 within13 mobile
No13 lsquoBaseline13 browserrsquo13 support13 for13 mobileMobile13 Web13 Best13 PracEces13 agempted13 it13 with13 the13 Default13 Delivery13 Context
Usable screen width - 120 pixels minimumMarkup language support - XHTML Basic 11Character encoding - UTF-8Image format support - JPEG GIF 89aMaximum total page weight - 20 kilobytesColours - 256 colours minimumStyle Sheet Support - CSS Level 1 and CSS Level 2 media Scripts - No support for client side scripting
44
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
W3C13 WAIMobile13 Web13 Best13 PracEces13 (MWBP)Web13 Content13 Accessibility13 Guidlines13 (WCAGShared13 experiences13 Barriers13 common13 to13 mobile13 device13 users13 and13 people13 with13 disabiliEesMobile13 Accessibility13 OverlapMapping13 between13 MWBP13 and13 WCAGIndependant13 User13 Interface13 (Indi13 UI)13 Working13 Group
-shy‐13 Indie13 Events13 10-shy‐13 Indie13 UI13 User13 Context13 10
AndroidAndroid13 UI13 accessibilityAndroid13 Design13 Pagerns13 AccessibilityAndroid13 Training13 ImplemenEng13 AccessibilityAndroid13 Developing13 Accessible13 ApplicaEonsGoogle13 Eyes13 Free13 Project
45
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
iOSiOS13 Human13 Interface13 GuidelinesAccessibility13 for13 iPhone13 and13 iPad13 apps13 by13 Mag13 Gemmal
NokiaNokia13 user13 experience13 for13 touch13 checklist13 (PDF)Nokia13 user13 experience13 checklist13 for13 keyboard
Windows13 MobileDesign13 Guidelines13 for13 Windows13 MobileTouch13 InteracEon13 Design
OrganisaEonalFunkanuBBC13 Mobile13 Accessibility13 Guidelines
46
Guidelines13 and13 resourcesDiscovery
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Challenges201013 Products13 developing13 in13 silosNo13 globally13 accepted13 guidelinesBBC13 Accessibility13 Standards13 and13 Guidelines13 didnrsquot13 cover13 mobile13 or13 appsMobile13 more13 divers13 and13 faster13 changing13 than13 desktopNo13 graded13 mobile13 browser13 support13 (Yahoo13 and13 BBC)
EvoluEonTechnology13 specific13 guidelines13 vs13 technology13 agnosEc13 guidelinesBuilt13 around13 how13 teams13 workBuilt13 to13 cross13 reference13 BBC13 Global13 Experience13 guidelines13 and13 Editorial13 Guidelines
BenefitsConsistency13 across13 productsConsistency13 across13 Web13 Hybrid13 and13 NaEve13 appsBeger13 labelling
47
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
7113 technology13 agnosEc13 standards13 and13 guidelinesStandard13 =13 testableGuidelines13 =13 not13 easily13 tested13 aspiraEonal
Technology13 specific13 techniques13 and13 examplesHTMLAndroidiOS
EvaluaEon13 criteriaStepsVerificaEon13 criteria
48
BBC13 Mobile13 Accessibility13 GuidelinesDiscovery
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Define13 a13 delivery13 contextMobile13 site13 responsive13 app13 hybrid
Define13 supported13 devicesReference13 pre-shy‐exisEng13 test13 plans
What13 devices13 have13 accessibility13 supportWhat13 devices13 have13 accessible13 naEve13 browsersWhat13 devices13 are13 easy13 to13 upgradefree13 assisEve13 supportAre13 any13 accessible13 devices13 missing
Establish13 version13 support13 matrixAnalyse13 web13 stats
13 users13 lt13 than13 1Assess13 regional13 preferencesAssess13 laws
LocallyGlobally
Research13 user13 preferences 49
Device13 support13 planDiscovery
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
BB
Decision13 Tree13 for13 Degrada=on13 of13 Browser13 Versions13 BBC13 Browser13 support13 Guidelines13 50
Browser13 support
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
51
Webaim13 Screen13 Reader13 Survey13 2012Discovery
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
52
Webaim13 Screen13 Reader13 Survey13 2012Discovery
iOS13 device13 usage13 is13 significantly13 increasing13 and13 well13 abovethe13 standard13 populaEon
Screen13 reader13 users13 represent13 a13 notable13 porEon13 of13 the13 iOS13 device13 user13 market
Usage13 of13 Android13 devices13 is13 well13 below13 that13 of13 non-shy‐disabled13 user
In13 the13 past13 1713 monthsiOS13 devices13 increased13 from13 32613 to13 585Android13 usage13 increased13 slightly13 from13 413 to13 79Nokia13 device13 usage13 fell13 drasEcally13 from13 42413 to13 203
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
53
LawDiscovery
21st13 Century13 Act13 USA13 By13 201313 smartphonesmust13 have13 an13 accessible13 browsermust13 be13 accessible13 at13 the13 OS13 levelmust13 have13 free13 or13 of13 ldquonominal13 costrdquo13 soluEons
ImplicaEonsNorth13 American13 mobile13 market13 influenEal13 globally13
Apple13 Google13 Microsod13 RIM
SecEon13 50813 RefreshlsquoinformaEon13 and13 communicaEon13 technologyrsquo13 must13 be13 WCAG13 2013 compliant
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Breakout13 session
Put13 together13 a13 Mobile13 Accessibility13 Strategy
113 What13 mobile13 devices13 plaEorms13 and13 access13 tech13 would13 you13 support213 How13 would13 you13 maintain13 and13 keep13 this13 up13 to13 date
54
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
55
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
56
Responsive13 design13 and13 accessibility
lsquoResponsiversquo means design and development should respond to the personrsquos behaviour and environment based on screen size platform and orientation
By13 definiEon13 accessibility13 should13 be13 complemented13 by13 responsive13 design13
What13 do13 you13 think13 the13 benefits13 of13 responsive13 design13 are13 on13 desktop
13
Design13 amp13 Build
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
57
Responsive13 design13 overview
Responsive13 designCreates13 a13 core13 experienceAllows13 content13 and13 funcEonality13 to13 adapt13 to13 screen13 size13 and13 device13 capabilityUses13 CSS313 media13 queries13 to13 enhance13 fluid13 layouts
One13 code13 baseEasier13 to13 maintainBeger13 consistency13 familiarity13 and13 ease13 of13 useGenerally13 more13 task13 based13 =13 geared13 towards13 diverse13 users
Progressive13 enhancementMobile13 firstData13 driven13 designCore13 content13 is13 HTML13 HTML5
Design13 amp13 Build
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
58
Responsive13 design13 overview
Use13 Web13 Standards13 as13 intendedSupports13 accessibilitySupports13 interoperability
For13 example13 code13 a13 bugon13 as13 a13 bugon13 not13 a13 styled13 linkScreen13 readers13 announce13 traits13 ie13 bugons13 link13 image13 etcUser13 expectaEon13 is13 a13 link13 opens13 a13 resource13 a13 bugon13 triggers13 an13 acEonOn13 Desktop13 ENTER13 is13 used13 for13 links13 SPACEBAR13 for13 bugons
Use13 standard13 controls13 over13 custom13 implementaEonsVulnerable13 to13 accessibility13 failures13 eg13 incorrect13 traitsMay13 require13 non13 standard13 user13 input13 which13 leads13 to13 usability13 fails13 for13 diverse13 users
Detect13 features13 not13 devices
Design13 amp13 Build
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
59wwwcaniusecomwaiariaTuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
60wwwcaniusecomcats=HTML5Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
61
Responsive13 design13 overviewldquoCu[ng13 the13 mustardrdquo13 (BBC13 Responsive13 news)
Impossible13 to13 test13 across13 all13 browsers13 on13 desktop13 and13 devicesHard13 to13 keep13 up13 -shy‐13 mobile13 contracts13 update13 every13 12-shy‐1813 monthsNew13 browsers13 come13 in13 to13 play13 every13 dayWebsites13 accessed13 globally
Design13 amp13 Build
HTML513 browsersIE9+Firefox13 35+Opera13 9+Safari13 4+Chrome13 1+()iPhone13 and13 iPad13 iOS1+Android13 phones13 and13 tablets13 21+Blackberry13 OS6+Windows13 75+Mobile13 Firefox13 (all13 versions)Opera13 Mobile13 (most13 versions)
HTML413 browsersIE8-shy‐Blackberry13 OS5-shy‐Nokia13 S6013 v6-shy‐Nokia13 S4013 (all13 versions)All13 other13 Symbian13 variantsWindows13 713 phone13 (pre-shy‐Mango)hellipand13 many13 more13 that13 are13 too13 numerous13 to13 men=on
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
62
iOS13 development13 overview
Use13 standard13 UIKit13 componentsAutomaEcally13 accessible13 to13 VoiceOverTraits13 pre-shy‐assignedHints13 where13 necessary13 pre-shy‐assignedOnly13 need13 to13 customise13 the13 label
UIKit13 components13 offer13 roughly13 8013 accessibility13 The13 other13 2013 is13 very13 much13 around13 making13 what13 is13 accessible13 usable
Progressively13 enhance13 with13 new13 accessibility13 features13 in13 later13 versions
13
Design13 amp13 Build
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
63
iOS13 development13 overview
Interface13 Builder13 accessibility13 panelAllows13 you13 to13 enable13 accessibilityAdd13 labels13 traits13 and13 hints
13
Design13 amp13 Build
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
64
Android13 development13 overview
Use13 standard13 library13 componentsAutomaEcally13 accessible13 to13 TalkBackCorrectly13 idenEfiedOnly13 need13 to13 customise13 the13 label
13
Design13 amp13 Build
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
65
Principles13 of13 mobile13 accessibility13 (BBC)
Provide13 core13 content13 in13 an13 accessible13 websiteUse13 apps13 on13 top13 of13 this
Use13 web13 and13 plaorm13 standards13 as13 intendedeg13 code13 links13 as13 links13 not13 bugons
Use13 standard13 components13 NaEvely13 accessible
Use13 progressive13 enhancementSupport13 lower13 end13 devicesEnhance13 apps13 with13 accessibility13 improvements13 in13 device13 version13 updates
Be13 consistent13 and13 conEnuosWithin13 reason13 respect13 the13 delivery13 contextLabels
Design13 amp13 Build
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
66
Android13 design13 principles Design13 amp13 Build
Enchant13 meDelight13 me13 in13 surprising13 waysReal13 objects13 are13 more13 fun13 than13 buYons13 and13 menusLet13 me13 make13 it13 mineGet13 to13 know13 me Simplify13 my13 life
Keep13 it13 briefPictures13 are13 faster13 than13 words
Decide13 for13 me13 but13 let13 me13 have13 the13 final13 sayOnly13 show13 what13 I13 need13 when13 I13 need13 it
I13 should13 always13 know13 where13 I13 amNever13 lose13 my13 stuff
If13 it13 looks13 the13 same13 it13 should13 act13 the13 sameOnly13 interrupt13 me13 if13 itrsquos13 importantMake13 me13 amazing
Give13 me13 tricks13 that13 work13 everywhereItrsquos13 not13 my13 faultSprinkle13 encouragementDo13 the13 heavy13 liiing13 for13 meMake13 important13 things13 fast
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
67
iOS13 Human13 Interface13 Principles Design13 amp13 Build
Aesthe=c13 IntegrityAesthe=c13 integrity13 is13 not13 a13 measure13 of13 how13 beau=ful13 an13 app13 is13 Itrsquos13 a13 measure13 of13 how13 well13 the13 appearance13 of13 the13 app13 integrates13 with13 its13 func=on
ConsistencyConsistency13 in13 the13 interface13 allows13 people13 to13 transfer13 their13 knowledge13 and13 skills13 from13 one13 app13 to13 another13 A13 consistent13 app13 is13 not13 a13 slavish13 copy13 of13 other13 apps
Direct13 manipulaEonWhen13 people13 directly13 manipulate13 onscreen13 objects13 instead13 of13 using13 separate13 controls13 to13 manipulate13 them13 theyre13 more13 engaged13 with13 the13 task13 and13 they13 more13 readily13 understand13 the13 results13 of13 their13 ac=ons13 (mul=touch)
hYpdeveloperapplecomlibraryiosdocumenta=onuserexperienceconceptualmobilehigPrinciplesPrincipleshtml
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
68
iOS13 Human13 Interface13 Principles Design13 amp13 Build
FeedbackFeedback13 acknowledges13 peoplersquos13 ac=ons13 and13 assures13 them13 that13 processing13 is13 occurring13 People13 expect13 immediate13 feedback13 when13 they13 operate13 a13 control13 and13 they13 appreciate13 status13 updates13 during13 lengthy13 opera=ons
MetaphorsWhen13 virtual13 objects13 and13 ac=ons13 in13 an13 app13 are13 metaphors13 for13 objects13 and13 ac=ons13 in13 the13 real13 world13 users13 quickly13 grasp13 how13 to13 use13 the13 app
User13 controlPeople13 not13 apps13 should13 ini=ate13 and13 control13 ac=ons13 Although13 an13 app13 can13 suggest13 a13 course13 of13 ac=on13 or13 warn13 about13 dangerous13 consequences13 itrsquos13 usually13 a13 mistake13 for13 the13 app13 to13 take13 decision-shy‐making13 away13 from13 the13 user
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
69
Alterna=ves
Needed13 forImages13 objects13 elementsMedia13 eg13 capEons13 audio13 descripEon13 transcripts
EditorialShort13 concise13 descripEveImportant13 informaEon13 firstAvoid13 similar13 alternaEves13 for13 different13 funcEonality13 eg13 lsquoPlayrsquo13 and13 lsquoPlaylistrsquoFuncEon13 over13 content13 eg13 lsquoContact13 usrsquo13 not13 lsquoPicture13 of13 a13 mobile13 phonersquoDescribe13 image13 type13 if13 appropriate13 lsquoPortrait13 ofrsquo13 lsquoCartoon13 ofrsquo
OwnershipEditorialMarkeEng13 -shy‐13 this13 is13 branding13 ader13 all
Design13 amp13 Build
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
70
Alterna=ves13 amp13 HTML
Always13 provide13 an13 alt13 agributealt=rdquoSuper useful alt text provided by marketing no lessrdquoalt=rdquordquo ensures13 image13 is13 ignored13 by13 assisEve13 tech
title13 and13 abbrDesktop13
Unavailable13 to13 some13 screen13 readers13 on13 desktopUnavailable13 to13 keyboard13 only13 users
MobileUnavailable13 visually13 on13 touchNot13 recognised13 by13 speech13 output13 on13 mobile
Design13 amp13 Build
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
71
Alterna=ves13 amp13 Android
Assign13 contentDescription13 to13 all13 user13 interface13 components13 eg13
ImageButton
ImageView
CheckBox
DecoraEve13 images13 should13 not13 have13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
72
Alterna=ves13 amp13 iOS
Implement13 basic13 accessibilityOn13 all13 meaningful13 content13 and13 funcEonalityEnables13 VoiceOver13 to13 voice13 and13 interact13 with13 the13 element
via13 xCodea13 Call13 the13 viewrsquos13 setter13 method13 setIsAccessibilityElementYESb13 Override13 the13 viewrsquos13 isAccessibilityElement13 method13 and13 return13 YES
via13 Interface13 Builder13 Accessibility13 Panela13 Select13 the13 objectb13 Check13 ldquoAccessibility13 ndash13 Enabledrdquo13 c13 Assign13 a13 Label
Design13 amp13 Build
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
73
Alterna=ves13 amp13 iOS
Assign13 accessibilityLabel13 to13 all13 user13 interface13 components13
Must13 start13 with13 a13 capitalMust13 not13 end13 with13 a13 period13 ()Must13 not13 include13 informaEon13 about13 the13 type13 of13 object13 ie13 lsquoPlayrsquo13 not13 lsquoPlay13 bugonrsquo
Design13 amp13 Build
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
74
Alterna=ves13 amp13 iOS
Assign13 accessibilityTrait13 to13 all13 user13 interface13 components
Traits13 describe13 control13 type13 or13 behaviour
Control13 types13 are13 mutually13 exclusive13 and13 describe13 the13 nature13 of13 the13 item
More13 than13 one13 behaviour13 trait13 can13 be13 used13 to13 describe13 what13 items13 do
Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Trait DescripEonBugon Used13 for13 acEons13 ie13 Play13 Add13 Download13
FavouriteLink Use13 to13 open13 views13 pages13 resources
Search13 field Search
Keyboard13 key Used13 on13 controls13 which13 insert13 predefined13 text13 for13 example
iOS13 traits13 for13 Type Design13 amp13 Build
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
76
BuYons13 or13 links Design13 amp13 Build
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Trait DescripEonStaEc13 text Text13 that13 is13 readable13 but13 not13 selectable
Image If13 image13 is13 interacEve13 combine13 with13 Bugon13 or13 Link
Plays13 sound Used13 with13 bugon13 traits13 mutes13 of13 reduces13 VO13 volume13
Selected Used13 on13 checkboxes13 status13 read13 by13 VO
Summary13 element Describes13 situaEon13 or13 state13 when13 an13 app13 starts13 use13 sparingly
Updates13 frequently Download13 progress13 bars13 buffering
Not13 enabled Indicates13 item13 is13 not13 currently13 interacEve
Starts13 media13 session Silences13 Voiceover13 used13 when13 recording
Adjustable Sliders13 eg13 volume13 and13 Emeline13 hint13 included
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Item DescripEon Usage
Magic13 tap13 accessibilityPerformMagicTap
Two13 finger13 double13 tap13 to13 perform13 a13 key13 acEon13 ie13 PausePlay
Trigger13 play13 from13 programme13 views13 answer13 a13 call
HeaderaccessibilityTraitHeader
Turn13 text13 into13 headings13 Previously13 only13 view13 headings13 idenEfied13 as13 headings
Add13 headings13 throughout13 ALL13 pages
FocusaccessibilityLayoutChangedNoEficaEon13 (or13 Screen)
Set13 focus13 on13 anything13 other13 than13 first13 item13 in13 content13 order
Set13 focus13 on13 the13 heading13 and13 NOT13 the13 BackDone13 bugons
AnnouncementaccessibilityAnnouncment
Force13 VO13 to13 say13 something13 when13 an13 acEon13 is13 complete
Visual13 cue13 also13 needed13 as13 an13 alternaEve13 for13 non13 VO13 users
GroupingshouldGroupAccessibilityChildren
Groping13 related13 items13 Parent13 child13 relaEonships
iOS13 traits13 for13 Behaviour
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
79
Alterna=ves13 amp13 Hints
accessibilityHints13 may13 be13 used13 to13 provide13 further13 informaEon
Describes13 what13 an13 element13 doesMust13 not13 include13 informaEon13 about13 the13 objects13 type13 (ie13 Trait)Use13 sparingly13 and13 not13 for13 key13 informaEon
Must13 be13 a13 descripEon13 not13 a13 command13 eg13 lsquoDeletes13 programmersquo13 not13 lsquoDelete13 programmersquo
Design13 amp13 Build
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
80
LabelDonebacktohellipTraitBu1on
Label[ProgramnameEpisodenumber]TraitStagtctext
LabelSubgttlesOnOffTraitBu1on
LabelEnterExitFullscreenTraitBu1on
LabelPlayPauseTraitBu1on
Label[0007of5937]swipeupordowntoadjustTraitAdjustable
LabelShowHidemoreTraitBu1on
iOS13 Labels13 Hints13 amp13 Traits Design13 amp13 Build
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
81
Tests13 -shy‐13 alterna=ves
Test0113 Switch13 on13 speech13 output0213 Navigate13 to13 images13 elements13 and13 objects13 either13 by
02113 Explore13 by13 touch13 (AndroidiOS)13 02213 SelecEng13 Imagesbugons13 from13 the13 Web13 Rotor13 and13 swiping13 updown13 (iOS)
0313 Verify13 an13 alternaEve13 is13 provided0413 Verify13 the13 alternaEve13 accurately13 describes13 the13 content13 or13 funcEon
Expected13 resultsEach13 meaningful13 images13 element13 and13 object13 has13 an13 alternaEveAlternaEves13 describe13 either13 the13
content13 of13 a13 non-shy‐funcEonal13 image13 element13 or13 objectthe13 funcEon13 of13 an13 acEonable13 image13 element13 or13 object
Design13 amp13 Build
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
82
Colour13 amp13 Contrast
What13 is13 an13 appropriate13 contrast13 raEo13 for13 mobileWCAG13 AA13 13 contrast13 of13 451MWBP13 Default13 Delivery13 Context13 -shy‐13 25613 colour13 minimumNokia13 design13 guidelines13 51BBC13 Mobile13 Accessibility13 Guidelines13 exceed13 WCAG13 AA13 close13 to13 AAA13 71
Challenge13 for13 RWDContrast13 raEo13 of13 7113 vrsquos13 brand13 and13 markeEngWorks13 beger13 on13 devices13 than13 desktop13 -shy‐13 considered13 too13 restricEveIndicaEng13 links13 with13 colour13
Design13 amp13 Build
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
83
Tests13 -shy‐13 colour13 contrast
Test13 0113 Select13 samples13 of13 text13 and13 links13 by
01113 Checking13 contrast13 during13 UX13 (see13 03)01213 Taking13 a13 screenshot13 (Home+power13 bugon13 on13 iOS13 Power13 and13 volume13 bugon13 on13 Android)13 and13 email13 or13 syncing13 the13 picture13 to13 a13 desktop13 Analyser
0313 Verify13 the13 luminosity13 and13 contrast13 requirements13 are13 met13 via13 the13 Colour13 Contrast13 Analyser
Expected13 results0113 Contrast13 between13 text13 and13 background13 meet13 minimum13 colour13 contrast13 (luminosity)13 raEo13 requirements13 indicated13 by13 the13 requirements
13 Any13 colour13 contrast13 checker13 can13 be13 used13 but13 only13 one13 used13 as13 a13 benchmark
Design13 amp13 Build
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
84
Colour13 amp13 Meaning
Provide13 alternaEves13 for13 colour13 and13 meaning
VisuallyFont13 weightLine13 weightBordersGradientsArt13 styleColour13 intensitySubtle13 animaEons
AudiblyAnnounce13 changes13 of13 state13
Design13 amp13 Build
ldquoSelected13 TV13 tab13 one13 of13 5rdquo
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Firefox
Mobile13 Safari
Colour13 amp13 Meaning Design13 amp13 Build
TEST13 ON13 REAL13 DEVICES
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
87
Tests13 -shy‐13 colour13 amp13 meaning
Test13 0113 AcEvate13 speech13 output13 13 invert13 colours0213 Locate13 images13 objects13 and13 elements13 that13 use13 colour0313 Determine13 if13 colour13 is13 the13 sole13 means13 of13 communicaEng13 informaEon0413 Verify13
speech13 output13 announces13 the13 meaning13 conveyed13 with13 colourthere13 is13 an13 alternaEve13 visual13 means13 of13 indicaEng13 meaning
Expected13 resultsColour13 used13 to13 convey13 meaning13 is13 announced13 by13 screen13 readersColour13 used13 to13 convey13 meaning13 is13 indicated13 visually13 without13 colour13
Design13 amp13 Build
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
88
Touch
Standard13 touch13 target13 size13 of13 7-shy‐10mmJacob13 Neilson13 recommends13 9213 -shy‐13 96mm
AndroidTouch13 target13 size13 of13 48dp9mmSpacing13 between13 UI13 elements13 8dp
iOSTouch13 target13 size13 of13 44px13 13 44px13 tall
PosiEoningProvide13 1mm13 inacEve13 space13 around13 elementsBalance13 enough13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsPosiEon13 content13 appropriately
Design13 amp13 Build
AndroidTuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
89
Tests13 -shy‐13 touch13 target13 size
Test0113 IdenEfy13 touch13 targets0213 Measure13 size0313 Verify13 the13 size13 meets13 the13 requirements
Expected13 resultsAll13 touch13 targets13 meet13 or13 exceed13 the13 minimum13 requirement
When13 should13 this13 test13 be13 carried13 out
Design13 amp13 Build
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
90
Touch
Spacing13 and13 read-shy‐tap13 symmetryBalance13 informaEon13 density13 and13 targetability13 of13 UI13 ElementsSpacing13 between13 groups13 of13 linkseg13 wwwbbccouktv
Design13 amp13 Build
Mobile
Desktop
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
91
Touch
Group13 links13 to13 the13 same13 resourceLarger13 touch13 zoneLess13 audible13 repeEEon13 for13 screen13 reader13 usersLess13 swiping13 needed13 =13 less13 physical13 overhead
Design13 amp13 Build
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
92
Touch
Grouped13 links13 with13 HTML
Treated13 inconsistently13 by13 screen13 readersSome13 only13 announce13 the13 first13 elementSome13 only13 announce13 the13 headingDepends13 on13 reading13 mode13 (tabbing13 read13 all13 arrowing)Main13 concern13 is13 VoiceOver13 repeats13 the13 link13
Basic13 rule13 place13 key13 informaEon13 firstAccessibility13 and13 HTML513 block13 level13 links13 -shy‐13 Simply13 Accessible
Design13 amp13 Build
lta href=httpfeathermelbourneeventbritecomgtlth3 class=summarygtMelbournelth3gt ltspangtltemgtSupported by WIPAltemgtltspangt ltspangtJuly 25 2011ltspangt ltspan class=buttongtPurchase Ticketsltspangt
ltimg src=starpng title=Melbourne alt= gtltagt
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
93
Tests13 -shy‐13 Grouped13 links
Test0113 AcEvate13 the13 screen13 reader0213 Navigate13 to13 acEve13 screen13 objects13 elements13 and13 controls13 that13 have13 textual13 and13 image13 components0313 Verify13 that13 the13 text13 is13 not13 announced13 twice0413 Verify13 that13 there13 are13 not13 two13 equivalent13 acEonable13 items13 announced13 for13 each13 item
Expected13 resultsObject13 elements13 and13 controls13 with13 images13 and13 text13 labels13 are13 announced13 only13 together
Design13 amp13 Build
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
94
Touch
Consider13 reachOne13 handedImportant13 content13 bogom13 led13 to13 right
Design13 amp13 Build
Luke13 Wroblewskirsquos13 book13 Mobile13 First
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
95
Best13 PracLces13 Designing13 Touch13 Tablet13 Experiences13 for13 Pre13 Schoolers
Source13 hYpwwwsesameworkshoporgassets1191srcBest20Prac=ces20Document2011-shy‐26-shy‐12pdf
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
96
Touch13 -shy‐13 most13 intui=ve13 gestures
TapUniversally13 familiar
Draw13 13 Move13 fingerSomeEmes13 hard13 not13 to13 lid13 a13 fingerCan13 also13 support13 parEal13 compleEon
SwipeProvide13 visual13 indicaEons13 of13 where13 to13 swipeConsider13 using13 swipe13 and13 tap13 on13 an13 arrow13
Design13 amp13 Build
xxxx
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
97
Touch13 -shy‐13 most13 intui=ve13 gestures
DragPossible13 difficulEes13 with13 on-shy‐screen-shy‐finger-shy‐conEnuityCan13 support13 parEal13 compleEon
SlideLess13 familiar13 than13 draggingNeeds13 explicit13 instrucEons13 eg13 VO13 strong13 visual13 indicaEon13 of13 end13 point13 a13 large13 hotspot13 supporEveexplicit13 highlighEng
Design13 amp13 Build
ldquoFamiliar13 faces13 to13 take13 you13 new13 placesrdquo
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
98
Touch13 -shy‐13 least13 intui=ve13 gestures
PinchNeeds13 good13 dexterityUse13 it13 on13 non-shy‐essenEal13 acEons
TiltShakeTablet13 size13 and13 weight13 make13 it13 hard13 to13 controlLimit13 it13 to13 smaller13 devices
MulE-shy‐Touch13 MulEple13 fingers13 on13 screen13 at13 onceOden13 used13 unintenEonally13 limited13 dexterity
FlickFlingUse13 interchangeably13 with13 tapand13 or13 drag
Double13 TapChildren13 expect13 immediate13 responseUse13 it13 to13 prevent13 accidental13 navigaEon13 eg13 leaving13 an13 acEvity
Design13 amp13 Build
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
99
Zoom
Support13 pinch13 zoom
Avoidltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=10 user-scalable=1rdquo name=rdquoviewportrdquogt
Useltmeta content=rdquowidth=device-width initial-scale=10 maximum-scale=20 user-scalable=1rdquo name=rdquoviewportrdquogt
iOS13 bug13 Scale13 and13 orienta=on13 Jeremy13 Keith
Design13 amp13 Build
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
100
Structure13 and13 content13 order
AndroidNo13 means13 (that13 I13 am13 aware13 of)13 to13 indicate13 headings13 lists13 etcContent13 order13 needs13 to13 be13 hard13 coded
iOSiOS13 313 -shy‐13 513 only13 the13 screen13 Etle13 was13 announced13 as13 a13 headingiOS13 613 accessibilityTraitHeaderContent13 order13 handled13 naturally13 but13 can13 be13 hard13 coded
HTMLStructure13 and13 content13 order13 are13 a13 core13 component13 accessibility13 Same13 rules13 as13 desktop
Design13 amp13 Build
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
101
Structure13 and13 content13 order
Headings13 and13 listsH113 to13 H6OL13 and13 ULNavigaEon13 to13 headings13 and13 the13 start13 of13 lists13 for13 screen13 readers
Seven13 plus13 or13 minus13 2The13 opEmum13 number13 humans13 process13 informaEonIn13 taxonomy13 this13 translates13 to13 5-shy‐913 headings
Headings13 as13 listsContent13 under13 a13 heading13 may13 be13 removed13 on13 mobileConsider13 lists13 over13 headingsAvoid13 mixing13 both
Design13 amp13 Build
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
102
Structure13 and13 content13 order
WAI13 ARIA13 Landmarksapplication banner complementary contentinfo form main navigationsearchNavigaEon13 to13 parts13 of13 a13 page13 for13 screen13 reader
HTML513 secEoning13 elementsbody section nav article asidehgroup header footer address mainNot13 well13 supported13 by13 desktop13 or13 mobile13 screen13 readers
Design13 amp13 Build
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
103
Structure13 and13 content13 order
Screen13 readers13 announce13 Landmarks13 differently
JawsldquoNavigaEon13 region13 startrdquo13 13 ldquoNavigaEon13 region13 endrdquo
NVDA13 20123ldquoNavigaEon13 region13 startrdquo13 nothing13 at13 the13 end
iOS13 VoiceOverldquoLandmark13 startrdquo13 13 ldquoLandmark13 endrdquo13 but13 announces13 next13 item13 in13 the13 content13 order
TalkBackldquoNavigaEonrdquo13 but13 nothing13 at13 the13 end
Design13 amp13 Build
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
content13 a13 logical13 order13 provide
104
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
provide13 a13 logical13 content13 order
105
Donrsquot13 make13 your13 content13 sound13 like13 Yoda
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
106
Iden=fy13 Landmarks
Content13 orderPlace13 Landmarks13 before13 the13 relevant13 headingHeading13 can13 be13 visible13 or13 hidden
aria-shy‐label13 ltrole=navigation aria-label=Channelsgt
Design13 amp13 Build
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
107
Responsive13 landmarks
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
108
Responsive13 landmarks
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
109
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaFon13 Open13 Menu13 BBC13 One13 BBC13 Two13 BBC13 Three13 BBC13 Four13 TV13 Guide13 A-shy‐Z13 Categories13 Arts13 CBBCrdquo
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
110
Landmarks13 amp13 collapsed13 naviga=onClosed13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 Open
Design13 amp13 Build
left -999emposition absolute
VoiceOver13 13 TalkBack13 says13 ldquoLandmark13 start13 Channels13 navigaEon13 Open13 Menurdquo13 or13 ldquoOpen13 Menurdquo
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
111
Structure13 and13 content13 order
ConsideraEons13 for13 responsiveStructure13 originates13 with13 UX13 (or13 we13 might13 as13 well13 all13 go13 home)Mobile13 first13 -shy‐13 adding13 in13 is13 easier13 than13 subtracEngBalance13 informaEon13 and13 verbosity
Annotate13 UX13 Headings13 lists13 landmarksContent13 and13 focus13 orderKeyboard13 13 swipe13 interacEonFocus13 states
SummaryAn13 H113 follows13 role=ldquomainrdquo13 and13 the13 main13 content13 follows13 an13 H1An13 H234 follows13 role=ldquocomplementaryrdquoAn13 H2 (34) follows13 role=ldquonavigationrdquoDuplicated13 links13 grouped13 in13 one13 lta hrefgt
Design13 amp13 Build
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
112
Responsive13 naviga=on
One13 Responsive13 BarlesqueBBC13 Framework13 including13 the13 header13 and13 footer
Design13 amp13 Build
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
113
Responsive13 naviga=on13 -shy‐13 case13 study13
StructureLandmarks13 -shy‐13 Banner13 NavigaEon13 and13 Search
Hidden13 headings13 -shy‐13 H213 Accessibility13 links13 H213 BBCcouk13 navigaEon
Visible13 focusStrong13 branded13 visible13 focus
Design13 amp13 Build
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
114
Responsive13 naviga=on
IssuesSearch13 repeated13 313 times13 -shy‐13 landmark13 label13 placement13 textldquoBBCcouk13 navigationrdquo13 makes13 no13 sense
Design13 amp13 Build
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
115
Responsive13 naviga=on
More13 panelAdded13 hidden13 span13 to13 ldquoMorerdquo13 ie13 13 ldquoOpen13 More13 BBC13 sitesrdquo13 13 ldquoClose13 More13 BBC13
sitesrdquoSet13 focus13 to13 first13 item13 in13 the13 list13 ldquoTVrdquoPanel13 remains13 open13 until13 closedMore13 is13 an13 H213 inside13 the13 panel
Design13 amp13 Build
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
116
Responsive13 skip13 links
Do13 they13 have13 a13 place13 on13 mobileOn13 touch13 screens13 they13 feel13 redundantNot13 necessary13 for13 collapsable13 navigationPossibly13 necessary13 on13 keypad13 devices
Design13 amp13 Build
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
117
Clear13 naviga=on
Page13 Etles13 content13 or13 purpose13 of13 the13 screenAct13 as13 a13 reverse13 breadcrumbAvoid13 DoneBack
Design13 amp13 Build
2
3
1
YouTube13 iOS13 App
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
118
Forms
Use13 programmaEcally13 readable13 instrucEonsAdd13 lsquorequiredrsquo13 to13 the13 ltlabelgt
ltlabel for=namegtYour Name (required)ltlabelgt
Progressively13 enhance13 with13 HTML13 ltinput type=ldquotext requiredgt (iOS5+)Using13 both13 techniques13 do13 not13 result13 in13 lsquorequiredrsquo13 being13 read13 twice
Design13 amp13 Build
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
119
Keyboard13 focus
Donrsquot13 forget13 keyboard13 users13 D-shy‐Pad13 users13 and13 13 external13 keyboard13 users
HTMLProvide13 a13 logical13 code13 orderPosiEve13 and13 negaEve13 tab13 order13 not13 well13 supported13 on13 iOS13 and13 Android
Be13 aware13 of13 this13 for13 responsive13 sites
Design13 amp13 Build
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
120
Keyboard13 focus13 -shy‐13 Android
Enable13 focus-shy‐based13 navigaEon13 on13 componentsandroidfocusable=truerdquosetFocusableisFocusableRequestFocus
Force13 focus13 order13 if13 it13 is13 not13 logicalnextFocusDownnextFocusLeftnextFocusRightnextFocusUp
Design13 amp13 Build
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
121
Keyboard13 focus13 -shy‐13 visible
iOSNo13 means13 of13 providing13 a13 focus13 (that13 Irsquom13 aware13 of)
AndroidProvided13 by13 default13 for13 standard13 controlsMust13 be13 added13 to13 custom13 controls13 using13 style13 sheets
state_focused=ldquotruerdquo
HTML13 think13 lsquofocusrsquo13 firstahover afocus aactive background-color ff9
Design13 amp13 Build
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
122
No=fica=ons
NoEficaEon13 may13 be13 necessary13 due13 toLayout13 changesContent13 removal13 due13 to13 orientaEon13 changes13 ie13 a13 menu13 opens13 in13 LayoutList13 of13 links13 may13 change13 to13 drop13 downs
Use13 standard13 platform13 notificationsFamiliar13 behaviour13 across13 appsBaked13 in13 accessibilityEnsure13 there13 are13 both13 visual13 and13 audible13 notifications
HowOnly13 notify13 the13 user13 if13 changes13 are13 not13 self13 evidentARIA13 announcementsSystem13 alertsiOS13 -shy‐13 UIAccessibilityLayoutChangedNotificationAndroid13 -shy‐13 update13 the13 contentDescription
Design13 amp13 Build
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
123
Screen13 reader13 detec=on
Detect13 if13 a13 screen13 reader13 is13 runningHide13 content13 specifically13 for13 sighted13 users13 ie13 splash13 screen13 instrucEonsServe13 alternaEves13 ie13 a13 video13 player13 that13 doesnrsquot13 autoplayUse13 rarely
HTMLNot13 possible
iOSUIAccessibilityIsVoiceoverRunner
AndroidisScreenReaderActive
Design13 amp13 Build
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Breakout13 session
How13 accessible13 is13 Facebook13 and13 how13 would13 you13 fix13 it
113 HTML213 Android313 iOS
124
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
125
Discovery13 Design13 amp13 Build13
Deploy13
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
126
Workflow
DiscoveryRWD13 hybrid13 naEve13 app13 etcDevice13 support13 planTest13 plan
In13 house13 technical13 user13 automatedSecure13 and13 allocate13 budget13 early13 on
DefiniEonRequirements
Guidelines13 pre-shy‐exisEng13 internal13 customisedWho13 owns13 what13 (originates13 with13 implemented13 by)
User13 storiesSign13 off13 process
Training13 requirementsEditorial13 UX13 Development13 QA13 teams
Deploy
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
127
Workflow
DefiniEon13 conEnuedWireframes
Annotate13 for13 structure13 content13 order13 keyboard13 interacEonDone13 by13 UX13 collaboraEng13 with13 development
UXReview13 and13 document
DeployDefiniEon13 of13 Done13 -shy‐13 ensure13 accessibility13 is13 one13 aspectMinimal13 Viable13 ProductMaintenance13 plane
Deploy
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
128
Defini=on13 of13 Done
Code13 adheres13 to13 internal13 code13 standardsCore13 content13 adheres13 to13 accessibility13 requirementsContent13 passes
Automated13 testsUser13 testsManual13 testsUser13 Acceptance13 Criteria
Core13 content13 is13 available13 toAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomUsable13 without13 JavaScript
Deploy
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
129
Minimal13 Viable13 Product
All13 core13 content13 and13 funcEonality13 isAvailable13 to13 screen13 readersAvailable13 with13 colours13 invertedUsable13 with13 zoomUsable13 with13 screen13 readers13 and13 zoomNot13 reliant13 on13 JavaScript
ExempEonsPixel13 perfecEonFuncEonality13 the13 offers13 an13 alternaEve13 route13 to13 already13 accessible13 core13 contentEffects13 animaEons13 transiEonsAddiEonal13 features13 can13 be13 added13 later13 ie13 font13 switchers13 if13 content13 is13 already13 flexible
ldquoBeauty13 is13 only13 skin13 deeprdquo13 -shy‐13 Me
Deploy
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
130
My13 rule13 of13 thumb
Any13 relaunch13 exceeds13 exisEng13 levels13 of13 accessibility
Version13 one13 has13 no13 ShowstopperBlocker13 issues13 and13 all13 other13 issues13 prioriEsed13 in13 the13 Backlog
Showstopper13 =13 affects13 producEon13 so13 adversely13 that13 it13 must13 be13 fixed13 or13 addressed13 immediatelyBlocker13 =13 This13 issue13 blocks13 further13 progress13 or13 another13 issue13 It13 may13 be13 blocking13 Release
Deploy
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
131
Tes=ng13 -shy‐13 HTML
Responsive13 designHard13 to13 test13 for13 all13 devicesOpEmise13 then13 test13 on13 the13 most13 common13 devices
ToolsFireEyes13 includes13 a13 responsive13 tesEng13 featuresDefault13 user13 agent13 switchingValidaEng13 HTMLWebAim13 Toolbar
Deploy
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
132
Tes=ng13 -shy‐13 Android
Android13 EmulatorVirtual13 device13 in13 Android13 SDKConfigurable13 to13 mimic13 different13 devicesContains13 a13 debug13 console
Deploy
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
133
Tes=ng13 -shy‐13 Android
Android13 Lint13 Tool13 Finds13 missing13 ContentDescriptionFinds13 missing13 input13 types13 on13 text13 fieldsQuick13 fix13 windowWrite13 custom13 tests
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Tes=ng13 -shy‐13 AndroidDeploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Tes=ng13 -shy‐13 iOS
iOS13 Accessibility13 InspectorDisplays13 accessibility13 informaEon13 of13 accessible13 elementsSimulates13 Voiceover13 interacEonRuns13 in13 the13 iOS13 SimulatorWhen13 running13 the13 AI13 hijacks13 single13 click13 to13 focus13 double13 click13 to13 acEvateA13 good13 development13 tool13 but13 not13 suitable13 for13 final13 tesEng
Deploy
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Tes=ng13 -shy‐13 scenarios
Complete13 keys13 taskswith13 voice13 outputwith13 zoomwith13 voice13 output13 and13 zoom13 with13 inverse13 colours13 on
Mobile13 Accessibility13 tests
Deploy
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Switch13 off13 the13 screeniOS13 -shy‐13 Screen13 CurtainAndroid13 13 -shy‐13 browser13 se[ngs13 gt13 Brightness13 or13 use13 Shades
Voice13 output13 testsAre13 images13 labelledIs13 content13 order13 logicalAre13 changes13 of13 state13 announcedAre13 bugons13 used13 for13 acEonsAre13 links13 used13 to13 open13 pagesAre13 form13 elements13 labelledAre13 appropriate13 keyboards13 used
Tes=ng13 screen13 reader13 supportDeploy
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Text13 is13 readableLarge13 areas13 of13 empty13 space13 are13 not13 presentLabels13 and13 form13 inputs13 are13 not13 separated13 by13 large13 areas13 of13 empty13 spacePop13 ups13 do13 not13 obscure13 the13 whole13 screen
Tes=ng13 low13 visionDeploy
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Visible13 text13 matches13 audible13 labelsBugons13 images13 of13 text13 etc
Is13 visible13 and13 voice13 output13 focus13 are13 in13 sync
Tes=ng13 zoom13 and13 voice13 outputDeploy
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
Is13 text13 readableThere13 is13 sufficient13 contrastVisible13 navigaEon13 cues13 are13 clearMeaning13 is13 clear
Tes=ng13 inverse13 coloursDeploy
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
0113 Establish13 a13 mobile13 accessibility13 strategy0213 Define13 requirements13 (Guideline13 MVP13 DOD)0313 Establish13 test13 plans0413 Establish13 training13 needs0513 Map13 requirements13 to13 wireframes13 and13 UX
Wrap13 upDeploy
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13
To13 be13 con(nuedhennyihenicom
142
Tuesday 21 May 13