View
218
Download
2
Category
Preview:
Citation preview
• 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
Recommended