Skip to main content Skip to navigation

How to format your content

Formatting your page correctly

Formatting your page correctly helps people with accessibility needs. However it also helps people to scan-read online, which benefits all your users.

Minimise use of bold text

Do not use bold for emphasis. Screenreaders do not see this emphasis, so consider using proper headings and subheadings instead.

Do not make lots of words or phrases within a paragraph bold, as it makes it harder to read.

Minimise use of italic text

Many users find blocks of capital letters hard to read.

Use italics for the following:

  • Publication titles
  • Works of art
  • Foreign words within English text

To add visual weight to important information, use SiteBuilder's box styles.

Do not write in all-caps

People perceive all capitals as shouting, and some users find them harder to read. Screenreaders do not pick up on it as a form of emphasis either.

To make it simple, at Warwick we should not write in all caps.

Use language tags

If you write text in another language, you need to tag it appropriately as shown:

<p>This sentence is in English. </p>

<p lang="en-GB"> This sentence will be read with a British accent </p>

<p lang="es"> Esta frase es en espa&ntilde;ol. </p> (Spanish)

<p lang="fr"> Cette phrase est en fran&ccedil;ais </p> (French)

<p lang="cy"> Mae’r frawddeg hon yng Nghymraeg. </p> (Welsh not always supported) </p>

Keep text left-aligned

This makes the text easy to discover for people using text resizing or zoom. If the text doesn’t start at the same point on the left side, it is also harder for some users to read.

Do not 'span right hand side'

You should not create a page which has text going across full-width from side to side on Sitebuilder. This makes it harder for any user to scan-read, and especially hard for some people with reading or visual disabilities.

Format tables points properly, and try not to use them if possible

You can follow ITS guidelines around tables and give your tables headings to make the more accessible.

If possible though, avoid using tables - they do not appear well on mobiles and can be difficult for screenreaders to use. Instead format your information into bullet point lists where possible.

Learn more about tables from W3.orgLink opens in a new window

Do not rely on colours to mean something

Do not use colour as the only way to explain or distinguish something. Instead, use a combination of colour, shapes and text to convey meaning.

Test your page using the Google NoCoffee Chrome plugin

Colour contrast

Use text colours that show up clearly against the background colour

  • Body copy must pass WCAG AA Normal Text.
  • Header copy must pass WCAG AA Large Text.
  • Graphical Objects and UI components must pass WCAG AA

Test it with the Colour Contrast Checker

Use light backgrounds for text

Do not use lots of light text on dark background. People find it hard to read.

Instead, use white or light background colours for your body copy text.

Site colours

At the moment, we have restricted site colours to five main ones which allow sufficient colour contrast:

  • Warwick Grey #393A3B
  • Ruby Red #9A1310
  • Aubergine #552D62
  • Sky Blue #00407A
  • Warwick Green #0F4001

See advice about brand colours

You might also be interested in: