Creating accessible documents

Creating an accessible PDF document for publishing on our websites starts with the source document in Microsoft Word.

Appropriate uses of PDF

Typically, online content should be provided in a web page. This will ensure the content is responsive, user-friendly, and accessible on any device.

When content is in a PDF, rather than automatically conforming to a customer's device (desktop computer, tablet, mobile phone), a PDF will only appear in a format designed for A4. Since it's not optimised for mobile, the customer will need to pinch and zoom to read the content. When content is added to the website, it is automatically optimised and re-sized for the customer's device.

Other issues with PDFs include:

• treated differently by browsers, apps and devices
• viewing is in isolation from the navigation of their hosting website
• not as easy to update and might have been created by an agency
• harder for search engines to crawl and index
• difficult to measure and analyse in terms of usage
• interruption of the natural reading flow as you wait for the reader to load

There are still a number of circumstances when a PDF file is needed. In these cases, we must take the time to properly create and tag the file so it meets accessibility requirements.

If you're in any doubt whether a PDF is required email econtent@derbyshire.gov.uk for advice.

Accessibility webinar

If you would like to know more about making accessible PDFs, view Silktide's PDF accessibility webinar hosted by Oliver Emberton, Silktide's CEO.

Making your document accessible

Creating an accessible PDF document for publishing on our websites starts with the source document in Microsoft Word, otherwise when you come to update the document for the website next time, it will again produce an inaccessible document.

Microsoft support provides step-by-step instructions for making your Word document accessible including:

• best practices for making Word documents accessible
• checking accessibility while you work in Word
• avoiding using tables
• using built-in title, subtitle, and heading styles
• creating paragraph banners
• adding alt text to visuals
• adding accessible hyperlink text and screen tips
• using accessible font format and colour
• creating accessible lists
• adjusting space between sentences and paragraphs
• testing accessibility with Immersive Reader

Forms

For one off uses, we recommend using Microsoft forms. We can add links to any form you create from a web page. Alternatively, if the form is required to be permanent you should contact Lee Henstock, Corporate Services And Transformation, email lee.henstock@derbyshire.gov.uk.

Complex images

Complex images contain substantial information - more than can be conveyed in a short phrase or sentence. These are typically:

• graphs and charts, including flow charts and organisational charts
• diagrams and illustrations where the page text relies on the user being able to understand the image
• maps showing locations or other information such as weather

In these cases, a 2-part text alternative is required. The first part is the short description to identify the image and, where appropriate, indicate the location of the long description. The second part is the long description - a textual representation of the essential information conveyed by the image. The following examples show different approaches that can be used to provide such short and long descriptions.

Approach 1: A text link to the long description adjacent to the image

This approach provides a text link next to the image that refers to a separate page that contains the long description. The link text needs to clarify the destination, and associate it with the image.

For example, your alt text for the image might be: Bar chart showing monthly and total visitors for the first quarter 2022 for sites 1 to 3.

And your text link next to the image might read: Example.com Site visitors January to March 2014 text description of the bar chart.

Approach 2: Describing the location of the long description in the alt attribute

When a long description is provided on the same web page as an image, its location can be described using the alt attribute of the image. The location information needs to be clear and accurate to help users locate the content.

For example, your alt text for the image might be: Bar chart showing monthly and total visitors for the first quarter 2022 for sites 1 to 3. Described under the heading Site visitors full text.

An example of approach 2

In this example, a bar chart of website visitor statistics has the location described using the alt attribute of the image: "Bar chart showing monthly and total visitors for the first quarter 2022 for sites 1 to 3, described under the heading: Site visitors full text." The long description provides detailed information, including scales, values, relationships and trends that are represented visually. For example, the long description can point out the declining values for site 1, consistent values for site 2, and increasing values for site 3 that are encoded in the bar chart.

Site visitors full text

Overview

The chart shows the website hits for the first quarter of 2022. It shows that Site 1 has more visitors than either of the other sites, but the number of visitors is decreasing. Site 2 has a fairly constant number of visitors, while for Site 3 page hits are increasing month on month.

Values

Numerical values presented on the image:

Presentation

The bar chart represents both the number of visitors per month for each website, and the total number of visitors per website for the entire quarter. Website visitors for each month are represented using columns lined up horizontally, with heights indicating the number of visitors. A fourth column is provided for each website with the accumulated site visitors for the quarter.

Flow charts

Flowcharts, and organisational charts, are used for communicating step-by-step processes or demonstrating structures. They can be made in MS Word, Visio or other design software and brought in as an image.

Save flowcharts and diagrams as a single image before inserting in your Word document. Make sure you consider the following:

• if you're using a complex structure, consider multiple, simpler diagrams
• if the readers need to just understand the overall structure, then alt text and description may be enough to describe the image
• if the readers need to understand the detail of each level a ‘text-based outline’ will be required
• don't use colours to infer meaning, using just black and white will ensure good contrast
• if you do use colour, make sure there is sufficient colour contrast and use other methods such as shapes to communicate concepts
• consider the quality of the image produced so that if magnified, the image is still clear

An example of a flow chart

In this example, a flow chart of safety inspections has the location described using the alt attribute of the image: “Flow chart showing process for completing safety inspections, described under the heading: Process for completing safety inspections full text."

The long description then provides the text-based outline which replicates the structure or process of the image.

Process for completing safety inspection full text

Top of the chart begins: Is it safe to inspect?

1. If "Yes", then is the route available for inspection?
   • if "Yes", then record and start inspection
   • If "No", then suspend inspection - record, document and photograph the reasons and reprogramme the inspection
2. If "No", then suspend inspection - record, document and photograph the reasons and reprogramme the inspection.

Creating a table of contents

A table of contents is essential on all but the shortest documents. This is to ensure easy navigation and gives the user a quick overview of the contents. To do this:

• on the References tab, select the button Table of contents. A drop-down menu will appear
• from the menu select Custom table of contents. A pop-up window will appear
• at the bottom of this window will be a box labelled Show levels. Select which heading levels will be needed for the table of contents. Selecting 1 will include h1 headings, 2 will select h1 and h2 headings, and so on
• select OK to create the table of contents

Colour contrast

You won’t need to bother with this step if your document is just black text on a white background.

If using colours is essential, remember that you can’t use any colours to infer meaning. Someone who is colour blind can’t pick up on this. it is a requirement of WCAG 2.1 that all colours used must meet a contrast ratio of at least 4:5:1. If they do not, you must change them.

You can check your colours using either a standalone app such as colour contrast checker or by using an online tool such as WebAim.

End of document

At the end of every document, it is helpful to write a short statement to indicate to the user that they have reached the end of the document. This benefits screen-reader users and others. This could be something as simple as "End of document".

Check the document

Microsoft Word has some in-built accessibility checking options to check your document for missing alt-tags, for example:

• choose File from the Ribbon tabs
• under Info there is an option to Check for Issues. Click this and choose Check Accessibility from the drop-down menu
• you will be given a list of issues and recommendations on how to repair them.

Exporting to PDF

When you export to PDF from Word, don't use these options:

• File > Save as PDF
• File > Print > Print to PDF

Follow these steps to create an accessible PDF:

• choose Acrobat from the Ribbon tabs
• select Create PDF. Adobe Acrobat Pro DC will now open and convert your document to an accessible PDF

You will now need to perform an accessibility check in Adobe and fix any errors. Read more about creating an accessible PDF document in Adobe.