Writing for Web Accessibility on our CMS (GOSS)

Headings

Make sure that you apply the right heading styles to headings and subheadings. These elements will give your digital content a structure and make your content more accessible to all users. Using formatting such as a bold font to let people know that the text is a heading is not accessible.

Using the heading styles correctly changes how something looks on a page when it is published. It also means that the heading structure is reflected in the code of the page. This gives your page a skeleton that helps people using assistive technologies. The structure of a page is particularly important to people accessing your content using a screen reader. By labelling your headings correctly, they can “scan” a page in a similar way to a sighted person, navigating to the sub-headings that are of interest, instead of having to listen to every element on the page.

Our CMS applies heading styles differently on Renfrewshire.gov.uk (our public website) and our intranet.

On Renfrewshire.gov.uk, Heading 1 is your page title and you should use Heading 2 for any subheading of your page. Any sub heading of a Heading 2 should be labelled as Heading 3.

On Intranet.renfrewshire.gov.uk, Heading 1 is your page title and you should use Heading 2 for any subheading of your intranet page. Any sub heading of a Heading 2 should be labelled as Heading 3.

Here’s a video on how to add sub headings to a page on our public website:

Lists

If you are copying content from a Word document to the CMS, remove any bullets or numbered list formatting before copying it across to the CMS. Then re-format the lists from within the CMS.

You need to do this so that the CMS recognise these as lists. Otherwise, it will treat them as paragraphs and this will be reflected in the code of the page. Visually, this means that the list will look different from other lists on the websites.

Creating the lists in the CMS ensures that people with visual impairments using screen readers are told that these are lists. This helps them to navigate the page. For example, they are told how many items are in a list and can navigate easily to the next list item or next list. If you structure content properly, it helps people to orientate themselves on a page, even if they cannot see the page.

Bullets

This is an example of a list with bullets, sometimes called an unordered list.

Here’s a short video on how to add a bulleted list in GOSS:

Numbered lists

This is an example of a series of steps, sometimes called a numbered or ordered list. Each step is a complete sentence and ends in a full stop.

This is how to add a numbered list in the CMS:

Links

Linking to other related content on our website, or other sites, is very helpful. Think about adding some links to other sites, where these will add value to your content. When you include external links on your page, this boosts its ranking on a search engine and that means users are also more likely to find your page.

Accessibility and link text

Make sure that your links accurately describe their destination and include relevant keywords. Link text should make sense out of context. Making link text descriptive helps people using assistive technologies who may choose only to read aloud links on a page. This is a useful way to scan a page, if you cannot see it. Try reading your links aloud. Do they make sense when you read them in isolation? Do not use “click here,” “tap here” “read more” or “download here”. None of these options describe where the link will take the user.

You do not need to link to the same page or website more than once on your page. If you have two links that go to the same web address, their description must be identical.

In addition, the same link text should not be used for links that go to different web addresses as this will also be confusing.

Accessibility and full URLs as links

Linking to a full URL, or web address, rather than to a link with a display name creates a range of usability issues for people using assistive technologies, so BBC News is acceptable but http://www.bbc.co.uk/news is not.

Links to email addresses

When you are linking to an email address, the advice is different. You should include the email address in full on your page, so adviceworks@renfrewshire.gov.uk not email Adviceworks. Doing this is important for usability for all users.

There are three ways to add links in the CMS.

To add external links

You can link to any existing external link on the system by searching Content > Links.

If you are adding a new external link to the CMS, you must create the external link within Content > Links before you can link to it. You do this by navigating to the relevant service area within the links section and choosing “Create a link” when you right-click for menu options.

Use the link text field to give the link descriptive link text, as in the screenshot below. Although you can add a link description too, to provide further information, descriptive link text is enough to make your link accessible.

If you save your new link you can add it to the Related content tab on your article, as shown below.

To add external links within your page content

You can add an external link by creating this within Content > Links in the CMS and then choosing inline > external link to select the relevant link. The Inline Properties window lets you create a descriptive link in the Title field.

For the “which window?” field choose “_self”. That means that you are setting the link to open automatically in the same browser window. This makes navigating between screens easier, especially for people using assistive technology, as the browser’s back button function still works. This wouldn’t be the case if you chose to open the link a new window.

To add internal links within your page content

You can add an internal link by choosing inline > article link and selecting the relevant web page from our site. As above, use the title field to make sure that link text is descriptive.

It is usually better to use the Property Inline for internal links as when links are updated there, they will update across the website. However, another option for adding links to the main body of your page is to use the link option on the page editor. Use the display text field to add a descriptive link. This method is not recommended.

Tables

Use tables for data, not to layout text and images on a page.

The CMS provides a field to caption a table. This allows the publisher to provide an overall topic for the table. There’s also a summary field that can be used to provide information on navigating a more complex table. You should complete both fields.

For accessibility, it is important that tables are structured properly and that any table headings are associated with each relevant cell in the table. This makes it easier for people using screen readers to understand the content. It also allows people using custom stylesheets to display the table in a different way to suit their needs.

The CMS gives the option of adding styling locally to a table but do not use this function. This means that border style, cell spacing and cell padding can all be applied as HTML formatting, rather than as part of a CSS. Tables that have been customised using these fields in the CMS are not accessible.

Horizontal tables

On horizontal tables, use Horizontal class, for headers choose first row, remove border size, cell spacing, cell padding

Vertical tables

On vertical tables, use Vertical class, for headers choose first column, remove border size, cell spacing, cell padding.

Complex tables

Complex tables (with column and row headers) use Bordered, for headers choose both, remove border size, cell spacing, cell padding.

Don’t merge cells in row or column headers or create nested tables (tables inside tables) as doing this will make it hard for users of assistive technologies.

PDFs and other downloads

The legislation only allows us to publish accessible PDFs, and most are not. If a PDF contains critical information, add this information to your webpage. Do not upload it as a related document.

Information published in a PDF format is harder to find, use and maintain than standard HTML web content.

This is because PDFs:

• do not resize to fit the browser
• are not designed for screen reading
• are harder to track on analytics
• can be harder for people to access than standard web content
• are harder to reuse when sharing content across different platforms.
• can make it harder for users to navigate and orientate themselves
• are less likely to be up to date.

Images

Only add images to a page where they provide extra information. Don’t add them for decorative reasons. You must also include an alternative text description for people who cannot see them.

Images containing text

It’s also better to use images that do not contain embedded text as this text will not be accessible to all users. If you are using an image that includes text, you should use this text as the alternative text for the image.

Meaningful images

Where images convey meaning, you should always provide a text description for someone who cannot see the picture. Again, use the alternate description field in the CMS and try to limit this to 140 characters or less. The context in which you use the image should help you decide on the wording for the description. You should explain why the image is relevant to the context rather than providing a literal description.

Complex images

Often a diagram will have layers of complexity that make it difficult to offer a full explanation in a single text field. Instead, add a simple summary there but include a longer description of the image in context within the page itself. This benefits people who cannot see the diagram and also those who require an explanation of it.

Adding an alternative text description for an image

On the CMS, you must upload images to the media folder at Content > Media before you can add them to your article.

When you upload the image, it is the description field which provides the alternative text for an image as you can see in the screenshot below.

Using Related Content images in the CMS

If you add an image as related content on Renfrewshire.gov.uk, it will display as a banner on your page. This banner will stretch across the full width of the main body of your page, as shown in the screenshot below. The CMS will use the alternative text description provided when you uploaded the image to the CMS media folder.

On the intranet, a related image displays on the body of the page, not as a banner. See the example of a related image on the intranet on this screenshot below. As on the public website, you should use the description field to provide an alternative text description for your image.

Using inline images on the CMS

If you use the inline feature in the CMS to add images within the body of your page, as in the screenshot below, your image will not stretch to fit the width of the main content on your page on a standard monitor but it will be full width if viewed on a mobile phone. This means that you should not try to use a complex image in this context as much of the detail will not be visible.

The inline image feature in the CMS is not responsive. That means that it always displays at a size which fits the width of a mobile phone screen. It does not increase in size on a larger monitor. This means that it is inflexible and should not be used to add complex images to your page.

If you do wish to use the inline feature, you have an option to add a title under your image using the Title field shown below. The alternative text description is carried through from the media folder but if you add a title this will also be accessible to users who are visually impaired. This means that it is useful feature if you need to provide context information and a longer description of your image.

Adding transaction buttons to the top of a page

If you add transaction buttons as related articles on your web page, as in the example below, be aware that the icon image alternative description will be carried across to this button.

Videos, audio files and animations

Embedding YouTube videos in the CMS

If you are embedding a video in the CMS from YouTube, please amend the code slightly. Copy the embed code, for example:

<iframe width=”560” height=”315″ src=”https://www.youtube.com/embed/mKv2AKsZbJ0″ frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

Change the width to 100% and height to 350. Then remove the frameborder so that you have the following code:

<iframe width=”100%” height=”350” src=”https://www.youtube.com/embed/mKv2AKsZbJ0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

Then paste it into the CMS using the Inline>Scripts field, as shown below.

Text transcript

You must offer a text version of the audio part of an audio or video file. If you are involved in the production of the file, keep a copy of the script as this will save you time transcribing speech. Add this text on a web page on the CMS and link to it from anywhere where you have embedded an audio or video file. Include the link to the transcript in the Description field in YouTube too, if applicable. This means that a person who is deaf or hearing impaired can access the same content as other users.

You should also think about how someone who is visually impaired will access your content. In your transcript, you should include any text that is embedded into a video or animation and is visible on screen but not spoken aloud. Examples include the name of someone who is speaking or the text that forms part of a screen included in an animation.

Providing a text transcript is also useful for other groups. For example, people who have English as an additional language, someone in an office who doesn’t want to disturb colleagues, or someone who can’t access the audio or video file because of a technical issue.

Captioning

Captioning or subtitling the audio element of a video is also strongly recommended.

The automated captioning facilities available on sites such as YouTube are helpful but they are not accurate enough for use alone as they tend not to be able to pick up local words or accents. You can edit the captions manually.

If your video hosting site does not offer automated captioning, it is usually possible to add a caption file. This isn’t a very technical process. It’s just about providing the system with timings for the captions so that they appear on screen at the right time. For advice on this, please contact the Digital Experience Team, as not all video platforms support all captioning file types.

When you embed a video or animation, make sure that the videos has captions that can be turned on and off. Often digital agencies will prepare videos with captions that are embedded onto the screen and there is no option to turn these off. This means that these videos are not accessible as you can’t change how the text appears on the screen or adapt it to suit your own preferences.

An important aspect of accessibility is leaving your content open enough to let people choose how they interact with it. One person might need larger captions. Another needs a particular combination of font and background colour to offer the colour contrast that they need to read from a screen. Someone else might find one font easier to read than another. While another person may find the captioning distracting and want to turn it off altogether. If you build the captions within YouTube, or your preferred video player, you allow the person to choose how captions are presented and they can be switched on and off, as needed.

Captions alone are not enough to make your video or animation accessible. You should always provide a link to a text transcript too.

Audio description

Audio description is a more complex process. It helps you to explain the contextual information in a video that conveys additional meaning. Think about all the important non-verbal cues and messages that sighted people pick up. For example, the difference in threat level when dialogue is spoken in a dark alley, a busy street or a cosy living room or describing a facial expression, such as a worried glance. Audio description helps people who are blind and visually impaired but also those who have cognitive impairments that affect their ability to draw meaning from visual cues.

At the moment, audio description is not fully supported by most media players. If you want to add an audio description on YouTube, for now, you must add this as a separate video within YouTube and explain that it is audio described in the title.

Audio description is a skilled job, like translating a novel from one language to another. It requires a degree of interpretation to help others understand the underlying messages of the video. When considering the audience for your video or animation, and the content of the piece itself, you may find audio description a useful addition.