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.
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ñol. </p> (Spanish)
<p lang="fr"> Cette phrase est en français </p> (French)
<p lang="cy"> Mae’r frawddeg hon yng Nghymraeg. </p> (Welsh not always supported) </p>
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.
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
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 Webaim.org Colour Contrast Checker
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