Content review - accessibility

Alt text

If you have access to upload images then you should ensure that when you upload an image you add appropriate "alt" text, this should be a description of what the image represents and should aim to describe what the image is to someone who can't see the image. Alt text is required by screen reader software to give the customer the context of the image.

Example

This table provides examples of correct and incorrect alt text for images

Image	Correct alt text	Incorrect alt text
	Illustration of three people coloured in red with two speech bubbles coloured in grey directly above them.	People chatting Speech bubbles Group chat

Text within an image

You should avoid the use of text within images, as customers with visual impairments who use screen reader software will not be able to read the text within the image. If you are looking to use an image as a graphic or banner to support a scheme, for example, you should be looking to use a block colour/photo/illustration for the image without any text within it - the Web Services team can add the text so that it rests over the image. This will allow screen reader software to read the message and will also present the image to visually able customers with no loss on presentation/display.

Example of a non-accessible image

Email link text and title text (Advisory title)

When including an email in your content, please do not include an advisory title 

Link text

This is the text that the customer will see on the page styled as a link and what they will click/select to take them to another page/website. This text should be descriptive enough to engage the customer to click on the link whilst also representing where they will be taken when clicking on the link. The link text also needs to be meaningful when taken out of context from its surrounding content, this is because screen reader software allows the customer to inspect all the links on a page independently of the surrounding text, which means that from the link text alone they should understand where the link will take them if selected. Good practise is to use the name of a page, file, or website in the link text. You should never use terms such as 'click', 'here', 'click here', etc. for link text.

Descriptive and meaningful link text also helps with Search Engine Optimisation (SEO), ensuring that search providers, such as Google, Bing, etc, correctly index pages for customer searches.

Example

Title text

All links to pages, websites and files should contain "Title text" (referred to as "Advisory title" within Jadu and found under the advanced tab in the Jadu link window), this text is hidden by default and becomes visible when you hover your mouse over the link. Title text is primarily used by screen reader software to add additional context to the link. The title text should be descriptive and explain additional information to the customer about where they will be going when they access the link:

• View - if the link is keeping the customer on the same website but taking them to another page.
• Download - if the link takes the customer to a file to view on the same website.
• Visit - if you are directing customers to another website.

Example

Caption text

All tables should include "Caption" text, this is to introduce and explain the contents of the table. This text will appear above the table and will be visible to all customers. You can add a table caption by right clicking on a table, in the Jadu content area, and selecting 'Table Properties' from the menu presented - on the resulting pop-up window you will see an area to add the "Caption".

Summary text

This is no longer required; however, a caption must be present.

Headed rows/columns

Tables should include a heading row or column in order to give context to the values in the columns/rows. These headings are identified by screen reader software so that it knows how to verbally represent the table to a customer with a visual impairment.

Example

Check your table on a mobile

If you have multiple columns within your table, this may not display fully once in mobile view (columns may be cut off). If this is the case, please let the Web Services team know so we can correct this for you.

Unless you are naming a specific service, scheme, brand, person or adding in an abbreviation you should not use capital letters for words within a sentence (the only exception being the first letter of the sentence).

This includes when you are trying to add additional emphasis to words/phrases on your page, you should not use block capitals, for example "DO NOT", within your sentence/paragraphs. If you need to add emphasis, please add bold formatting to the word/phrase that you want to stand out to the customer, however, do not simply make a whole sentence bold. In addition please do not use:

• italics - italics is hard to read for anyone with visual impairments
• underline - this can be mistaken for a hyperlink.

Example

Headings

Within the content area the largest heading you should select is "Heading 2" (h2), if you wish to use further sub-headings then please use "Heading 3" (h3) and so on, however please note that when using headings they should go down/up by one increment.

Example

Title

If you have a map on your page you must include a sentence/paragraph that introduces the purpose of the map, giving it context on the page. Maps should also have a text equivalent, for example a map displaying a location marker should have the address as text below the map.

Example

View the location of Hadley Community Library on Google Maps:

Address:

Hadley Community Library
Crescent Road
Hadley
Telford
TF1 5NU.

iFrame title

You will also need to add a title in the snippet box that contains the embedded map, insert title text, highlighted in bold below. This title should 

Example

 <div class="video-container"> 
 <iframe title="View the location of Hadley Community Library on Google Maps" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2417.6636446245407!2d-2.4868997840502307!3d52.70216587984906!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487a819594cd066f%3A0x7ecefb3cf9bff964!2sHadley+Community+Library!5e0!3m2!1sen!2suk!4v1503476122756"></iframe> 
 </div>

Title/caption

If you have a video on your page you must include a sentence/paragraph that introduces the purpose of the video, giving it context on the page.

All videos must display subtitles, if the video was created by the Corporate Communication team, they can arrange this for you. If your video was created by a third party, you will need to arrange this with them.

Example

A video from Public Health England, explaining why you should stay at home if you have symptoms of COVID-19:

iFrame title

You will also need to add a title in the snippet box that contains the embedded video, insert title text, highlighted in bold below.

Example

<div class="video-container">
<iframe title="A video from Public Health England, explaining why you should stay at home if you have symptoms of COVID-19" width="560" height="315" src="https://www.youtube.com/embed/m9s4cWMNVmU?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>

Plain English is a style of writing that enables the reader to understand the message the first time they read it. It uses short, clear sentences and everyday words without unnecessary jargon. Good use of Plain English will help to make your content engaging and personable to the reader. This approach should be used with all website content, where possible, we recognise that in some cases, for example legal notices and legislation, there will be a need for the language used to be more complex due to the nature of the intended audience.

The Plain English website has some useful information/guides that could help you when reviewing your content:

• visit the Plain English website for information about how to write in plain English.
• visit the Plain English website to download a copy of alternative words to help simplify your content

Documents/files on the website should generally be in PDF format, the exception being spreadsheets/data that needs to be presented in a templated format, for example expenditure figures shared in the Open Council section of the website are uploaded in the .csv or .xls format. Word documents should be converted to PDF before being uploaded to the website, this can be done using the "Save as..." option in Microsoft Word. If a word document is intended to be a downloadable form, then please speak with a member of the Web Services team about converting this to an online form.

When uploading documents/files on to the website, question whether the information should actually be on a web page rather than presented in a PDF, for example the following content may have more impact as content on a web page:

• events
• frequently asked questions
• terms and conditions
• timetables etc.

All PDFs should be accessible going forward and you will need to review each PDF to ensure it is compliant. Visit the Council website and click Browsealoud (orange circle bottom right of the Council website), once Browsealoud is activated, navigate to the PDF and open it within your browser. You need to make sure that all of the PDF is read back to you. If this is not the case, please let us know so we can advise you of the next steps. Visit the Adobe Acrobat website for details on making accessible PDFs.