Upload File

introduction to mobile accessibility - accessu 2013

152
Henny Swan @iheni | www.iheni.com | [email protected] Introduc)on to Mobile Accessibility Tuesday, 21 May 13

Upload: henny-swan

Post on 17-Aug-2014

11.543 views

Category:

Devices & Hardware


3 download

Report

Tags:

DESCRIPTION

Where do you start when making your content mobile? This presentation tackles how people with disabilities use the mobile web and applications, putting together a mobile support strategy, responsive web design, iOS and Android development covering design, development and testing.

TRANSCRIPT

Page 1: Introduction to mobile accessibility - AccessU 2013

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

Page 2: Introduction to mobile accessibility - AccessU 2013

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

Page 3: Introduction to mobile accessibility - AccessU 2013

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

Page 4: Introduction to mobile accessibility - AccessU 2013

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

Page 5: Introduction to mobile accessibility - AccessU 2013

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

Page 6: Introduction to mobile accessibility - AccessU 2013

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

Page 7: Introduction to mobile accessibility - AccessU 2013

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

Page 8: Introduction to mobile accessibility - AccessU 2013

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

Page 9: Introduction to mobile accessibility - AccessU 2013

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

Page 10: Introduction to mobile accessibility - AccessU 2013

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

Page 11: Introduction to mobile accessibility - AccessU 2013

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

Page 12: Introduction to mobile accessibility - AccessU 2013

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

Page 13: Introduction to mobile accessibility - AccessU 2013

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

Page 14: Introduction to mobile accessibility - AccessU 2013

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

Page 15: Introduction to mobile accessibility - AccessU 2013

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

Page 16: Introduction to mobile accessibility - AccessU 2013

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

Page 17: Introduction to mobile accessibility - AccessU 2013

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

Page 18: Introduction to mobile accessibility - AccessU 2013

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

Page 19: Introduction to mobile accessibility - AccessU 2013

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

Page 20: Introduction to mobile accessibility - AccessU 2013

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

Page 21: Introduction to mobile accessibility - AccessU 2013

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

Page 22: Introduction to mobile accessibility - AccessU 2013

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

Page 23: Introduction to mobile accessibility - AccessU 2013

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

Page 24: Introduction to mobile accessibility - AccessU 2013

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

Page 25: Introduction to mobile accessibility - AccessU 2013

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

Page 26: Introduction to mobile accessibility - AccessU 2013

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

Page 27: Introduction to mobile accessibility - AccessU 2013

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

Page 28: Introduction to mobile accessibility - AccessU 2013

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

Page 29: Introduction to mobile accessibility - AccessU 2013

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

Page 30: Introduction to mobile accessibility - AccessU 2013

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

Page 31: Introduction to mobile accessibility - AccessU 2013

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

Page 32: Introduction to mobile accessibility - AccessU 2013

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

Page 33: Introduction to mobile accessibility - AccessU 2013

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

Page 34: Introduction to mobile accessibility - AccessU 2013

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

Page 35: Introduction to mobile accessibility - AccessU 2013

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

Page 36: Introduction to mobile accessibility - AccessU 2013

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

Page 37: Introduction to mobile accessibility - AccessU 2013

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

Page 38: Introduction to mobile accessibility - AccessU 2013

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

Page 39: Introduction to mobile accessibility - AccessU 2013

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

Page 40: Introduction to mobile accessibility - AccessU 2013

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

Page 41: Introduction to mobile accessibility - AccessU 2013

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

Page 42: Introduction to mobile accessibility - AccessU 2013

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

Page 43: Introduction to mobile accessibility - AccessU 2013

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

Page 44: Introduction to mobile accessibility - AccessU 2013

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

Page 45: Introduction to mobile accessibility - AccessU 2013

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

Page 46: Introduction to mobile accessibility - AccessU 2013

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

Page 47: Introduction to mobile accessibility - AccessU 2013

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

Page 48: Introduction to mobile accessibility - AccessU 2013

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

Page 49: Introduction to mobile accessibility - AccessU 2013

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

Page 50: Introduction to mobile accessibility - AccessU 2013

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

Page 51: Introduction to mobile accessibility - AccessU 2013

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

Page 52: Introduction to mobile accessibility - AccessU 2013

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

Page 53: Introduction to mobile accessibility - AccessU 2013

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

Page 54: Introduction to mobile accessibility - AccessU 2013

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

Page 55: Introduction to mobile accessibility - AccessU 2013

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

Page 56: Introduction to mobile accessibility - AccessU 2013

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

Page 57: Introduction to mobile accessibility - AccessU 2013

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

Page 58: Introduction to mobile accessibility - AccessU 2013

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

Page 59: Introduction to mobile accessibility - AccessU 2013

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

Page 60: Introduction to mobile accessibility - AccessU 2013

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

Page 61: Introduction to mobile accessibility - AccessU 2013

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

Page 62: Introduction to mobile accessibility - AccessU 2013

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

Page 63: Introduction to mobile accessibility - AccessU 2013

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

Page 64: Introduction to mobile accessibility - AccessU 2013

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

Page 65: Introduction to mobile accessibility - AccessU 2013

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

Page 66: Introduction to mobile accessibility - AccessU 2013

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

Page 67: Introduction to mobile accessibility - AccessU 2013

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

Page 68: Introduction to mobile accessibility - AccessU 2013

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

Page 69: Introduction to mobile accessibility - AccessU 2013

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

Page 70: Introduction to mobile accessibility - AccessU 2013

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

Page 71: Introduction to mobile accessibility - AccessU 2013

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

Page 72: Introduction to mobile accessibility - AccessU 2013

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

Page 73: Introduction to mobile accessibility - AccessU 2013

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

Page 74: Introduction to mobile accessibility - AccessU 2013

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

Page 75: Introduction to mobile accessibility - AccessU 2013

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

Page 76: Introduction to mobile accessibility - AccessU 2013

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

Page 77: Introduction to mobile accessibility - AccessU 2013

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

Page 78: Introduction to mobile accessibility - AccessU 2013

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

Page 79: Introduction to mobile accessibility - AccessU 2013

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

Page 80: Introduction to mobile accessibility - AccessU 2013

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

Page 81: Introduction to mobile accessibility - AccessU 2013

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

Page 82: Introduction to mobile accessibility - AccessU 2013

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

Page 83: Introduction to mobile accessibility - AccessU 2013

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

Page 84: Introduction to mobile accessibility - AccessU 2013

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

Page 85: Introduction to mobile accessibility - AccessU 2013

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

Page 86: Introduction to mobile accessibility - AccessU 2013

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

Page 87: Introduction to mobile accessibility - AccessU 2013

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

Page 88: Introduction to mobile accessibility - AccessU 2013

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

Page 89: Introduction to mobile accessibility - AccessU 2013

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

Page 90: Introduction to mobile accessibility - AccessU 2013

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

Page 91: Introduction to mobile accessibility - AccessU 2013

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

Page 92: Introduction to mobile accessibility - AccessU 2013

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

Page 93: Introduction to mobile accessibility - AccessU 2013

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

Page 94: Introduction to mobile accessibility - AccessU 2013

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

Page 95: Introduction to mobile accessibility - AccessU 2013

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

Page 96: Introduction to mobile accessibility - AccessU 2013

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

Page 97: Introduction to mobile accessibility - AccessU 2013

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

Page 98: Introduction to mobile accessibility - AccessU 2013

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

Page 99: Introduction to mobile accessibility - AccessU 2013

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

Page 100: Introduction to mobile accessibility - AccessU 2013

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

Page 101: Introduction to mobile accessibility - AccessU 2013

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

Page 102: Introduction to mobile accessibility - AccessU 2013

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

Page 103: Introduction to mobile accessibility - AccessU 2013

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

Page 104: Introduction to mobile accessibility - AccessU 2013

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

Page 105: Introduction to mobile accessibility - AccessU 2013

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

Page 106: Introduction to mobile accessibility - AccessU 2013

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

Page 107: Introduction to mobile accessibility - AccessU 2013

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

Page 108: Introduction to mobile accessibility - AccessU 2013

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

Page 109: Introduction to mobile accessibility - AccessU 2013

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

Page 110: Introduction to mobile accessibility - AccessU 2013

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

Page 111: Introduction to mobile accessibility - AccessU 2013

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

Page 112: Introduction to mobile accessibility - AccessU 2013

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

Page 113: Introduction to mobile accessibility - AccessU 2013

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

Page 114: Introduction to mobile accessibility - AccessU 2013

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

Page 115: Introduction to mobile accessibility - AccessU 2013

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

Page 116: Introduction to mobile accessibility - AccessU 2013

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

Page 117: Introduction to mobile accessibility - AccessU 2013

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

Page 118: Introduction to mobile accessibility - AccessU 2013

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

Page 119: Introduction to mobile accessibility - AccessU 2013

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

Page 120: Introduction to mobile accessibility - AccessU 2013

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

Page 121: Introduction to mobile accessibility - AccessU 2013

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

Page 122: Introduction to mobile accessibility - AccessU 2013

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

Page 123: Introduction to mobile accessibility - AccessU 2013

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

Page 124: Introduction to mobile accessibility - AccessU 2013

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

Page 125: Introduction to mobile accessibility - AccessU 2013

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

Page 126: Introduction to mobile accessibility - AccessU 2013

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

Page 127: Introduction to mobile accessibility - AccessU 2013

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

Page 128: Introduction to mobile accessibility - AccessU 2013

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

Page 129: Introduction to mobile accessibility - AccessU 2013

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

Page 130: Introduction to mobile accessibility - AccessU 2013

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

Page 131: Introduction to mobile accessibility - AccessU 2013

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

Page 132: Introduction to mobile accessibility - AccessU 2013

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

Page 133: Introduction to mobile accessibility - AccessU 2013

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

Page 134: Introduction to mobile accessibility - AccessU 2013

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

Page 135: Introduction to mobile accessibility - AccessU 2013

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

Page 136: Introduction to mobile accessibility - AccessU 2013

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

Page 137: Introduction to mobile accessibility - AccessU 2013

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

Page 138: Introduction to mobile accessibility - AccessU 2013

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

Page 139: Introduction to mobile accessibility - AccessU 2013

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

Page 140: Introduction to mobile accessibility - AccessU 2013

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

Page 141: Introduction to mobile accessibility - AccessU 2013

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

Page 142: Introduction to mobile accessibility - AccessU 2013

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

Page 143: Introduction to mobile accessibility - AccessU 2013

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

Page 144: Introduction to mobile accessibility - AccessU 2013

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

Page 145: Introduction to mobile accessibility - AccessU 2013

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

Page 146: Introduction to mobile accessibility - AccessU 2013

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

Page 147: Introduction to mobile accessibility - AccessU 2013

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

Page 148: Introduction to mobile accessibility - AccessU 2013

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

Page 149: Introduction to mobile accessibility - AccessU 2013

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

Page 150: Introduction to mobile accessibility - AccessU 2013

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

Page 151: Introduction to mobile accessibility - AccessU 2013

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

Page 152: Introduction to mobile accessibility - AccessU 2013

To13 be13 con(nuedhennyihenicom

142

Tuesday 21 May 13


Web and Mobile App Accessibility Testing

About Mobile Accessibility

5.1. OSNOVNI POJMOVI U MS ACCESSu

Mobile Accessibility - Accessibility Camp Toronto

Mobile accessibility 1 hr - DrupalCon · Mobile Accessibility The good, the bad and the ugly @accessibilityoz pz.tt/drupalcon19

Databaze v Accessu

Developing a mobile accessibility strategy

Introduction to mobile accessibility, 2015

모바일 접근성(Mobile Accessibility)

Responsive & Mobile accessibility

A1 Accessibility Inclusiveness Mobile Web

Mobile Accessibility - Kath Moonan, Vodafone

AccessU 2013 - Section 508 Refresh

LNCS 4397 - Automatic Evaluation of Mobile Web … Evaluation of Mobile Web Accessibility ... Manuel Lardizabal 1, 20018 Donostia, ... Automatic Evaluation of Mobile Web Accessibility

Mobile Accessibility

Designing Accessibility - AccessU 2019

Accessibility of websites and mobile apps…Accessibility of websites and mobile apps A study on the current practices regarding accessibility statements, reporting mechanisms and

Cultural Shifts and Enterprise Accessibility - AccessU 2013 (dboudreau)

Mobile Accessibility - iOS, Android, Mobile Web

Mobile Application Accessibility Design

Mobile Accessibility (MobA11y)

Accessu 2016 presentation "Implementing IT Accessibility Strategically"

Mobile accessibility Übersicht und Integration in mobile Apps

Accessibility Compliance – Building Successful Mobile Applications

Unlocking accessibility for UI/UX Designers...AccessU 2019 – Unlocking accessibility for UI/UX Designers Unlocking accessibility for UI/UX designers Today’s agenda 1. Introductions

Mobile Wireless Handset Accessibility Assessment

모바일접근성 (Mobile Accessibility] 모바일 접근성_현준호... · 모바일접근성 (Mobile Accessibility] PG 605 워크숍[2010. 8. 26) 현준호 한국정보화진흥원현준호책임

Technical Aspects of Mobile App Accessibility

Mobile Accessibility Overview November 6th, 2013

Web and mobile accessibility

jQuery: Accessibility, Mobile und Responsive

Introduction to mobile accessibility - AccessU 2013

Accessibility of Mobile Services

Mobile Accessibility - How To Become Socially Responsible Mobile Developer

Mobile Accessibility Best Practices & Trends