Skip to main content

Checking accessibility

Tools for checking any web page or document for accessibility

What am I checking for?

We need our documents to be as usable as possible for as many people as possible. The focus is on;

  • Navigation by keyboard only (not using a mouse)
  • Using screen reading software to make sure all parts of the page can be read and that, when read aloud, the content makes sense
  • Magnifying the screen by 200% and that the content is still readable and usable
  • Usability on a mobile device screen
  • Using different browsers.

Keyboard navigation

Pick an entry and navigate it only using the keyboard:

  • Use Tab to move from one item to the next item (Items typically are links, buttons, form controls and all sorts of other interactive elements)

  • Add Shift+Tab to reverse the direction

  • Use Enter to:

  • Activate each link or button

  • Send a form (when a form item has parts that require information and submission)

  • Works for all forms and that it works on the whole page

  • Use Space to; Toggle around the page or open or close parts of the page

  • Use arrow keys to change the value of an item (for example more or less)

  • Move the cursor (for example in a text input)

  • Use Esc to; Cancel a prompt or close elements like boxes

For people who regularly use keyboard navigation there are settings on computers and websites that allow advanced levels of shortcuts and personalisation and there is a good guide for Macs and PCs. You do not need to know or use this but it can give you some idea of how difficult navigation can be.

 

Screen reading software

If you do not already have screen reading software, you will need to choose one.

There are many screen readers available, some at a cost and some for free. For the process of checking web pages. My Study Bar is a good reader that will also read the alternative text on an image and so is great for checking web pages. It requires download an installation and so you may need to raise a ticket with IT. 

There are also readers that just read text and not alternative text in images.  There is a Chrome extension called Selection Reader that will read aloud. Click on ‘add to chrome’ and ‘add extension’ and keep the language pre-sets. To use this extension, go to the page you want to check and highlight the text you want read aloud. If you want the whole page to be read, then click ctrl+a. Click the icon and it will turn red and start to read.

 

Browsers

Please test on:

  • Chrome
  • Firefox
  • Edge
  • Safari (if on an apple device)

Not all of these processes need to be completed in every browser for every page but vary the browsers used and then all should be covered and pick up any problems.

Magnification

Each page also needs to be tested at 200% magnification. There are guides and help available for magnification in;

Mobile devices

If you have a smart phone or tablet, also check random pages on your mobile to check that it ‘bootstraps’ or reorganises the items on the screen, to be easily used on a mobile device. It is advisable to check image heavy pages and those with more than one menu. Make sure that you can navigate easily, that your images are where you want them to be and that important details aren't lost on the smaller screen.

Advanced checking

There are also more advanced ways of checking accessibility issues. A common checker is WAVE, which will highlight issues in a clear way and suggest actions. If you know about codes, you can also use the Developer Tools to look at accessibility via the site code.