Creating accessible InDesign documents
If you’re a designer, check how to make sure your InDesign documents output accessible creative content that we can use on our website.
- Creating a style sheet
Paragraph styles are used to control the style of elements within InDesign. When exporting to PDF these styles can be used to assign tags which in turn can be used by screen reading technology to let users know what elements they are reading.
Follow these steps to create a style sheet for your document.
If you need to alter styles further down the line, do not use the properties panel. Make sure all changes are made to the style in your style sheet.
- On the Window tab select Styles and then check Paragraph Styles to open the paragraph styles window.
- At the bottom of the paragraph styles window click the Create New Style button. This will create a new style in the paragraph styles window.
- Right click the new style created and choose Edit. This will open the Paragraph Style Options window.
- Under General set the Style Name to describe the style you are creating e.g. Header 1.
- Set Based On to No Paragraph style.
- Choose the Export Tagging tab.
- Set the PDF tag to represent the style you are creating e.g. Heading 1 = h1, paragraph = p.
- For elements such as tables, images or charts set the tag to automatic.
- Mark any elements to be ignored by screen readers with the Artifact tag.
- Font, style, sixe etc can all be set (and changed) under the Basic Character Formats tab.
- Further styles can be added using the other available tabs in the Paragraph Style Options window.
- Select OK.
- Continue to create all styles you will require for your document.
- Image alt-text
Alt-text provides screen reader users a description of any images within your document that they would otherwise not be able to access. Follow these steps to add alt-text to your images.
- Right click your image.
- Select Object Export Options.
- Select the Alt-Text tab.
- Set Alt-Text Source to custom.
- Write your alt-text in the box and select Done.
If you have a more complex image such as a chart then the process varies slightly. These kind of images require more description than an alt-text will typically allow.
- Follow the above process for creating alt-text for your image.
- A more detailed description will need to be added either as a properly formatted text element, with logical headinsg and lists, or an accessible table.
- This additional information would be best placed below the figure on the page but can also be placed in appendices. If you choose the apendices option then provide a properly formatted hyperlink to this below the image.
Links are made more accessible by making sure that the link is descriptive. Rather than writing "click here", tell the user where they will be directed or what they will be downloading.
- Colour contrast
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 meet this then you must change the colours you are using.
See our brand colour palette for the colours that meet this requirement.
Tables can be tricky for screen readers to navigate. The software will not always identify table headings, so you need to specify these. Adding descriptive alt-text will also help the user. Follow the steps to create an accessible table.
- On the Table tab select Create Table. This will bring up the Create Table window.
- Select the number of header and body rows required.
- Draw a text box to place the table in your document.
- Create styles for the header and cells of the table by following the guide above (make sure the Export Tagging is set to Automatic).
- Highlight your header row and right click the selection. If there is an option to Convert To Header Rows then click it. If this option is not there then proceed.
- Populate the table with data.
Once your table is complete you will need to check this most likely do some further work in Adobe Acrobat.
- Reading order
If the reading order is not set by the creator then most screen reader software will try to determine a reading order from the document. This often ends up making PDFs difficult to read. To set the reading order follow these steps.
- On the Window tab select Articles. This will bring up the Articles window.
- In the Articles window click the Options button (the small three stacked bars button to the top-right).
- Check the Use For Reading Order In Tagged PDF option.
- Drag and drop the first element from your document into the Articles window. There will be a New Article pop-up. Ensure that Include When Exporting is checked. (It is beset to create a new article for each page).
- Drag and drop all other elements from the page under the first. Place them in the order that they should be read by the user.
- If you want to re-set the reading order just drag and drop the items in the Articles window into a new order.
The document needs to have a title set to pass most accessibility tests.
- On the File tab select File Info. This will bring up the File Information window.
- Under the Basic tab set the Document Title and select OK.
- Exporting as PDF
To export your document as an accessible PDF follow these steps.
- On the File tab select Export. This will bring up the Export window.
- Choose a name for the file and a destination. Set the Format to Adobe PDF Interactive.
- Click Save. This will open the Export to Interactive PDF window.
- Check the boxes for Create Tagged PDF and Use Structure For Tab Order.
- Click the Advanced tab and set the Display Title to be the same as the File name.
- Click Export to create the accessible PDF.
|Logical reading order||Check the exported document with Adobe Acrobat and at least one screen reader. Ensure navigation workes with mouse and keyboard as a minimum.|
|Colour contrast||All text elements meet at least a colour contrast ratio of 4.5:1.|
|Alt-text for images||All images have alt-text, or have been removed from the flow of the document.|
|Element Styles||These have been set up using a style sheet. These are then linked to Export tags for PDFs.|
|Tables||Tables are actually tables, not embedded images. All tables have denoted headers.|
|Accessible graphs and charts||Colours used must be accessible. Check with colour contrast checker and a colour blindness checker. Do not rely on colour to convey meaning. Include alt-text.|
|Hyperlinks||All links are descriptive so a screen reader user can understand them.|
|Spell-check||Check the document with a spell-checker.|