Creating accessible links in PDFs
11 April 2010
Creating accessible links in PDFs is a basic accessibility requirement. This article looks at techniques for tagging links correctly to ensure that they are both keyboard operable and usable with a screen reader. It also looks at, amongst other things, how to make URLs more intelligible for screen reader users.
Creating links that are keyboard operable is a single A requirement under the Web Content Accessibility Guidelines (WCAG) 2.0., and is vital in ensuring the accessibility of PDFs. It is especially important for links that make up a document's table of contents.
For a link to be accessible it must have a specific tag structure consisting of:
- a parent
- one or more child tag(s) containing the link text
Link–OBJRtag which must also be a child of the
Link–OBJR tag enables assistive technologies to properly recognise the link and handle it correctly.
A complete, accessible link tag structure can be seen in Figure 1.
Word, InDesign and beyond
Provided that PDFs are tagged on creation, links originated in Microsoft Word documents will have the required tag structure and will present no problems (provided that they don't span two or more lines). However, links currently authored in InDesign will need fixing, as will those found in untagged PDFs.
InDesign originated links
As of this writing, hyperlinks created in InDesign (CS4), when converted to PDF, will produce inaccessible tag structures. An example can be seen in Figure 2.
The problem is that the tag containing the link text will be created at the wrong level in the tag tree hierarchy. The tag in question – in this case containing the word "Hyphenation" – will be created at the same level as the
<Link> tag, rather than being a child of it.
Such links work with a mouse and appear normally in the tab order but don't work with screen readers.
However, the problem is easily solved. Just click and drag the link text tag ("Hyphenation") and drop it underneath (as child of) the
<Link> tag, at the same level as the
Link-OBJR tag. Figure 3 shows the same tag tree corrected in this way.
Update (May 2011)
Happily, the above problem has been fixed in InDesign CS5.5, one of many significant improvements in the latest release of InDesign.
Creating accessible links in Acrobat
Creating an accessible link from scratch in Acrobat Professional is (usually) relatively straightforward. To do so, highlight the text in question, right-click and, from the context menu, select. Choose .
Underlining link text
To underline the link, in the Create Link dialogue box, from thedropdown select . From the dropdown select . Select a colour if required. Once done, navigate to the page you want to link to and click . The correct tags will be created.
Avoid the Create Links from URLs command
If your document contains URLs which are not active links, you should create links one at a time using the above method. Resist the temptation to use the global create links from URLs command (
Creating link tags by alternative means
In some PDFs the create link process outlined above won't work (in some Quark-generated documents, for example). In such a case it may be necessary to create
Link–OBJR tags by alternative means.
Creating a Link tag
To create a
<Link> tag, in the tags panel select , either by right-clicking or from menu. In the input field, either type "Link" or select from the dropdown.
Create a Link–OBJR tag
To create a
Link-OBJR tag, in the tag tree, either right-click or open the menu and select . From the dropdown select . Click and then . A
Link–OBJR tag will be created. If necessary, rearrange the tags as appropriate.
Making link text screen reader friendly
Because PDFs are often designed to be printed, link text frequently comes in the form of raw URLs which are not particularly screen reader friendly. It is helpful to screen reader users to provide a text alternative for such links in order to make them easier to understand. (In terms of WCAG 2.0 compliance this is a triple A requirement but fixing it is arguably more beneficial than this would imply).
Again, the solution is simple. Highlight the URL and press Ctrl + C to copy it. In the tag tree, right-click the
<Link> tag and select . In the Actual Text field of the TouchUp Properties dialogue box, paste the previously copied URL (updateNote 1).
Then, for a URL such as www.ecdp.org, type "www.e c d p.org" (with spaces between the "e", "c", "d" and "p"), or for www.bbc.co.uk, type "www.bbc.co.u k" with a space between the "u"and the "k". (Tip: listen to the document with a screen reader to determine where to place the spaces). Close the TouchUp Properties dialogue box. These links will now be voiced correctly by a screen reader.
Following these simple techniques will ensure that your links are accessible to, and usable by, a wide range of readers.