UX audit checklist for every page template

This checklist is organised by page template. Run the checks for every template first, then the ones for each type of page your site has.

Each check says how to run it, what passing looks like, and whether a tool can measure it or a person has to judge it.

Our guide to running a website UX audit covers the steps around it: goals, scope, ranking and re-checking.

How to use this checklist

Run the checks on one representative page of each template, in a real browser, at a phone width and a desktop width. Choosing that page well matters: our post on template-based auditing explains how to choose the representative page.

After each check’s name, in brackets, is who can decide it:

• Measured: a tool can decide pass or fail from the page, its response or its field data.
• Judged: a person has to decide.
• Both: a tool finds the candidates, and a person decides.

Many judged checks come from Jakob Nielsen’s ten usability heuristics, and our post on heuristic evaluation covers the expert review they are used for. Where a check is also a WCAG 2.2 Level A or AA success criterion, its number links to that criterion in our WCAG 2.2 checklist.

Every template

• Page title (both). How to check: read the browser tab. Passes when each page has a title that says what the page is (2.4.2). A tool finds missing or duplicate titles; a person judges the wording.
• Headings (both). How to check: view the heading outline. Passes when headings are marked up as headings (1.3.1) and describe their sections (2.4.6).
• Navigation (judged). How to check: compare the menu on three templates. Passes when navigation repeated across pages keeps the same relative order, unless the user changes it (3.2.3).
• Skip link (both). How to check: load the page and press Tab once. Passes when a skip link, or headings and landmarks, let you bypass the menu (2.4.1). A tool finds a skip link, landmarks and headings; a person checks that they bypass the menu.
• Keyboard (both). How to check: tab through the whole page, then Shift+Tab back. Passes when every control can be reached and used (2.1.1), focus can always leave (2.1.2), focus moves in an order that preserves meaning and operability (2.4.3), focus is visible (2.4.7), and the focused control is not entirely hidden by something the page puts on top of it (2.4.11). A tool presses Tab; a person judges the order.
• Text contrast (both). How to check: check text against its background. Passes when normal text has a contrast ratio of at least 4.5:1, and large text (18 point, or 14 point bold) at least 3:1; logos, text in disabled controls, decorative or invisible text, and text in a picture with significant other visual content are exempt (1.4.3). A tool measures; a person checks text over images and the exemptions.
• Narrow screens (both). How to check: set the window to 320 CSS pixels wide. Passes when content reflows with no sideways scrolling and nothing lost, except content that needs a two-dimensional layout, such as data tables, maps and diagrams (1.4.10). A tool finds sideways scrolling; a person judges the exceptions.
• Touch targets (both). How to check: measure buttons and links. Passes when each target is at least 24 by 24 CSS pixels, or, if smaller, is spaced so that a 24-pixel-wide circle centred on it overlaps no other target and no other small target’s circle; links in a sentence, browser-default controls, controls with an equivalent that passes, and targets whose size or presentation is essential or legally required are exempt (2.5.8). A tool measures; a person judges the exceptions.
• Cookie banner (both). How to check: load the page in a private window. Passes when you can decline and close the banner with the keyboard, and it does not cover the control you are on.
• Loading and stability (measured). How to check: read field data if the site has it, and run a lab test. Passes when, at the 75th percentile of real page loads, on mobile and desktop separately, Largest Contentful Paint is within 2.5 seconds, Interaction to Next Paint is 200 milliseconds or less and Cumulative Layout Shift is 0.1 or less. A lab run is a guide, and it shows Interaction to Next Paint only if it interacts with the page.
• Links (both). How to check: crawl the page’s links and read their text. Passes when no link is broken, and each link’s text, with its context, says what it does or where it goes (2.4.4).
• Page language (both). How to check: inspect the html element. Passes when the page’s main language is set, and is the right one (3.1.1). A tool finds a missing language; a person confirms it.

Home page

• What the site is (judged). How to check: show the first screen to someone for a few seconds, then ask. Passes when they can say what the site offers and who it is for.
• Main tasks (judged). How to check: list the site’s top three tasks and look for each. Passes when each task starts from a link or control on the home page.
• Search (judged). How to check: search for a common item, with a typo. Passes when search is easy to find on a large site, and returns useful results.
• Moving content (both). How to check: watch a carousel or animation. Passes when anything that starts moving by itself, lasts more than five seconds and sits beside other content can be paused, stopped or hidden, unless the movement is essential (2.2.2).

Category and search results

• Result count and filters (both). How to check: apply two filters. Passes when the number of results and the active filters are shown, and, when the count updates without a page load, it is marked up as a status message, for example with role="status", so a screen reader can announce it without focus moving (4.1.3).
• Back button (judged). How to check: filter, open an item, press Back. Passes when the filters, the sort order and the scroll position are kept.
• No results (judged). How to check: search for something the site does not have. Passes when the page says so plainly and offers a next step, such as a broader search.
• More results (judged). How to check: use “Load more”, or pagination that updates the page in place, with the keyboard. Passes when focus moves to the first new result, or to a heading or count just above the new results, not back to the top of the page.

Product and detail pages

• Key facts (judged). How to check: look for price, availability and delivery. Passes when they are visible before the visitor adds anything to a basket.
• Main action on a phone (both). How to check: load the page at a phone width and scroll. Passes when the main action, such as “Add to basket”, is never hidden behind a sticky bar or banner. A tool finds covered controls; a person names the main action.
• Images (both). How to check: inspect each image’s text alternative. Passes when informative images have a text alternative that serves the same purpose, and decorative images have an empty one or are hidden from assistive technology (1.1.1). A tool finds missing ones; a person judges the wording.
• Options (judged). How to check: choose a size or a colour. Passes when each option has a name in text, and the chosen option is shown by more than colour (1.4.1).

Articles and content pages

• Line length (measured). How to check: count the characters in a line of body text. Passes when lines of body text are 80 characters or fewer (40 in Chinese, Japanese or Korean), the width the AAA criterion 1.4.8 asks for a way to reach.
• Text spacing (both). How to check: apply line height 1.5, paragraph spacing 2, letter spacing 0.12 and word spacing 0.16 times the font size. Passes when no content or function is lost, for example text cut off or overlapping (1.4.12).
• Scannability (judged). How to check: skim only the headings and the first sentence of each section. Passes when you can tell what each section covers.
• Freshness (judged). How to check: look for a date. Passes when content that changes shows when it was last updated.

Forms and checkout

• Labels (both). How to check: read each field without its placeholder. Passes when each field has a visible label or instructions (3.3.2), tied to it in the markup (1.3.1).
• Autofill (both). How to check: let the browser fill name, email and address. Passes when fields that ask for the user’s own details, such as name, email and address, carry the matching autocomplete value (1.3.5). A tool checks that each value is valid; a person checks that it is the right one.
• Errors (both). How to check: submit the form empty, then with a wrong value. Passes when each error identifies its field and describes the problem in text (3.3.1), and says how to fix it where that is known, unless saying so would undermine security or the purpose of the form (3.3.3); as GOV.UK does, it sits next to its field and is repeated in a summary at the top.
• Asking twice (judged). How to check: go through the whole process. Passes when, within one process, anything already entered is filled in or offered for selection rather than typed again, unless re-entry is essential, needed for security, or the earlier answer is no longer valid (3.3.7).
• Checking before committing (judged). How to check: reach the last step of a purchase, a legal commitment, or a change or deletion of your data. Passes when you can undo the submission, or your input is checked and you can correct it, or you can review and correct it before it is final (3.3.4).
• Long forms (judged). How to check: count the questions on each step. Passes when long forms are split into steps, each with a back link.

Sign-in and account

• Password managers (both). How to check: sign in with a password manager, then paste the password. Passes when a password manager can fill the password and you can paste it, and a one-time code can be both pasted and filled in automatically, unless another sign-in method without a cognitive function test is offered (3.3.8).
• Time limits (judged). How to check: leave a signed-in page open. Passes when, before you reach the limit, you can turn it off or lengthen it to at least ten times the default, or you are warned, get at least 20 seconds to extend it with a simple action, and can extend it at least ten times. The limit is exempt when it is essential, a required part of a real-time event, or longer than 20 hours (2.2.1).
• Account recovery (judged). How to check: use “Forgot password”. Passes when recovery needs no memory, transcription or puzzle test, unless the test is recognising objects or a picture, video or sound you gave the site, paste and a password manager work for it, or another way to recover without such a test is offered (3.3.8).

Error and empty pages

• Page not found (judged). How to check: visit an address that does not exist. Passes when the page says in plain words that the page was not found, without jargon such as “404”, and offers a way on.
• Status code (measured). How to check: read the response for the missing address. Passes when a missing page returns HTTP 404, or 410 if it is gone for good, and not 200 or a redirect to the home page.
• Empty states (judged). How to check: open an empty basket, list or account area. Passes when the page says what would appear there and how to start.
• Service errors (judged). How to check: trigger a failed submission. Passes when the message says what happened and what to do next, and keeps what was entered.

After the checklist

A failed check is a finding. Write down where it is, what happens and who it affects, then rank the findings: severity first, then reach. Fix each one at the template, and re-check it on two pages before you close it.

Run the measured checks with a tool on each template, so that the people on the audit spend their time on the judged ones. See what automated UX testing can and cannot find for the measured defects in detail.