Inclusive design

Ensuring our digital services are accessible to as many people as possible.

What is inclusive design?

Inclusive design is the practice of considering as many people as possible in design decisions to produce solutions that cater for people of all abilities.

This guide should help shape the way we approach inclusive design, as well as help us work towards being WCAG 2.0 AA compliant.

Why is inclusive design important?

Diversity and inclusion are part of Skipton's core values. We have a moral and ethical duty to consider as many people as possible when designing solutions, to ensure they are accessible to as many people as possible.

22% of people in the UK are registered as living with a disability
8.6m people in the UK have access needs and browse the internet
25% of Skipton customers would benefit from simple and consistent page layout, text and language
3m people in the UK are colour blind
80% of customers with access needs favour websites that present the fewest barriers over cheaper price

How to use this guide

This guide has been designed to be used by anyone involved in developing content for any of Skipton Building Society's websites, emails and mobile apps.

These guidelines are based on accessibility best practice and our accessibility principles, and should be followed wherever possible. If we need to deviate from these guidelines, we need to ensure that appropriate consideration has been made from the right stakeholders - speak to your contact at Skipton if in doubt.

Headings hierarchy

How we use headings is vital for providing a logical flow to the content of a page - particularly for those who cannot see the visual layout.

Some assistive technologies use the hierarchy of headings to provide an indication of the structure of the page as well as navigation or an index of the content, so it's important they are clear to understand and correctly structured.

illustration of correctly nested headings — Good: Headings must be nested in the correct order, with **no headings skipped.**

illustration of incorrectly nested headings — Not good: A Heading is skipped, breaking the hierarchy.

Every page should have a <h1> tag
Subsequent headers should be structured to match the logical hierarchy of the content. For example, a <h2> should follow a <h1>, a <h3> should follow a <h2>, and so on
The structure of the content should drive the choice of the heading tag, not the visual presentation of the heading.

Content structure

Large blocks of copy can be very difficult to digest - particularly for those with visual or cognitive impairments.

illustration of a block of content — Not good: large blocks of copy can be difficult for users to skim.

illustration of content laid out using headers, images and lists — Good: Using headings, illustrations and lists make the content easier to digest and skim.

Clearly distinguish sections of content by using appropriate and logical headings
bullet or numbered lists can be a lot easier to digest than blocks of copy
Blocks of content can be broken down by using appropriate images.

Content alignment

Users who use screen magnification and those with dyslexia rely on a straight left margin and uneven right margin to identify lines of text, so anything other than left aligned text can make blocks of content difficult to read. Similarly, justifying text to both margins and introducing uneven spacing (kerning) between words disrupts the rhythm of the content.

illustration of left aligned copy — Good: Left aligned copy should be used wherever possible

illustration of centralised copy — Okay: Centralised copy can be used, but for a maximum of three lines of copy

illustration of right aligned content — Not good: Right aligned copy should never be used.

Always use left aligned text for body copy
Centralised text can be used for headers or short paragraphs, where the text doesn't span multiple lines (more than 3)
Never justify text or align to the right.

Text styling

Styling text is a great way to emphasise key messages and ensure our web pages deliver the Skipton brand experience. But additional consideration needs to be made to avoid a host of potential accessibility issues for those with sight or cognitive impairments.

Serif/sans-serif

illustration of a block of sans serif text, with a serif header — Good: Serif font used for the header, and sans-serif font used for the body copy

illustration of a block of serif text — Not good: Serif font used for the header and the body copy

Only use sans-serif text for blocks of copy - The 'ticks' and 'tails' of serif fonts reduce legibility, and can make it difficult for some people to identify the shapes of characters.

Block caps

Avoid block-capitalisation - it is particularly difficult for people with dyslexia to identify due to the lack in differentiation in shape.

Bold text

illustration of a block of text, with bold used to emphasise some text — Good: bold text is used for the heading, and to give emphasis to a small section of text.

illustration of a block of text that is all bold — Not good: bold is used for the full block of text.

Only use heavier weights for headings, or to add strong emphasis to parts of copy.

Italics

illustration of a block of text that is all italicized — Not good: italics is used for the full block of text.

Don't italicise blocks of text - italics should only be used in references, and for emphasis if bold isn't appropriate.

Underline

Underlining is conventionally reserved for hyperlinks only - underlining other content can make it look clickable when it isn't.

Line length and spacing

illustration of a block of text, with ample line spacing — Good: text has ample line spacing

illustration of a a block of text that is too tight — Not good: lines of text are tight together

Long lines of text can confuse the eye and can make it difficult for those with a reduced field of vision to move from one line of copy to the next. Combine shorter lines of text with a sufficient line height to allow lines of copy to be clearly distinguished.

Aim to keep blocks of copy beneath 75 characters per line
Line height should be at least 1.5x the font size.

Colour contrast

It's important that we ensure we have enough contrast between the colour of text and the background it sits on.

In order to be WCAG 2.1 AA compliant, we need to ensure that our text has a contrast of at least 4.5:1 for body copy. It is also important that we don't present text with the contrast that is too high, because it can be particularly difficult for people with dyslexia and visual impairments to read.

To see the colour contrast ratios of our colour paletter, view our Colour Contrast Matrix.

Body text

illustration of a block of white text on a mid blue background — Good: Contrast Ratio of White body text on Skipton Blue background is 4.5:1

illustration of a block of white text on a cyan background — Not good: Contrast Ratio of White body text on Online Cyan background is only 3.02:1

Body text should have a contrast ratio with a background of at least 4.5:1

Headings and larger text

illustration of large white text on a cyan background — Good: Contrast Ratio of White body text on Skipton Blue background is 3.02:1 is permissable, as it is over 24px

illustration of a block of regular white text on a cyan background — Not good: Contrast Ratio of White body text on Online Cyan background is only 3.02:1 cannot be used, as it is only 16px

Text that is larger than 24px can have a contrast ratio of at least 3:1

Bright colours

illustration of a large block of white text on a blue background — Not good: Whilst White text on a Online Blue background meets colour contrast requirements, the vivid background may make it difficult for some users to read.

illustration of a large block of dark grey text on a light grey background — Better: Using a less vibrant background, such as Grey, can be easier for users to read.

Text that is larger than 24px can have a contrast ratio of at least 3:1

Text on images

illustration of text obscured by a background image — Not good: The text is obscured by the background image

illustration of a text on a clean background image — Better: The text is on a clear area of the background image

Text should only be placed on top of clean images, to minimise distraction. To improve legibility and colour contrast, an overlay can also be added.

Images

By their very nature, images are inherently inaccessible to those who suffer from certain visual and cognitive impairments. However, they also provide huge usability and accessibility benefits to others.

With this in mind, we must consider a variety of users - and the purpose of the image - when creating digital assets.

Alt Text

We need to add suitable measures to ensure people using assistive technology can interpret images. We do this by adding alternative text to an image, which a screen reader or other assisitive technology will read out/present to a user. We do this by adding an alt attribute to the <img> element, which contains a short description of the image:

<img src="leeds-branch.png" alt="The Skipton Building Society Branch in Leeds">

Images that convey meaning or information should have an alt attribute
Alt text should be short, and used to describe the image - not for promoting keywords

Decorative images

For decorative images, ensure the <alt> attribute is present but left empty, and role="presentation" is added to the <img> tag:

<img role="presentation" src="decorative-image.png" alt="">

Important

An <alt> attribute is required for all inline images to be WCAG 2.1 AA compliant

Images of text

Images for websites should not have text embedded into them.

There are a host of usability and SEO reasons for this, but the biggest impact is on accessibility. Whilst this message can be presented using alt text, not all users with access needs will use screen readers.

Warning!

Images of text is an explicit WCAG 2.1 AA fail

If text needs to be visually enhanced, it should be done using modern HTML and CSS techniques. The only exceptions to this are if the image is a logo, or if the HTML and CSS techniques aren't available in certain technologies (i.e. emails).

Embedded text in images won't work with:

Text translation

some users replace typefaces for alternatives that are more suitable for them. For example, people with dyslexia may use specific typefaces that have been designed to be easier to read. Images embedded in images cannot be identified by this technology.

illustration of content being translated from English to Italian — HTML text can be identified by text translation services

Text scaling

Users who need to magnify content can struggle to read images of text, as they often become distorted or pixelated when scaled up.

illustration of a HTML text enlarged to 400x — Good: Using HTML text means that text can be scaled to any size a user needs

illustration of an image of text enlarged to 400x, with noticeable blurring — Bad: When bitmap images - like .JPG or .PNG - of text are scaled, the text becomes distorted by pixelation and artefacts.

Selecting text

Users may wish to select text for various reasons, including copying content to another document, or using one of the many options that modern browsers offer when you right click, such as:

reading the selected content aloud
Searching the web for the selected content
Creating a link to the content for later use
Translating selected content to another language
Finding a definition for the selected content

illustration of selectable HTML text — Good: HTML text allows the user to highlight it.

illustration of an image of text, that cannot be selected — Bad: Images of text cannot be highlighted or selected - trying to do so normally results in the image being 'dragged'

Font replacement

Users may have their device set up to convert any text to a font of their choice - including specific dyslexia-friendly fonts.

Videos

Video content is a great way to present information in a rich and engaging fashion. However, it also presents several accessibility challenges that need consideration.

In its most basic form, video content should be delivered with user-controlled captions, but we should also consider providing transcripts and audio descriptions.

Captions

Captions are a great way to deliver the content of a video to users with hearing impairments, but also ensure the content can be digested by those who choose for the sound not to play by default - for example, on a Facebook feed.

Example: A correctly captioned video on YouTube, where the user can manually turn on the captions by selecting the 'cc' button

Whilst they may look similar, captions and subtitles are designed for different purposes. Subtitles provide a text alternative for the spoken words of a video and are most commonly used for translating language. While captions provide text descriptions for all the audio of a video.

We should always use captions, not subtitles
We should always use closed captions. These enable a user to control the display of captions
Captions should not be embedded directly into the video
Captions should always be correctly synchronised with the audio of a video
Where possible, transcripts should also be provided.

Navigation

It is important that users of all abilities can navigate our websites - both site-wide and at individual page level.

Skip links

Skip links - also known as 'skip to content' links or 'skip nav' links - allow users with assistive tech to bypass the navigation to a key landmark on the page. Without this functionality, users have to listen to the full navigation of a site being read out, before they are presented with the actual content of a page.

Traditionally, skip links tend to be visible only to screen readers or keyboard navigation, and link to an identified point in the page beneath the navigation.

Whenever we use a global navigation on a site, we should include the option to skip past it.

Keyboard navigation

Research shows that 20% of Skipton customers would benefit from being able to navigate websites with a keyboard, so we should ensure that our pages can effectively be navigated without the use of a pointing device like a mouse or trackpad.

Every link on a page should be selectable using the Tab key, in the correct order
When a link is selected, it should appear visually different (not just in colour).

References

Some useful reading on inclusive design, and designing for people with access needs: