Accessibility guidelines

Visual identity ͏

Downloads and resources

#p10 #st1684229163534-2{ overflow-y: auto; }

height: 4px;

Accessibility guidelines

For content creators

These guidelines have been developed from real-life examples and are for everyone who writes or reviews content. We will cover topics like headings, upper and lower cases, text alignments and text decoration.

Heading structure

Headings help to structure the content of a page by splitting information out into different sections. They help sighted users to scan the page and find information quickly. But they're also essential for assistive technologies, for users to be able to navigate a web page.

There are six heading levels (from <h1> to <h6>) at your disposal for content structuring. Heading 1 is the most significant, typically mirroring the page's title and providing users with a clear overview of the page's subject matter. It is essential to have only one Heading 1 per page.

Each Heading 2 introduces a new content section, effectively organizing the page into digestible segments. As you progress to the next heading, consider whether it represents a distinct section. If it does, use a Heading 2. If it's a subsection of the previous Heading 2, opt for Heading 3, and so forth. Avoid jumping heading levels (for example, directly from H1 to H3) to ensure optimal accessibility. Screen reader users heavily rely on hierarchical heading structures for navigation, and a non-hierarchical structure may cause confusion.

Write descriptive alt-text

Alt-text also helps screen-reading tools describe images to visually impaired readers and allows search engines to better crawl and rank the page. It also appears in place of an image on a web page if the image fails to load on a user's screen.

Describe the image and be specific. Use both the image's subject and context to guide you.
Add context that relates to the topic of the page. If the image doesn't feature a recognizable place or person, add context based on the content of the page.
Keep your alt-text fewer than 125 characters. Screen-reading tools typically stop reading alt-text at this point, cutting off long-winded alt-text at awkward moments when verbalizing this description for the visually impaired.
Don't start alt-text with "Picture of..." or "Image of...".. Jump right into the image's description. Screen-reading tools (and Google, for that matter) will identify it as an image.
Use your keywords, but sparingly. Only include your article's target keyword if it's easily included in your alt-text.
Don't add alt-text to every image. You should add alt-text to most images on a webpage for the sake of SEO, UX and accessibility—however, there are exceptions. Images that are purely decorative or are described in text nearby, for example, should have an empty alt attribute.

Create meaningful link text

Link text should include relevant information about the destination and describe the content of the link target. The whole point of link text is to let the user know where they are headed if they click on it. To create meaningful link text:

Use keywords relevant to the context of your link
Don’t use terms like "click here" and "read more"
Write link descriptions that are easy to read and keep your links concise.
Don’t create redundancy
Be sure to write useful alt text when linking images

Readability

Uppercase vs lowercase

The general rule is to use lowercase (sentence case) when writing text on the web. When we read, we don't look at every letter in a sentence, but the shapes of the words. When text is in all caps, the height of every letter is identical making every word an even rectangular shape, forcing us to read letter-by-letter, reducing our reading speed. There are two problems with capitalized text.

Some screen readers read capitalized text letter-by-letter.
Capital letters are harder to read (for everyone especially people with reading disabilities), and it can also appear that you are SHOUTING AT THE READER.

Exceptions

There are some exceptions when we can allow the use of uppercase in text, such as labels (pre-title), in the header for the menu, buttons and with the hamburger menu. For example: MENU/CLOSE.

Text align: left, center, right

Left alignment is by far the most popular text alignment, and also the default one. Left text alignment should be used in 98% of cases to help your readers read at an optimal and undiminished reading speed.
Center alignment can be used in small doses like section-headings without detracting from the user experience, but there shouldn't be a combination of left and center alignment within the same content section. It can also be used at the bottom of pages as call to actions, giving less lengthy content with better symmetry. The reason why center text alignment is a poor choice for user experience is that with each new line the user reads, there is a brief moment where the user has to find where the next line begins–decreasing the user's reading speed.
Right alignment is rarely used and should be avoided because it forces the reader to read in a weird way. The only acceptable place to use right alignment is within navigations on websites.
Avoid justified text if a line of text is forced to fit the given space, some words will have more whitespace in between than usual. This makes it difficult for people with visual or cognitive impairments.

Use bulleted and numbered lists correctly

When bulleted and numbered lists are included in the content, use the appropriate tools in the publishing software for this purpose, rather than entering dashes or numbers from the keyboard with carriage returns.

Text decoration: Underline

Underlined text is a text decoration used on a web page, with the attribute HTML tag or CSS text-decoration: underline. Underlined text is generally used to indicate linked text on webpages and should be avoided for emphasis.

Reserving underlines for links will help ensure that our website behaves predictably for all users. This is useful for people of all abilities but is especially helpful for older or less web-savvy users and people with cognitive disabilities.

We strongly advise you not to underline to emphasize text. Use bold instead.

Checklist

A few simple things content writers can do to improve accessibility:

☑

Give you content a unique title:

Use a strong, unique and meaningful title that clearly describes the purpose of the content.

☑

Use correct heading levels:

Make use of the heading structure in your content management system (H1 to H6) to provide structural hierarchy.

☑

Use plain language:

Keep your language simple. If acronyms, jargon or technical language is required, provide plain language alternatives or a glossary.

☑

Make text easy to read:

Choose left alignment, rather than justified text to improve readability and use lists to present appropriate content.

☑

Make link descriptive:

Avoid using catchalls like "click here/read more". Give links a meaningful description to assist scan reading and screen readers.

☑

Use meaningful alt-text:

If an image is purely decorative, set alt-text to null (alt=""). Otherwise use a description that would help visually impaired users understand what is being represented.

☑

Use tables appropriately:

When presenting tabular information, use an actual table not an image and ensure table headings are used correctly.

☑

Provide text alternatives for audio/video:

Add captions or transcript for both audio and video.

You can find more learning opportunities on accessibility on our Hub page.