You are currently using an unsupported browser which could affect the appearance and functionality of this website. Please consider upgrading to the latest version or using alternatives such as Mozilla Firefox, Google Chrome or Microsoft Edge.

Accessibility guidance

It is essential to create content adhering to the guidance below in order to be compliant to WCAG 2.1 https://www.w3.org/TR/WCAG21/

Heading structure

Headings should be correctly structured to communicate the page structure, not only visually but also to a screen reader.

All pages should include a single Heading 1. Headings 1-6 should be used hierarchically in order to prioritise content and should not be chosen based on the size or appearance of the heading. Levels of headings should not be skipped and bold text should not be used instead of the correct heading tag. Typical content pages would only use headings 2 or 3.

Headings should not be used within tables.

Tip: Plan out your heading order before creating your page.

Links

Link text should clearly identify the purpose of a link without additional context needed. Meaningful links will aid users who utilise assistive technologies. Avoid text such as click here or read more and avoid using long urls as link text.

Multiple links going to the same place should use the same link text. Links with different purposes should have different link text.

Avoid using images as links. If the image does need to be a link, make sure the image has an alt tag to describe the location or purpose of the link.

Alternative text description – Alt tags and transcripts

Images will always need an alt attribute but depending on their context, images may or may not need a descriptive alt tag.

Alternative text descriptions should be concise, if a more complex description is required this should be within the main page text.

Alt text should not include “picture of” or “image of” as screen readers will add “image of” before the content is described.

If images are accompanied by content that sufficiently describe the image (for example a caption) then no descriptive alt text is required. Also if images are purely decorative (for example campaign images) then no description is required.

If an image is the only thing in a link it must always have descriptive alternative text. If the image is wrapped in a link that includes text, the image should have an null alt tag (alt=“”).

Embedded video content should have a link to a text based transcript.

Tables

Tables should be marked up correctly using table header ( <th> tag) to clearly define their purpose. <thead> and <tbody> should be used to separate table header from table body.

Tables should be used to present data and not for layout purposes. Captions should be included to describe the table. Where necessary consider using multiple tables instead of overly complex table structures. Avoid using blank table cells.

Infographics and charts

Where possible, an infographic should be built using html and css. If the infographic needs to be an image, an alternative text description should either be provided in an alt tag or within a transcript in the page.

Where an infographic needs to be within an image then the colours used should meet colour contrast requirements. Using only colour to show meaning should be avoided. Text within infographic images should be a readable size and also use a web standard font.

Charts should be also be made available as a table of data or spreadsheet download. Like infographics, charts should avoid using only colour to determine meaning.

PDFs and documents

Ideally content would be served as accessible html on a webpage as opposed to a pdf download. When creating your document consider the following:

  • Text
    • Use heading markup to structure the document as opposed to bolding or changing font sizes
  • Images  
    • Add meaningful alt tags to images
    • Do not include phrases like “image of” in alt tags
    • For decorative images insert double quotes only
    • When creating pdfs from images, use OCR to improve it’s accessibility
  • Links
    • Change hyperlinks to make them more readable (not a long urls)
    • Don’t use phrases such as “read more” or “click here”.
  • Tables
    • Consider using multiple tables instead of complex table
    • Make sure table headers are included where appropriate
    • Don’t use tables as a layout device
    • Include table captions
    • Avoid merging cells
    • Don’t leave cells blank
  • Colour contrast
  • Use of colour
    • When creating content make sure colour is not the only method of determining meaning
  • Document names
    • Make sure the file name of the document is descriptive
  • Structure tags
    • Make sure document structure tags are preserved when exporting for pdf