Accessible Advice for Website Content Editors

Links

Links to documents written like the example below will flag an alert for Suspicious link text 

‘To access the PDF version of our Safety Information please click here’

Avoid using words like ‘here’. See example of how to write a download link below

Download the PDF of our Safety information

Do not duplicate the same link on the same page as it will flag up as an alert.

Ideally you should create an HTML version of the PDF, rather than linking to one so that screen readers can access the information quickly and easily.

Mail To links

If you have to add more than one mailto: link on a page you will need to add a suffix otherwise it will flag up as multiple alerts.

Use a subject line that is different and describes what the mailto link is for e.g.

mailto:no-one@snai1mai1.com?subject=free chocolate

Ideally only use one mailto link per page.

YouTube Videos

Ensure that YouTube video presents equivalent, synchronized captions.

Alt Tags on Images

Only add alt tags to images if they are not decorative. e.g. An image on a What’s On Event is decorative. The descriptive information is in the title and so it’s not needed for assistive technology as it will read it twice.

A non decorative image would be a call to action graphic and so would need a descriptive alt tag.

Make the alt tag descriptive. Don’t add text like ‘image’ as it’s generic.

‘Keeping everyone safe - image’ should be ‘Keeping everyone safe’

Adding ‘Alt Tags’ to images in the WYSIWYG editor

When adding images into the editor, you will need to apply an alt tag. You can do this either when adding the image or after the image has been added.

To add the alt tag at the point of adding the image, please add it in the box illustrated below.

This screen will appear after selecting the image you want to insert.

If you have already added the image without an alt tag you can fix this by viewing the page in source view and then adding the alt tag manually. To view by source click the source code icon in the editor tools.

Then look for the empty alt tag. It will look like this. Note alt=""

<p><img id="__mcenew" src="/media/4065/dining-graphic_small.png" alt="" rel="20138" data-id="20138" /></p>

Add the relevant phrase, following the guidance above so it look like this.

<p><img id="__mcenew" src="/media/4065/dining-graphic_small.png" alt="dining available" rel="20138" data-id="20138" /></p>

Copying and pasting text from other websites

Be sure to clear the formatting of any text copied from other websites or documents and it can bring over html that will flag as errors or alerts. e.g. underlined text.

Adding New Content to your website

Always check the page that you have created by using the Chrome Extension

https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

You will be able to check whether you have any issues by using this tool. You need to ensure that there are 0 Errors, 0 Contrast Issues & 0 Alerts for the page to pass.

You can see what the issue is by clicking on the details tab. This gives you the solution to resolving the issue.

Look for the ‘Congratulations’ message to ensure your page is accessible.