Guidance for working accessibly with the LGA

You can find out more about the guidelines for digital content with the following documents: 

• How to meet WCAG (Quick Reference)
• WCAG 2.2 at a glance
• Web content accessibility guidelines 2.2.

Further guidance is also available from WebAim and the UK Government.

Below we list some of the key considerations to help you with the processes. If you have questions about accessibility and your commission, please speak with your lead contact at the LGA.

A logical reading order means that the content flows in a predictable way. In the UK this means the content reads left to right and top to bottom.

The content should be contained with related information, and at no point should it not be obvious what the next piece of content is.

Don't rely on sensory information. For example, don't refer to ‘the panel on the right’. This is because using the word right implies that somebody can see and therefore has a sense of what the right is of the thing they're reading. You should label the panel correctly with a title and refer to it in that way.

If you select a heading, a sighted user can understand what is left, right, up or down from that heading. But for somebody using a screen reader it's linear. You just have content before it and after it.

The LGA has a preferred style and style guide and we’d encourage you read this document thoroughly before starting your work.

Headings are one of the easiest way to structure your content. All of your content should fall under a heading and be related. If you jump between topics and don't have relevant headings users can quickly get lost in the content. Users of assistive technology use the headings to quickly jump and scan to information, so it is a very important factor in the user’s experience.

Programme headings

A heading which looks like a heading, and a heading which has been programmed to behave like a heading are very different.

Don't just use a bigger or bolder font. They may look visually like headings, but if they aren't actually defined as headings then assistive technology won't recognise them correctly.

You should tag your headings correctly in Microsoft Word. You can find the headings within the Styles Pane in the Home ‘ribbon’.

Website headings and headings in PDFs take their lead from documents created in Microsoft Word, so you should be careful to choose the appropriate heading.

Use correct heading level

When using headings, the correct level is also important. A heading level 1, or H1 is the one which should tell a user what the bulk of the content is in relation to.

A heading can have any level from H1 to H6. However, each heading level should relate to all the headings above it. The higher the number the more detail on the topic you should be going into.

Further information on Headings and Hierarchy is available at Semantic structure: Regions, headings, and lists (WebAim).

Just like with headings, you should always use the correct formatting for the different elements in your context. For example, a quote should be programmed as a quote and not just styled to look different.

When you create a hyperlink, use meaningful text as links. This makes your content accessible to people using screen readers: Avoid uninformative link phrases such as ‘click here’ or ‘read more’. Do not use shortened versions of URLs (web addresses) such as TinyURLs or Bitly. For example:

• Read our e-government case studies.

is more helpful than

• Click here for more information.

Screen readers will tell users when they encounter a link. You do not need to use the words ‘link’ or ‘links to’. Screen readers read URLs (web addresses) letter by letter, so avoid using them as link text.

Further information on accessible links is available from ‘Links and hypertext’ by WebAim’.

If you use an image, think about if it is really needed and if there is no other way to get that content across.

If you do use an image, you must provide alternative text (alt text), and you must not use assumptions such as ‘as you can see from this image’ or ‘shown in figure 1’.

Alternative text

Alternative text is a description of the image for assistive technologies. You should make the alternative text helpful for the user and give enough context so that even if you can't see the image you can have a good understanding of what it shows. In general, the text should not exceed 140 characters in length.

When you believe that you cannot keep this text to below 140 characters, you must provide a ‘long description’. This is text that should be placed near to the image so as to provide the relevant information. Very often this text will be necessary for complex charts or images when the key bits of information are not already covered in the body text.

Alt text can be tricky to get right and does take practice. The following guidance will be useful:

• alt text decision tree
• five golden rules for compliant alt text.

Decorative images

For any images which are not relevant to the understanding of the context, they should be marked as decorative. In Microsoft Word, mark the image as decorative, in PDFs you should mark decorative images as artifacts.

Text as images

Never use pictures of words as a replacement for actual words. This can get very confusing for people who are using screen readers and it can make the words blurry if somebody is using a screen magnifier.

Use of colour should be well considered. Are you changing the colours just because you think it looks nicer? Or are you trying to draw attention to certain information?

If you do use colour, make sure it isn't the only method of communication.

Before exporting your document, remove all the colour and make sure it still makes sense.

Colour contrast

When using colour, you should make sure the contrast ratios are strong enough for people who might have visual impairments.

If you use soft contrasts, such as pastel colours on a white background, then some people will simply not be able to see the words.

Make sure the colour contrast is sufficient between text and surrounding elements. It should be 4.5:1 for normal text or 3:1 for large text.

Large text is anything over 18pt, or bold text which is larger than 14pt.

Normal text is anything under 18pt and is not bold.

You can use the WebAim Colour Contrast Checker to make sure your colour combinations are accessible.

Tables should only be used for data or comparative information rather than for layouts and visual design.

Keeping tables simple and using clear headings is the best way to make them accessible. Don't use merged cells or nest tables within tables.

If you do have a table, it is best to summarise the data in a paragraph. This is good so that people with screen readers don't have to go through the table cell by cell to get the insights from it.

Tables should have alt text and a caption to further improve the experience for screen reader users.

Providing a table of data is a good way to accompany what might be a difficult to describe visual chart.

Most major authoring tools contain automated checkers to make sure that have not introduced any obvious errors.

Automated checkers can’t find every error, but they will help you find some of the common ones such as missing alternative text.

If you are working on a website or html document, you might also find useful several browser extensions and tools:

• Wave web accessibility evaluation tool
• axe DevTools.

When planning your report or project, you need to be aware that producing a certain format, it will raise its own issues surrounding accessibility.

Microsoft Word is naturally more ‘accessible’ than other document formats, but that only holds true if the content is carefully added in the appropriate ways. As with other documents, consideration to colours, layout and images must be given. You can consult the LGA’s writing style guide for further information on colours and styles.

For large documents (over eight pages) a table of contents must be provided.

When you export your document from a word processor or design programme, you should always export it with accessibility tags. These are additional bits of information which tell assistive technologies that a heading is a heading and a quote is a quote.

If you don't export with tags, all of that hard work you've done to make your document accessible will be lost.

If you have agreed with the LGA that a PDF document will be produced, then you must ensure that it is fully tagged and reaches the above mentioned standards. This is a specialist task and you should ensure that an appropriate amount of time and budget is given to reach the required level. 

Documents over eight pages should also contain bookmarks to help the user navigate throughout the document. If you have already created a semantically viable document, then bookmarks can be autogenerated with ease.

Every video produced or commissioned by the LGA must be captioned and accompanied by a transcript. Typically, this would include (but not limited to) content embedded on the LGA's website, uploaded to YouTube channels or used through our social media.

We also ask that when producing titles for the video, that sufficient colour contrast is provided and that consideration is given to audio levels compared with recorded background noise.

Further guidance on producing videos:

• making audio and video media accessible

Every podcast produced or commissioned by the LGA must come with an accurate transcription of the audio content (this would include information that is not conveyed through speech, for example, a doorbell rings and guests are interrupted).

As with video production, consideration should be given to audio levels and music/other noise. There are best practice guidelines that can be followed, which involves measuring the difference between background noise and speech.