• Notifications: Notificationsthatappearinaninterfacearevisuallyobviousbutrequireproactivediscoverybyscreenreaderusers.Acomparableexperienceforblindusers,canbeachievedbyusingaliveregion.Thenotificationthenrequiresnoexplicitactiononthepartoftheuser.
• Content for alternatives: Havingabasicalternative,whetherit’salttext,atranscript,audiodescription,orsignlanguage,makesthecontentaccessiblebuttobeequivalentitneedstocapturetheessenceoftheoriginal.
Ensureyourinterfaceprovidesacomparableexperienceforallsopeoplecanaccomplishtasksinawaythatsuitstheirneedswithoutunderminingthequalityofthecontent.
Providecomparableexperience
Whetheroutofcircumstance,choice,orcontextpeoplearediverse.Aspeopleusedifferentapproachesandtoolstoreadandoperateinterfaces,whattheinterfaceofferseachusershouldbecomparableinvalue,quality,andefficiency.
Adapted from inclusivedesignprinciples.org
Examples of how to achieve this principle
Closed captions
• Ergonomic features: Providingsynchronisedclosedcaptionsmakesyourvideoaccessible.Butmakingthemcustomisable,colorcoded,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.Onmobileswipetodeleteanitemcanbesupportedtogetherwithaneditbuttonthatallowsyoutoselectitemsthendelete.AnexampleofthisisiniOSmail.
Considerprovidingdifferentwaysforpeopletocompletetasks,especiallythosethatarecomplexornonstandard.
Offerchoice
Thereisoftenmorethanonewaytocompleteatask.Youcannotassumewhatsomeone’spreferredwaymightbe.Byprovidingalternativesforlayoutandtaskcompletion,youofferpeoplechoicesthatsuitthemandtheircircumstancesatthetime.
Adapted from inclusivedesignprinciples.org
Examples of how to achieve this principle
Edit
FlagMore Trash
• Accessible alternatives: Alternativewaysofpresentingdata,suchasdatatablesforinfographics,shouldbeavailabletoallusersasanoptionratherthanahiddenlinkjustforscreenreaderusers.Accessiblealternativescanbenefitnotjustaspecifictargetgroupbutallusersaslongasweofferthechoice.
• 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: You’reawarethatthevideocontentyouareprovidingwillbeconsumedonmobiledevices,whichmaybeinpublicspaceswherepeoplemightprefertoconsumethecontentwithoutbeingantisocial.Forsmallerviewports,soundisswitchedoffandcaptionsactivatedbydefault.
• Colour contrast:Whenusinganinterfaceoutdoors,goodcontrastlessenstheimpactofbrightsunshine.
Peopleuseyourinterfaceindifferentsituations.Makesureyourinterfacedeliversavaluableexperiencetopeopleregardlessoftheircircumstances.
Considersituation
Peoplearefirsttimeusers,establishedusers,usersatwork,usersathome,usersonthemove,andusersunderpressure.Allofthesesituationscanhaveanimpact.Forthosewhoalreadyfindinteractionchallenging,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.Keepingeditorialstyleconsistentisalsoimportant,suchasmakingsurethetopofarticlesalwayshaveaclearlymarkedsummaryparagraph,ormakingsurebulletsalwaysstartwithaboldeddefinition.
Usefamiliarconventionsandapplythemconsistently.
Beconsistent
Familiarinterfacesborrowfromwell-establishedpatterns.Theseshouldbeusedconsistentlywithintheinterfacetoreinforcetheirmeaningandpurpose.Thisshouldbeappliedtofunctionality,behavior,editorial,andpresentation.Youshouldsaythesamethingsinthesamewayandusersshouldbeabletodothesamethingsinthesameway.
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.Relatedcontent,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.
Helpusersfocusoncoretasks,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,outputfrommusicorTVaddsvalueforpeoplewhostruggletouseotherinterfaces.
• Integration with platform APIs:Enhancefunctionalityusingplatformfeatures.ThevibrationAPImakesnotificationsmoreusablebydeafandhardofhearingpeoplewhilethegeolocationAPImakesiteasierforpeoplewithmobilityimpairmentstouselocationbasedservices.
Considerthevalueoffeaturesandhowtheyimprovetheexperiencefordifferentusers.
Addvalue
Featuresshouldaddvaluetotheuserexperiencebyprovidingefficientanddiversewaystofindandinteractwithcontent.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
