accessible-pdfs.html.erb

<% content_for :title do %>GDS design principles<% end %>


<div id="wrapper" class="design-principles styleguide">
  <header>
    <h1>Government Digital Service <strong>Content principles</strong></h1>
    <p>This style guide is part of the <a href="/design-principles">Design Principles</a> document.</p>
  </header>

  <%= render "styleguide_sections" %>

  <ol class="principles" id="accessible-pdfs">
    <li class="principle">
      <article>
        <h1 id="accessiblepdfs">13. Accessible PDFs</h1> 
        <div class="outline">
        </div>
        <p>The best way to create an accessible PDF is to create an accessible source document.</p>
        <p>When a source document is converted into PDF it&rsquo;s tagged. The PDF tag tree reflects the structure of the document, and it&rsquo;s this structure that assistive technologies like screen readers use to navigate the document.</p>

        <h2 id="in-microsoft-word">13.1 In Microsoft Word</h2>
        <p>Use the styles and features available in Word to format your content and give it structure. This will make it easier to convert your source document into PDF because it lays the groundwork for the PDF tag tree.</p>

        <h2 id="use-headings">13.1.1 Use headings</h2>
        <p>Use the heading styles in Word to create a logical document structure. Don&rsquo;t increase the size of text or make it bold to create the appearance of headings.</p>
        <p>Treat your document like a book: It should have one title (level one heading) and multiple chapters (level two headings). Within each chapter there may be multiple sections (level three headings) and sub sections (level four headings).</p>

        <h2 id="use-lists">13.1.2 Use lists</h2>
        <p>Use the list styles in Word to group together related items. If the items follow a specific sequence, use a numbered list instead. Don&rsquo;t use punctuation or other markers to create the illusion of a list.</p>

        <h2 id="create-a-table-of-contents">13.1.3 Create a table of contents</h2>
        <p>If your document is longer than a few pages, use Word to automatically create a table of contents based on your heading structure. Don&rsquo;t use lists and links to manually create a table of contents.</p>

        <h2 id="use-readable-body-text">13.1.4 Use readable body text</h2>
        <p>Use left aligned text (unless the language of your document is read right to left). Don&rsquo;t use justified text in your document.</p>
        <p>Choose a san serif font and use the styles in Word to set it as the default, with a minimum size of 12pt. If you need to include footnotes or other text of a smaller size, increase the size of the body text to 14pt, rather than reduce the size of text below 12pt.</p>
        <p>Don&rsquo;t use chunks of italicised or capitalised text, and don&rsquo;t underline text unless it&rsquo;s a link.</p>

        <h2 id="use-good-colour-contrast">13.1.5 Use good colour contrast</h2>
        <p>Use foreground/background colours for text that have a good contrast ratio. <a href="http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/G18">4.5:1 ratio recommended by the Web Content Accessibility Guidelines 2.0</a> is a good minimum.</p>
        <p>Don&rsquo;t use colour or shape as the only way to identify something in your document. Use text labels or descriptions instead.</p>

        <h2 id="use-data-tables">13.1.6 Use data tables</h2>
        <p>Use tables with column headings to display data. Don&rsquo;t use tables to make cosmetic changes to the layout of the document.</p>

        <h2 id="provide-text-descriptions">13.1.7 Provide text descriptions</h2>
        <p>Use Word to add text descriptions to all important images in the document. Make sure the text description includes all the information contained within, or conveyed by, the image.</p>

        <h2 id="in-adobe-acrobat">13.2 In Adobe Acrobat</h2>
        <p>Use Adobe Acrobat Pro to convert your Word document into PDF. Use the <strong>Convert to PDF</strong> option under the <strong>Adobe</strong> menu in Microsoft Word to do this. This will make sure that Acrobat picks up the accessibility you have built into your source document.</p>

        <h2 id="set-the-document-langague">13.2.1 Set the document language</h2>
        <p>Set the language of the document. Go to <strong>File &gt; Properties &gt; Advanced</strong> and select a language from the <strong>Language</strong> menu.</p>
        <p>If the PDF is written in Welsh, type CY into the box.</p>

        <h2 id="check-the-tag-tree">13.2.2 Check the tag tree</h2>
        <p>All content must be tagged, marked as an artefact (background content), or removed from the tag tree. Use the <strong>Tags</strong> panel to review and edit the tag tree. If the PDF was converted from a well structured Word document, the tag tree should require little editing.</p>

        <h2 id="check-the-tab-order">13.2.3 Check the tab order</h2>
        <p>If the PDF contains form fields, use <strong>Advanced &gt; Accessibility &gt; Touch up reading order</strong> to check they can be navigated with the tab key in a logical order. If the tab order needs improving, use the <strong>Order</strong> panel to drag and drop the fields into the correct order.</p>

        <h2 id="check-the-reading-order">13.2.4 Check the reading order</h2>
        <p>Use the <strong>Tags </strong>panel to review and edit the reading order of the PDF. Don&rsquo;t rely on the visual order of the PDF. The reading order is based on the structure of the PDF tag tree, which may not match the visual content order.</p>

        <h2 id="check-the-reflow-order">13.2.5 Check the reflow order</h2>
        <p>Use <strong>View &gt; Zoom &gt; reflow </strong>then check that the PDF still has a logical reading order. Note: It can sometimes be difficult to guarantee a logical reflow order for PDfs with complex content.</p>

        <h2 id="check-text-descriptions">13.2.6 Check text descriptions</h2>
        <p>Go to Advanced &gt; Accessibility &gt; Touch up reading order and check that all images have text descriptions. If the text descriptions were present in the source Word document and the <strong>Convert to PDF</strong> option was used, the text descriptions should already be present in the PDF.</p>

        <h2 id="remove-empty-tags">13.2.7 Remove empty tags</h2>
        <p>Remove empty tags from the tag tree. Use the <strong>Tags</strong> panel to highlight and delete any empty tags from the tag tree.</p>

        <h2 id="set-decroative-content">13.2.8 Set decorative content</h2>
        <p>Tag decorative content elements as artefacts. Use <strong>Advanced &gt; Accessibility &gt; Touch up reading order</strong> to select a decorative element, and use the <strong>Background</strong> button to make the element an artefact.</p>

        <h2 id="check-data-tables">13.2.9 Check data tables</h2>
        <p>Use the <strong>Tags</strong> panel to check the structure of data tables. The <strong>&lt;table&gt;</strong>, <strong>&lt;tr&gt;</strong> and <strong>&lt;td&gt;</strong> tags should be used to give data tables the proper structure.</p>

        <h2 id="active-links">13.2.10 Active links</h2>
        <p>Use the <strong>Tags</strong> panel to check that links are active. Active links should be tagged with the <strong>&lt;link&gt;</strong> tag.</p>

        <h2 id="check-high-contrast">13.2.11 Check high contrast</h2>
        <p>Use <strong>File &gt; Preference &gt; Accessibility</strong> to set a high contrast colour scheme, and check the PDF remains readable. Note: It may not be possible to make high contrast mode work in all PDFs, in which case you should be prepared to make a high contrast version available on request.</p>

        <h2 id="display-document-title">13.2.12 Display document title</h2>
        <p>Display the document title instead of the file name. Go to <strong>File &gt; Properties &gt; Initial view</strong> and select <strong>Document title</strong> from the <strong>Show</strong> drop down box.</p>

        <h2 id="before-publication">13.2.13 Before publication</h2>
        <p>Once all the above steps have been taken, the PDF should be checked before it is published.</p>

        <h2 id="full-adobe-accessibility-check">13.2.14 Full Adobe accessibility check</h2>
        <p>Go to <strong>Advanced &gt; Accessibility</strong> and select <strong>Full check</strong>. The PDF should pass the full check for <a href="http://www.w3.org/WAI/WCAG20/quickref/">WCAG 2.0 Level AA</a> without any warnings.</p>

        <h2 id="quick-screen-reader-check">13.2.15 Quick screen reader check</h2>
        <p>Ask a screen reader user to read through the PDF. If no-one is available to do this, use one of the following options instead.</p>

        <h2 id="user-nvda">13.2.16 Use NVDA</h2>
        <p>Non Visual Desktop Access (NVDA) is a free open source screen reader for Windows. It can be installed to the desktop or run from a portable USB thumb drive.</p>
        <p><a href="http://www.nvda-project.org/">http://www.nvda-project.org/</a></p>
        <p>With NVDA running, open the PDF and use the following commands to check the PDF:</p>
        <ul>
            <li>from the top of the PDF (with the numlock off), use <strong>Numpad 0 + Numpad 2</strong> to read the PDF from top to bottom and check the reading order</li>
            <li>use the <strong>tab</strong> key (repeatedly) to move through the PDF and check the tab order</li>
            <li>use the <strong>h</strong> key (repeatedly) to move through the PDF and check the heading structure</li>
            <li>use the <strong>g</strong> key (repeatedly) to move through the PDF and check for text descriptions</li>
        </ul>
        <p>NB: These commands will also work with the Jaws screen reader from Freedom Scientific.</p>

        <h2 id="use-voiceover">Use VoiceOver</h2>
        <p>All Apple Macs have VoiceOver built in. Turn VoiceOver on (or off again) using <strong>Command + f5</strong>. With VoiceOver running open the PDF and use the following commands to check the PDF:</p>
        <ul>
            <li>from the top of the PDF use a <strong>double finger down swipe</strong>, or <strong>Control + Option + a</strong> to read the PDF from top to bottom and check the reading order; Use the <strong>tab</strong> key (repeatedly) to move through the PDF and check the tab order.</li>
        </ul>
        <p>NB: VoiceOver does not provide shortcut keys for navigating by headings or graphics.</p>
      </article>
    </li>
  </ol>
</div>