Testing your content for accessibility

Testing and checking web pages

Our general website theme and structure is designed to be as accessible as possible out of the box. However, it is possible while creating content for users to create more inaccessible situations, e.g. colour combinations that result in low contrast, images without descriptions, or unclear text.

General tools

In Chrome you can install extensions like 'Silktide' that allow you to preview your site simulating various accessibility needs like dyslexia, vision differences, headings and alt text, etc. These aren't perfect simulations but can help indicate areas to improve.

Color blindness & visual simulation

Modern browsers have built-in tools that simulate how your site looks to users with different types of color blindness (e.g., Protanopia, Deuteranopia).

• Chrome & Edge (DevTools):
  1. Right-click anywhere on the page and select Inspect.
  2. Press Ctrl+Shift+P (Windows) or Cmd+Shift+P (Mac) to open the Command Menu.
  3. Type "Rendering" and select Show Rendering.
  4. Scroll down to the Emulate vision deficiencies dropdown.
  5. Select Protanopia (no red), Deuteranopia (no green), or Blurred vision.
  • What to look for: Can you still distinguish buttons? Are error messages (often red) still visible? Is text readable against the background?
• Safari:
  • Consider using apps like Sim Daltonism to test for colour blindness.
  • You can also change the whole device (Mac or iOS device) to simulate it - see this guide.
• Firefox:
  1. Open the Accessibility tab in Developer Tools (Shift+F12).
  2. Look for the Simulate dropdown menu in the top toolbar to toggle various color blindness modes.

Automated accessibility scanners

These tools catch ~30-50% of issues with pages automatically (e.g., missing alt text, low contrast).

Recommended: WAVE Evaluation Tool (browser extension):

• Install the extension for Chrome or Firefox.
• Click the icon to visualize errors directly on the page.
• Crucial for visual disabilities: Look at the Contrast tab to see exactly which text fails WCAG contrast ratios (minimum 4.5:1 for normal text).

Testing documents (Word, PowerPoint, PDF)

Microsoft Office (Word, PowerPoint, Excel)

Microsoft has a powerful native checker built into the software.

• How to run it:
  • Go to the Review tab on the ribbon.
  • Click Check Accessibility.
  • A pane will open on the right listing "Errors" (critical) and "Warnings."
• Key checks for visual disabilities:
  • Alt Text: It will flag any images missing descriptions.
  • Reading order: In PowerPoint, use the "Selection Pane" to ensure the screen reader reads slide elements in the correct order (not just the order you pasted them).
  • Color contrast: Newer versions of Office automatically flag text that is too light against the background.

PDFs (Adobe Acrobat Pro)

Note: You need the "Pro" version to run a full audit.

• How to run it:
  • Open the Tools tab and add Accessibility.
  • Click Full Check in the right-hand menu.
  • Ensure the "Create Accessibility Report" box is checked.
• The "Color Contrast" Manual Check: Acrobat's automated checker cannot check color contrast automatically. You must manually check this using a tool like the Colour Contrast Analyser (CCA) (see below).

Testing other visual content (charts, posters, infographics)

Data visualizations are the most common failure point for color blind users!

• The "Grayscale" Test:
  • Print your chart in black and white (or set your OS to grayscale).
  • Pass/Fail: If you can no longer tell which line on the graph is "Sales" and which is "Expenses," the chart fails.
• The solution:
  • Use patterns: Add dashes, dots, or textures to lines and bar charts so they are distinct without color.
  • Direct labeling: Place the text label directly on the line or pie slice rather than using a separate color-coded legend.