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.

  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.

  Follow these steps to create a style sheet for your document:

  • 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, select Create New Style. 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, such as 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

  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, change the colours you are using.

  See our brand colour palette for the colours that meet this requirement.

  You can check your colours using either a standalone app such as Colour Contrast Checker or by using an online tool such as WebAim.

• Tables

  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 these 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.
• 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
  • 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.
• Title

  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
  • select the Advanced tab and set the Display Title to be the same as the File name
  • click Export to create the accessible PDF.

  You can check the accessibility of PDFs after you have outputted them.

InDesign accessibility checklist

Criteria	Check
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.