inclusive design principles a4 - all -...

• Notifications: otificationsthatappearinaninterfacearevisuallyobviousbutre uireproactivediscoverybyscreenreaderusers.Acomparableexperienceforblindusers,canbeachievedbyusingaliveregion.Thenotificationthenre uiresnoexplicitactiononthepartoftheuser.

• Content for alternatives: avingabasicalternative,whetherit’salttext,atranscript,audiodescription,orsignlanguage,makesthecontentaccessiblebuttobee uivalentitneedstocapturetheessenceoftheoriginal.

Ensureyourinterfaceprovidesacomparableexperienceforallsopeoplecanaccomplishtasksinawaythatsuitstheirneedswithoutunderminingthe ualityofthecontent.

Providecomparableexperience

Whetheroutofcircumstance,choice,orcontextpeoplearediverse.Aspeopleusedifferentapproachesandtoolstoreadandoperateinterfaces,whattheinterfaceofferseachusershouldbecomparableinvalue, uality,andefficiency.

Adapted from inclusivedesignprinciples.org

Examples of how to achieve this principle

Closed captions

• Ergonomic features: Providingsynchronisedclosedcaptionsmakesyourvideoaccessible.utmakingthemcustomisable,color

coded,andrepositionableprovidesamorecomparableexperience.

For more information go to barclayscorporate.com/accessibility ThisworkislicensedundertheCreativeCommonsAttribution-ShareAlike3.0UnportedLicense.

1

InclusiveDesignPrinciple

• Allow zoom: Therearemanyreasonswhyausermaywanttooperatethepinch-to-zoomgestureontheirtouchdevice.Makesureitisnotsuppressed,andthatthecontentdoesnotgetobscuredwhenitisputtouse.

• Make it stop:Someusersfindthatanimationsorparallaxscrollingcausenausea,andothersfindthemplaindistracting.Wheretheyplayautomatically,theyshouldatleastbeeasytostop,byprovidingprominentplaybackcontrols.

• Scrolling control: ‘Infinitescrolling’canbeproblematic,especiallyforusersnavigatingbykeyboardbecausetheycan’tgetpastthestreamofrefreshingcontent.Givetheoptiontoturnoffthisfeatureandreplaceitwitha‘loadmore’button.

Ensurepeopleareincontrol.Peopleshouldbeabletoaccessandinteractwithcontentintheirpreferredway.

Givecontrol

Donotsuppressordisabletheabilitytochangestandardbrowserandplatformsettingssuchasorientation,fontsize,zoom,andcontrast.Inaddition,avoidcontentchangesthathavenotbeeninitiatedbytheuserunlessthereisawaytocontrolit.

Adapted from inclusivedesignprinciples.org

Examples of how to achieve this principle

Load more

For more information go to barclayscorporate.com/accessibility ThisworkislicensedundertheCreativeCommonsAttribution-ShareAlike3.0UnportedLicense.

2

InclusiveDesignPrinciple

• Multiple ways to complete an action: Whereappropriate,providemultiplewaystocompleteanaction. nmobileswipetodeleteanitemcanbesupportedtogetherwithaneditbuttonthatallowsyoutoselectitemsthendelete.Anexampleofthisisini Smail.

Considerprovidingdifferentwaysforpeopletocompletetasks,especiallythosethatarecomplexornonstandard.

fferchoice

Thereisoftenmorethanonewaytocompleteatask. oucannotassumewhatsomeone’spreferredwaymightbe.yprovidingalternativesforlayoutand

taskcompletion,youofferpeoplechoicesthatsuitthemandtheircircumstancesatthetime.

Adapted from inclusivedesignprinciples.org

Examples of how to achieve this principle

Edit

FlagMore Trash

• Accessible alternatives: Alternativewaysofpresentingdata,suchasdatatablesforinfographics,shouldbeavailabletoallusersasanoptionratherthanahiddenlink ustforscreenreaderusers.Accessiblealternativescanbenefitnot ustaspecifictargetgroupbutallusersaslongasweofferthechoice.

• Layout:Wheretherearelonglistsofcontentconsiderofferingagridorlistlayoutoption.Thissupportspeoplewhomaywantlargerimagesonscreenorsmallerrows.

For more information go to barclayscorporate.com/accessibility ThisworkislicensedundertheCreativeCommonsAttribution-ShareAlike3.0UnportedLicense.

3

InclusiveDesignPrinciple

• Context sensitive help:Usersmayneedhelpwhentheyfirstencounteracomplexformorinteraction.Thishelpmaybecomeredundant,evendistracting,asauserbecomesmorefamiliarwiththeformorinteraction.Contextsensitivehelpprovidestheuserwithchoiceastowhentheyaccesshelpandbettercontroloverthepage.

• Captions on the go: ou’reawarethatthevideocontentyouareprovidingwillbeconsumedonmobiledevices,whichmaybeinpublicspaceswherepeoplemightprefertoconsumethecontentwithoutbeingantisocial. orsmallerviewports,soundisswitchedoffandcaptionsactivatedbydefault.

• Colour contrast:Whenusinganinterfaceoutdoors,goodcontrastlessenstheimpactofbrightsunshine.

Peopleuseyourinterfaceindifferentsituations.Makesureyourinterfacedeliversavaluableexperiencetopeopleregardlessoftheircircumstances.

Considersituation

Peoplearefirsttimeusers,establishedusers,usersatwork,usersathome,usersonthemove,andusersunderpressure.Allofthesesituationscanhaveanimpact. orthosewhoalreadyfindinteractionchallenging,suchasthosewithdisabilities,thisimpactmaymakeusageparticularlydifficult.

Adapted from inclusivedesignprinciples.org

Examples of how to achieve this principle

Good contrast

Goodcontr

?Username

For more information go to barclayscorporate.com/accessibility ThisworkislicensedundertheCreativeCommonsAttribution-ShareAlike3.0UnportedLicense.

4

InclusiveDesignPrinciple

• Consistent page architecture:Useconsistentpagearchitectureacrosstemplatestohelppeoplescanandnavigatekeycontent.

• Consistent design patterns:Useconsistentwebandplatformdesignpatternstohelpbuildfamiliarityandunderstanding.

• Consistent editorial:Useplainlanguageconsistentlyacrossplatformsincludingeditorialthatisreliedonbyscreenreaderuserssuchastextalternatives,headings,labelsforbuttonsandsoon. eepingeditorialstyleconsistentisalsoimportant,suchasmakingsurethetopofarticlesalwayshaveaclearlymarkedsummaryparagraph,ormakingsurebulletsalwaysstartwithaboldeddefinition.

Usefamiliarconventionsandapplythemconsistently.

econsistent

amiliarinterfacesborrowfromwell-establishedpatterns.Theseshouldbeusedconsistentlywithintheinterfacetoreinforcetheirmeaningandpurpose.Thisshouldbeappliedtofunctionality,behavior,editorial,andpresentation. oushouldsaythesamethingsinthesamewayandusersshouldbeabletodothesamethingsinthesameway.

Adapted from inclusivedesignprinciples.org

Examples of how to achieve this principle

For more information go to barclayscorporate.com/accessibility ThisworkislicensedundertheCreativeCommonsAttribution-ShareAlike3.0UnportedLicense.

5

InclusiveDesignPrinciple

• Prioritising content Theprimarycontentonanewsarticlepageisthestory,thereforeitshouldcomebeforeothercontent,bothvisuallyandinthesourceorder. elatedcontent,suchassimilararticles,shouldfollowit,andunrelatedcontentafterthat.

• Prioritising editorial:Editorialforlinks,headingsandbuttonsshoulduseplainlanguageandputtheprimarytextfirst.Thisappliestobothvisibleandhiddentext.Thismakesthetexteasytoscanbothvisuallyandaudiblyforscreenreaderusers.Plainlanguagealsobenefitsnonnativespeakersandiseasiertotranslate.

• Keep task focused: Progressivelyrevealfeaturesandcontentwhenneeded,notallinonego.

• Prioritising tasks: Anemailapplicationisprincipallyforwritingandreadingemail.The‘compose’buttonis,therefore,presentonallscreens,andearlyinthefocusorder.Theinboxisprioritisedoverotherlistsofemail,suchas‘sent’and‘spam’messages.Lessusedfeaturessuchastaggingororganisingemailintofoldersappearlaterinthefocusorder,astheywillgenerallyonlybeusedwhentheprimarytaskofreadingtheemailiscomplete.

elpusersfocusoncoretasks,features,andinformationbyprioritisingthemwithinthecontentandlayout.

Prioritisecontent

Interfacescanbedifficulttounderstandwhencorefeaturesarenotclearlyexposedandprioritised.Asiteorapplicationmayprovidelotsofinformationandfunctionality,butpeopleshouldbeabletofocusononethingatatime.Identifythecorepurposeoftheinterface,andthenthecontentandfeaturesneededtofulfillthatpurpose.

Adapted from inclusivedesignprinciples.org

Examples of how to achieve this principle

Compose

1 2•

For more information go to barclayscorporate.com/accessibility ThisworkislicensedundertheCreativeCommonsAttribution-ShareAlike3.0UnportedLicense.

6

InclusiveDesignPrinciple

• Make task completion easier: Adda‘Showpassword’buttontoinputfieldssouserscanverifytheyhavecorrectlyinputtext,oraddtouchidentificationforpasswordprotectedareas.

• Integration with connected devices or second screen:Usingvoiceinterfacestocontrolmultimedia,searchforcontent,outputfrommusicorT addsvalueforpeoplewhostruggletouseotherinterfaces.

• Integration with platform APIs:Enhancefunctionalityusingplatformfeatures.ThevibrationAPImakesnotificationsmoreusablebydeafandhardofhearingpeoplewhilethegeolocationAPImakesiteasierforpeoplewithmobilityimpairmentstouselocationbasedservices.

Considerthevalueoffeaturesandhowtheyimprovetheexperiencefordifferentusers.

Addvalue

eaturesshouldaddvaluetotheuserexperiencebyprovidingefficientanddiversewaystofindandinteractwithcontent.Considerdevicefeaturessuchasvoice,geolocation,cameraandvibrationAPI’s,andhowintegrationwithconnecteddevicesorasecondscreencouldprovidechoice.

Adapted from inclusivedesignprinciples.org

Examples of how to achieve this principle

Show password

qwerty123

For more information go to barclayscorporate.com/accessibility ThisworkislicensedundertheCreativeCommonsAttribution-ShareAlike3.0UnportedLicense.

7

InclusiveDesignPrinciple