Checking your documents and sites for accessibility

Follow the instructions on this page to check your documents or web pages to see if they meet WCAG 2.1 accessibility criteria.

Before you start

To check your site or document you will need access to some specialist software.

Apple VoiceOver is freely available on all Apple devices however NVDA screen reader will need to be installed on a Windows machine. This can be done via a request to ITS.

The latest version of Adobe Acrobat is required to gain full acces to its accessibility tools (Only needed to test downloadable documents).

Paciello group Colour Contrast Analyser (for testing downloadable documents) can also be installed following a request to ITS.

Apple have provided a complete guide to Voice Over which includes a list of all of the keyboard commands required to use the scren reader. WebAIM have produced a guide to using NVDA. This also contains all of the keyboard shortcuts required. Whilst it is worth reading these, the key commands will be included below.

Notes - NVDA screen reader has some known bugs:

When reading Word documents, or PDFs created using Word, it will read out any blank lines with the word "blank". This is an issue known to NVDA and they are working to address it.

NVDA also ignores any shapes created using Word when reading .doc or .docx files. This does not happen when reading PDF's created from Word files.

  • Screen reader - web page

    Checking your page with a screen reader allows you to identify if there are any issues could affect the user experience of a visually impaired user. The page will need to be checked with more than one screen reader. Ideally these would be Voice Over for Apple devices and NVDA for Windows.

    • Navigate to the page.
    • Open the screen reader.
    • Attempt to navigate the page. Use both the mouse and keyboard commands (Ctrl+Alt+Arrows on Mac, just the arrow keys on Windows).
    • To navigate tables an extra step is required for Voice Over. The command Ctrl+Alt+Shift+down arrow is required to enter the table. The command Ctrl+Alt+Shift+up arrow is required to leave the table. This is not required with NVDA.

    If you have created your page using the components library then there will be no issues with screen reader compatibility once the library is fully developed.

  • Colour contrast - web page

    Checking a web page is for colour contrast is a straightforward task. Copy the URL of the page and paste it into the input box at WAVE web accessibility evaluation tool. This will give you an immediate accessibility report on your website. Clicking the Details tab on the right of the screen will allow you to identify any issues with colour contrast. Clicking on each instance of the error will navigate you to the specific case on the page.

    It is worth noting that this tool will also flag other accessibility issues that your page may have. If you have used the components library to create your page then these should be minimal.

  • Keyboard navigation - web page

    Checking navigation of the webpage is as simple as moving the mouse to one side and using just the keyboard to navigate the page. If you have created your page using the components library then there will be no issues with keyboard navigation

  • PDF - 

    Once created, all PDFs need to be checked using Adobe Acrobat. Please ensure that you have downloaded the latest version to have access to all of the accessibility options. The following steps will allow you to set-up Acrobat ready to check our documents. This can be skipped if you have previously set-up Acrobat on our computer.

    • Click on Tools in the taskbar at the top of the screen.
    • Scroll down to the Protect and Standardize section.
    • Click the drop-down under Accessibiity and select Add shortcut.

    You will now be ready to check your document for accessibility.

    • Click the Accessibility tab from the right hand menus or select View > Tools > Accessibility. This will bring up the Accessibility menu.
    • Click Full Check to open the Accessibility checker options panel.
    • Ensure that the Create accessibility report checkbox is not ticked.
    • The report will appear on the left of the screen and highlight any issues with the document.
    • If your document is untagged then take the following steps to address this:
      • Select Reading Order from the right hand Accessibility menu open the Reading Order panel.
      • Highlight the first text, or area of the screen, that you would wish the user to read.
      • Tag this area using one of the options from the Reading Order panel.
      • Continue through the document. The order that you tag items will set the order in which they are read by a screen reader and also provide them with an identifier e.g. list, image, text, link.
  • Tables - PDF

    Follow the steps in the previous section to set up and perform the initial checks on the document. Once completed, tables need a further check for accessibility. In particular there is a need to bind the header of a column to the column data. This will allow most screen readers to identify each cell with the title of the column it relates to.

    • In the Accessibility menu click Reading Order to bring up the Reading Order panel.
    • Left-click the table that you wish to check.
    • In the Reading Order panel cleck Table Editor. This will highlight the table and indicate headers (TH) and data cells (TD).
    • If any cells are incorrectly tagged this can be addressed easily. Right click the cell and select Table Cell properties.... Set the Type to either header or data. If the cell is a header set the Scope to either Row or Column.
    • Left click in the left-most header cell and drag to highlight all of the header cells. Right click on the selection and choose Auto-generate header cell IDs...
    • Right click any header cell and select Table Cell properties.... Check that the cell now has an ID in the Attributes box. Close the Table Cell Properties panel.
    • Left click the top data cell in a column and drag down to highlight all of the cells in the column.
    • Right click the selection and select Table Cell properties... to bring up the Table Cell Properties panel again.
    • In the Attributes box click the green + next to Associated Header Cell IDs:. This will provide a pop-up window with the option to assign a header to a column. Select the ID that relates to the highlighed column. If it is not obvious at first it can be worked out using the RXCY part of the ID which relates to the row and column location of the header cell.
    • This last step must be repeated for each column in the table. If the header is blank then the column of data will still need to be bound to the blank header cell (this will still have its own ID). Failure to do this can cause columns to be linked incorrectly.
  • Screen reader - PDF

    Chacking your document with a screen reader allows you to identify if there are any issues could affect the user experience of a visually impaired user. The document will need to be checked with more than one screen reader. Ideally these would be Voice Over for Apple devices and NVDA for Windows.

    • Open the PDF using Adobe Acrobat.
    • Open the screen reader.
    • Attempt to navigate the document. Use both the mouse and keyboard commands (Ctrl+Alt+Arrows on Mac, just the arrow keys on Windows).
    • To navigate tables an extra step is required for Voice Over. The command Ctrl+Alt+Shift+down arrow is required to enter the table. The command Ctrl+Alt+Shift+up arrow is required to leave the table. This is not required with NVDA.

    If you have created your document using the guides found on the accessibility pages then there should be no issues when checking your PDFs with a screen reader and all elements should be identified and read to the user.

  • Colour contrast - PDF

    To check a PDF for colour contrast access to either the hexadecimal of RGB values for the colours used in the document would be advantageous. If these are available then the online tool WebAIM colour contrast checker is an easy to use tool. Copy the text colour code into the foreground colour box and the background colour into the background colour box. If the colours result in a green pass next to WCAG AA then the colours are good to use.

    Where the hexadecimal or RGB codes are not avaialable Paciello group Colour Contrast Analyser is required. This tool has a colour dropper which can be used to sample the colours used in the document. The text colur should be input to the foreground colour box and the background colour should be input to the background colour box. If the colours result in a green pass next to WCAG AA then the colours are good to use.

    For reference: Large text is defined as 18 point (typically 24px) or 14 point (typically 18.66px) for bold text.