Are you ready to assess your digital accessibility?

Before the external audit begins, we ask that you complete the preliminary self-assessment form below, save it as a PDF, then email it to michael.foskett@santander.co.uk.

Unless cleared, data is preserved locally on your device from visit to visit. For security, this data is never uploaded to a server.

Self-assessment - Digital Accessibility Audit

Assessor: Email: Dated:

Scope of assessment

Type of document:

Assessment synopsis

Assessment summary by section
SectionQuestionsPassedFailedNot ApplicablePass/Fail
Headings4000
Links7000
Keyboard navigation7000
Text resize4000
Automated testing5000
Total questions27Unanswered27
Type of document

To assess desktop views, we recommend using Firefox with the provided bookmarklets, and Lighthouse or Deque Axe DevTool as an automated testing tool. For PDFs, and other documents, simply answering the provided questions should be sufficient.

Wherever possible try to run these checks across different hardware (MacOS, Windows, iOS, Android) and browser (Chrome, Firefox, Edge, Safari) combinations.

When testing mobile apps, we recommend also using a screen reader, such as VoiceOver on iOS or Talkback on Android.

The checks

1. Headings

Heading checks

If you're using a desktop, drag this bookmarklet Headings v4.2 into your browser's bookmarks. Then, navigate to the page you want to test and click the bookmark.

How to test headings

How to test headings on web pages

Bookmarklet video coming soon…

What you need to check

1. Is there a single main H1 heading at the top of the page? Is there a main heading at the top of the page?
2. Are headings arranged in a logical order from highest (H1) to lowest (H2 to H6)? Are headings arranged in a logical order from highest to lowest?
3. Do all headings clearly introduce, or describe, the content that follows?
4. Have all empty headings been removed?

References & resources

To help meet the guidelines

2. Links

Link checks

If you're using a desktop, drag this bookmarklet Links v1.6 into your browser's bookmarks. Then, navigate to the page you want to test and click the bookmark.

How to test links

How to test links on web pages

Bookmarklet video coming soon…

What you need to check

Links must meet the following criteria:

1. Can the link text be understood on its own, without relying on the content around it?
2. Does the link text avoid general terms like "Find out more" or "More details"?
3. Does the link text accurately describe the destination it goes to?
4. Do links with the same text go to the same destination?
5. Are links recognizable as links by more than just the colour? E.g. by grouping, made larger, bolded, or underlined?

Links should also meet the following criteria:

6. Are links that open in a new window or tab clearly indicated? For example, with a tooltip or an icon?
7. Are links that open or download documents clearly marked with their format and file size? E.g. "document-name (pdf 200Kb)"

References & resources

To help meet the guidelines

3. Keyboard

Keyboard checks

If you're using a desktop, drag this bookmarklet Tab-stops v3.57 into your browser's bookmarks. Then, navigate to the page you want to test and click the bookmark.

A bluetooth keyboard is required to test on iOS and Android.

How to test keyboard navigation

How to test Keyboard navigation on web pages

Bookmarklet video coming soon…

Keyboard navigation on iOS or Android

How to test Keyboard navigation on iOS or Android

Native Apps: Keyboard Navigation Testing

Use only the keyboard to navigate through the document by pressing the tab and shift + tab keys, or the arrow keys when selecting radio buttons. Activate links by pressing the Return key and use either the Return or Spacebar to activate buttons.

What you need to check

1. When an element is focused by keyboard, is your current position always clearly indicated?
2. Are all interactive elements, such as buttons, links, and input fields, reachable and usable with just the keyboard?
3. Does keyboard focus stop on any non-interactive elements?
4. Are there any elements which remain invisible upon keyboard focus?
5. Are all links, buttons, and inputs, adequately sized and spaced? When running the bookmarklet, are all links, buttons, and inputs, larger than the overlaid yellow square? Are all links, buttons, and inputs, adequately sized and spaced? Are any too small, or too close to a neighbour, to easily tap?
6. Does the keyboard focus order match the visual layout? Specifically from left to right and then top to bottom.
7. Are there any points where the keyboard becomes stuck? E.g. does pressing Esc or Tab not allow you to exit a component?

References & resources

To help meet the guidelines

4. Text Resize

Font scaling or text resizing

Set up Chrome browser to test text-resizing and reflow

How to set up Chrome for testing text-resizing and reflow

  1. Open the Chrome browser and maximise it to fill the screen (this guide assumes your display is 1280 pixels or wider).
  2. Access Chrome DevTools by clicking:
    - On PC: Press F12 or Control + Shift + I
    - On Mac: Press Command + Option + I
  3. The DevTools panel should open on the right-hand side. If it doesn’t, look for the three vertical dots icon in the top right corner of the DevTools panel, click it, and set the "Dock side" to the right.
  4. Adjust the border between the main window and the DevTools panel by dragging it until the main window width reaches 1280 pixels.
  5. To increase the font size, press:
    - PC: CTRL + +
    - Mac: Command + +
    Repeat this step eight times until the text zoom level reaches 400%.

We're now ready to begin testing the page…

Set up Firefox browser to test text-resizing and reflow

How to set up Firefox for testing text-resizing and reflow

  1. Open Firefox browser and maximise it to full screen but keep the Menu bar in view.
  2. Navigate to the page you wish to test.
  3. From the Menu bar, click View, Zoom, and ensure Zoom Text Only is ticked
  4. Again from the Menu bar, click Tools, then Browser Tools, then Responsive Design Mode.
  5. In the Responsive Design Mode window controls, set width to 1280px, height to 800 (or almost full browser height), and set DPR: 1.
  6. To increase the font size, press:
    - PC: CTRL + +
    - Mac: Command + +
    Repeat this step none times until the text zoom level reaches 400%.

We're now ready to begin testing the page…

Text-resizing on iOS or Android

How to test WCAG 1.4.4 text-resize on iOS or Android

Native Apps: Dynamic Type and Font Size Testing

What you need to check

Scale the text content up to 400% on a browser or device with a width of 1280px, then verfy the following:

Scale the text content up to 200% on a browser or device with a width of 320px, then verfy the following:

1. Did all the text scale-up as expected?
2. Is there any need to scroll horizontally, with an exception for data tables?
3. Has any text been obscured, hidden, or cut off?
4. Have long words been broken or hyphenated over two lines as necessary?
5. Have words trunkated so much that they're meaning has been lost?

Resources & references

To help meet the guidelines

5. Automated testing

Automated testing

Automated testing is an excellent method for identifying common errors.

We recommend that product managers and owners use Lighthouse, which is integrated into both Chrome and Edge browsers. For developers, we suggest installing the Deque Axe DevTool extension for automated testing.

Other automated testing tools

External testing online (must be public facing):

Browser extensions (requires installation):

Server-side testing:

Silktide server– Is available on the back-end of Santander servers.

App testing

BrowserStack and Sauce Labs are industry-leading, cloud-based web and mobile testing platforms for developers. Both platforms offer quality features to streamline and simplify testing across browsers and devices.

Currently, we recommend the use of Sauce Labs as it has built in Deque Axe DevTools for automated accessibility testing.

Automated testing is available from:

Lists of software to test Accessibility on mobile apps:

Lighthouse - How to run an automated test

To perform an accessibility test using Lighthouse, first open your website in Chrome. Then, access DevTools and go to the Lighthouse tab. Select "Accessibility" and choose the device type, either desktop or mobile. Finally, click "Analyze page load" to start the test.

Video: Google Lighthouse | Automated Accessibility Tool Review

Detailed Steps:
  1. Open the webpage in Chrome: Navigate to the webpage you want to audit in Google Chrome.
  2. Open DevTools: Right-click anywhere on the page and select "Inspect" to open the DevTools.
  3. Access Lighthouse: In DevTools, on the left side of the window, click on the "Lighthouse" tab.
  4. Choose Accessibility: Under the "Categories" section in Lighthouse, select "Accessibility".
  5. Select Device Type: Choose either "Desktop" or "Mobile" to simulate the device type you want to test.
  6. Generate Report: Click the "Generate report" button to initiate the audit.
  7. Review the Report: Lighthouse will display a score and a detailed report outlining passed and failed accessibility audits.
  8. Analyse Results: The report will categorize failed audits (e.g., contrast, navigation) and provide information about the issues, including descriptions, links to more information, and code snippets.

Introduction to Lighthouse

What you need to check

From the automated test results answer the following:

1. Do all form elements have associated labels?
2. Do all image elements have appropriate alt attributes?
3. Do background and foreground colors have a sufficient colour contrast?
4. Are ARIA attributes, when applied, used as intended?
5. Did any other errors arise?

Ask the developer(s) to repair any issues raised.

Assessment results

Assessment summary by section
SectionQuestionsPassedFailedNot ApplicablePass/Fail
Headings4000
Links7000
Keyboard navigation7000
Text resize4000
Automated testing5000
Total questions27Unanswered27

How to save assessment results

Saving this assessment

To save this page as a PDF document containing just the relevant form data

  1. Click the "Save assessment as PDF document" button.
  2. In the Print window under "Destination" select "Save as PDF".
  3. Click "Save".
  4. By default the file will be named "Accessibility Assessment (Assessment-Date).pdf" change the name if you wish.
  5. It will save to the browsers default location. Change if required.

Note: Using the browsers default print option will output the whole page including the instructions.

Once the assessment is completed, please email it to michael.foskett@santander.co.uk

How to install and use bookmarklets

Bookmarklets

The bookmarklets only work within a browser on web pages. We recommend Firefox as a browser for this purpose. It should be available from the self-service app but you can also get it here: Download Firefox.

Bookmarklet installation instructions

  1. Drag each of the three bookmarklets into your browser's bookmarks bar:
  2. Navigate to the page you wish to test.
  3. Click the bookmark.
  4. Answer the check questions asked.

Bookmarklets source code

Dated 03/09/2025

This webpage is also available as a Word document: Accessibility Self-Assessment [docx 31Kb]