Top level page heading (H2) (Ref: 02)
NB: When writing your content, please ensure you start with a header, as this frames the content better within the page. Further information on the importance of headers is explained later.
This is an RTE (Rich Text Editor). This component is used for content which has multiple paragraphs.
The default font size is 16px with a normal (400) font weight, but there are options to make font bigger and smaller. Only the standard text direction is available on all web components.
Open Sans 10px
Open Sans 13px
Default - Open Sans 16px
Open Sans 18px
Open Sans 24px
Open Sans 32px
Open Sans 48px
About headings and subheadings (H3)
Headings and subheadings are not just on the page to make it look pretty. They play a key role in helping people navigate and understand the content. In terms of accessibility, the correct heading structure helps assistive technology users and people with cognitive difficulties find the content they need.
Most people visually scan the page to look for information, and headings help users do this. Without a correct heading structure, assistive tech users would have to read the whole page to find information they need.
Reading every word on every web page would be tiring and impractical. Instead, assistive tech users can scan the page using correctly structured headings and subheadings. For example, a screen reader user can bring up a list of the main headings on a page, they can then read and select the subheadings and content in that section. (Example, heading level one...... heading level two......heading level three).
How H tags need to be structured (H4)
To correctly structure headings and subheadings for accessibility purposes, the H tags used must be in a logical order within a page of content ie. H1, H2, H3, H2, H3, H4, H3, H4 etc, and not for example, H1, H3, H4, H2, H5. The Digital team will choose which H tags need to be used when designing the page as the H tags used in other components on the page need to be taken into consideration. If multiple components are used throughout a page, the H tags still need to follow a logical order between components.
The following is the font, size and weight of each H tag:
Heading 2 - Lato 36px/300 (Light)
Heading 3 - Lato 32px/300 (Light)
Heading 4 - Open Sans 24px/600 (Semi-bold)
Heading 5 - Open Sans 18px/600 (Semi-bold)
Heading 6 - Open Sans 16px/600 (Semi-bold)
Bold, italic and underline (H3) (Ref: 03)
The RTE allows text styling to be applied to pieces of content to put a particular emphasis on its meaning. That could be a design emphasis or an importance emphasis, and there are different ways this is achieved using the HTML code.
Bold styling is used to highlight text and there are two HTML tags out there, <b> or <strong>. The difference between the two tags is that the <b> tag is intended to visually draw attention to the text, while the <strong> tag highlights the text and indicates that this is an important word or section of text when read by a screen reader. <strong> is important for SEO and screen readers, whereas <b> isn't. The RTE uses <strong> by default therefore if we want to just visually highlight content, we would need to add some bolder font weight HTML code instead of bolding up text.
Italic styling can be used to emphasise text and there are two HTML tags out there, <i> or <em>. The visual result is the same but the main difference between these two tags is that the <em> tag emphasises on the important word or section of words while the <i> tag is just offset text conventionally styled in italic to show alternative mood or voice. A screen reader will pronounce any <em> words with a verbal stress, but not when <i> is used. The RTE uses <em> by default therefore if we don't want a word verbally stressed by a screen reader, then we would need to choose an alternative styling.
Hyperlinks (H3) (Ref: 04)
Accessible hyperlinks are especially important because screen reader users often scan through lists of links in isolation. This means they do not have the surrounding context to help them understand what the link is for.
To check your hyperlinks, just read the link text - without paying attention to the surrounding content. If the link text still makes sense in isolation and clearly explains where the link goes, it’s likely the text you’re using is accessible.
If you’re using link text like ‘click here’ or ‘more information’ then you’re not meeting this requirement, as link text like that does not describe where the link will go or what it’s for.
Block quotes (H3) (Ref: 05)
Within the RTE you can use "block quotes" to emphasise content. A screen reader will read this content as a "quote" so we need to be mindful how we use this styling. The colour of this can't be changed and no other formatting should be applied ie. font size, hyperlinks.
Bulleted and numbered lists (H3) (Ref: 06)
Sometimes the best way to present information is in a bulleted list. Bulleted lists attract attention, support scanning, shorten text, and reveal the relationship of items.
Digital content is usually not the place for long, narrative writing. Instead, web readers prefer copy formatted for ease of scanning, which allows them to easily skip through chunks of text to get to areas of interest.
Many different web-formatting techniques help break up dense paragraphs. Along with bolding, indenting, line spacing, and colour-coding, bulleted lists are one of the most powerful methods for supporting efficient reading on the web.
A few tiny dots attract the eye and can make a complex concept understandable. Readers perceive the bullets as shortcuts to succinct, high-priority content. It’s not surprising that, in usability studies, we observe readers gravitate towards bulleted lists. Web readers want to digest content quickly.
To draw visual attention to items in a list without implying that items go in a certain order (eg, chronology, importance, priority), use a bulleted list. Use a numbered list if you want to display items in a numbered series. Use a lettered list if you want to emphasise separate parallel items within a sentence.
Bulleted list, where possible, should only be used for the following types of lists:
- Where you need to highlight a range of ideas, options, features or benefits
- Where the entire list is worthy of attention
- Where the items can be conveyed concisely
- Where the items are logically distinct
- Where listing the points in the body text would be cumbersome.
Tables (H3) (Ref: 07)
Tables should only be used for numerical data and not for textual content. Styling of tables can't be changed.
||The contribution taken from your pay before tax
||The impact of your contribution on your take-home pay* (due to tax savings)
Using special characters (H3) (Ref: 08)
Not all screen readers will read aloud certain special characters, therefore the less unnecessary special characters we use on written content, the better. For example, quotation marks and apostrophes used to emphasise words or phrases will not always be clear to tech assisted users as the majority of screen readers don't read them out. Therefore, it is best to use other stylings ie. italics, rather than apostrophes.
Coloured text (H3) (Ref: 09)
There is the option to change the font colour to a brand colour, but this should be used sparingly.