We hope that by sharing these guidelines, alongside infographics from Barclays Accessibility Team, more designers will feel empowered to create accessible websites and applications.

 

What is inclusive design?

Inclusive design is about creating products, environments and services that can be used by as many people as possible, without the need for special adaptation. It is also referred to as universal design.

The Inclusive Design Principles, developed by The Paciello Group, set out best practice guidance for achieving universal, accessible design. They’re aimed at product developers, designers, user experience professionals, web developers, graphic designers and everyone who works within the field of design.

The Barclays Accessibility Team created their own Inclusive Design Principles infographic posters using these best practice recommendations. They are available to download via the links below.

Individual A4 Posters of the Inclusive Design Principles (PDF 2.1MB)

Single A3 Page of Inclusive Design Principles (PDF 500KB)

You can also watch a video which explains these Inclusive design principles on YouTube.

 

Inclusive design principle number 1: provide a comparable experience

Ensure your interface provides a comparable experience for all so people can accomplish tasks in a way that suits their needs without undermining the quality of the content.

Whether out of circumstance, choice, or context, people are diverse. As people use different approaches and tools to read and operate interfaces, what the interface offers each user should be comparable in value, quality, and efficiency.

Examples of how to achieve this principle:

Content for alternatives

Having a basic alternative, whether it’s alt text, a transcript, audio description, or sign language, makes the content accessible. But to be equivalent it needs to capture the essence of the original.

Ergonomic features

Providing synchronised closed captions can make your videos accessible. But making them customisable, colour coded, and repositionable provides a more comparable experience.

Notifications

Notifications that appear in an interface may be visually obvious but require proactive discovery by screen reader users. A comparable experience for blind users can be achieved by using a live region. The notification then requires no explicit action on the part of the user.

 

Inclusive design principle number 2: give control

Ensure people are in control. People should be able to access and interact with content in their preferred way.

Do not suppress or disable the ability to change standard browser and platform settings such as orientation, font size, zoom, and contrast. Avoid content changes that have not been initiated by the user unless there is a way to control it.

Examples of how to achieve this principle:

Scrolling control

Infinite scrolling can be problematic here, especially for users navigating by keyboard because they can’t get past the stream of refreshing content. Give those users the option to turn off this feature and replace it with a ‘load more’ button.

Allow zoom

There are many reasons why a user may want to operate the pinch-to-zoom gesture on their touch device. Make sure it is not suppressed, and that the content does not get obscured when it is put to use.

Make it stop

Some users find that animations or parallax scrolling cause nausea, whereas others simply find them distracting. Where elements or media play automatically, they should at least be easy to stop, by providing the user with prominent playback controls.

 

Inclusive design principle number 3: offer choice

Consider providing different ways for people to complete tasks, especially those that are complex or non-standard.

There is often more than one way to complete a task. You cannot assume what someone’s preferred way might be. By providing alternatives for layout and task completion, you offer people choices that suit them and their circumstances at the time.

Examples of how to achieve this principle:

Multiple ways to complete an action

Where appropriate, provide multiple ways to complete an action. On mobile, swipe to delete an item can be supported together with an edit button that allows you to select items, then delete. An example of this is in iOS mail.

Accessible alternatives

Alternative ways of presenting data, such as data tables for infographics, should be available to all users as an option rather than a hidden link just for screen reader users. Accessible alternatives can benefit not just a specific target group but all users as long as we offer the choice.

Layout

Where there are long lists of content, consider offering a grid or list layout option. This supports people who may want larger images on screen or smaller rows.

 

Inclusive design principle number 4: consider situation

People use your interface in different situations. Make sure your interface delivers a valuable experience to people regardless of their circumstances.

Some people will be first time users, whereas others will be established users, users at work, users at home, users on the move and users under pressure. All of these situations can have an impact. For those who already find interaction challenging, this impact may make usage particularly difficult.

Examples of how to achieve this principle:

Colour contrast

When using an interface outdoors, good contrast lessens the impact of bright sunshine.

Context-sensitive help

Users may need help when they first encounter a complex form or interaction. This help may become redundant, even distracting, as a user becomes more familiar with the form or interaction.

Context-sensitive help provides the user with choice as to when they access help and better control over the page.

Captions on the go

You’re aware that the video content you are providing will be consumed on mobile devices, which may be in public spaces where people might prefer to consume the content without being antisocial. For smaller viewports, the sound is switched off and captions activated by default.

 

Inclusive design principle number 5: be consistent

Use familiar conventions and apply them consistently.

Familiar interfaces borrow from well-established patterns. These should be used consistently within the interface to reinforce their meaning and purpose. This should be applied to functionality, behaviour, editorial and presentation.

You should say the same things in the same way and users should be able to do the same things in the same way.

Examples of how to achieve this principle:

Consistent design patterns

Use consistent web and platform design patterns to help build familiarity and understanding.

Consistent editorial

Use plain language consistently across platforms including editorial that is relied on by screen reader users such as text alternatives, headings, labels for buttons and so on. Keeping editorial style consistent is also important, such as making sure the top of articles always have a clearly marked summary paragraph, or making sure bullets always start with a bolded definition.

Consistent page architecture

Use consistent page architecture across templates to help people scan and navigate key content.

 

Inclusive design principle number 6: prioritise content

Help users focus on core tasks, features, and information by prioritising them within the content and layout.

Interfaces can be difficult to understand when core features are not clearly exposed and prioritised. A site or application may provide lots of information and functionality, but people should be able to focus on one thing at a time. Identify the core purpose of the interface and then the content and features needed to fulfil that purpose.

Examples of how to achieve this principle:

Keep focused on the task

Reveal features and content when needed progressively, not all in one go.

Prioritise tasks. An email application is principally for writing and reading email. The ‘compose’ button is, therefore, present on all screens, and early in the focus order. The inbox is prioritised over other lists of email, such as ‘sent’ and ‘spam’ messages. Less-used features such as tagging or organising email into folders appear later in the focus order, as they will generally only be used when the primary task of reading the email is complete.

Prioritising content

The primary content on a news article page is the story, therefore it should come before other content, both visually and in the source order. Related content, such as similar articles, should follow it, and unrelated content after that.

Prioritising editorial

Editorial for links, headings and buttons should use plain language and put the primary text first. This applies to both visible and hidden text. This makes the text easy to scan both visually and audibly for screen reader users. Plain language also benefits non-native speakers and is easier to translate.

 

Inclusive design principle number 7: add value

Consider the value of features and how they improve the experience for different users.

Features should add value to the user experience by providing efficient and diverse ways to find and interact with content. Consider device features such as voice, geolocation, camera and vibration APIs and how integration with connected devices or a second screen could provide choice.

Examples of how to achieve this principle:

Integration with connected devices or second screen

By using voice interfaces to control multimedia, search for content, output from music or TV, you can add value for people who struggle to use other interfaces.

Make task completion easier

Add a ‘show password’ button to input fields so users can verify that they have correctly input text or add touch identification for password-protected areas

Integration with platform APIs

Enhance functionality using platform features. The vibration API makes notifications more usable by deaf and hard of hearing people while the geolocation API makes it easier for people with mobility impairments to use location-based services.

Thank you to Barclays Accessibility Team for allowing us to share their content.Barclays transparent logo