[email protected]
0333 050 1245

Website Footer Design: 5 Patterns From UK Design Systems

  1. Home
  2. »
  3. Blog
  4. »
  5. Website Footer Design: 5 Patterns From UK Design Systems

A well-designed footer groups global site links, puts legal and accessibility links in a consistent order, and ensures keyboard and focus accessibility. It carries four jobs: navigation, reassurance, compliance and recovery. Group related links, order legal pages the same way on every page, and keep focus visible for keyboard users. Examples and a copyable checklist follow below.

TL;DR:

  • Place Accessibility, Cookies, Privacy, and Terms in that order on every page, keep support details separate, and limit the footer to one call to action.
  • Use a semantic footer landmark, descriptive link labels, visible keyboard focus, and accessible names for icon links; test every item with Tab.
  • A cookie banner can hide focused footer links; test with it visible and use scroll padding to keep the active link in view.
  • Compare footer link order across page templates, check contrast and labels, then test accordions and sticky elements on a real mobile device.
Kukoocreative
Make Your Website Work Harder
Kukoocreative partners with UK business owners to create websites that build brand recognition and connect them with the people who matter most.

Visit Kukoocreative

Table of Contents

Every footer earns its space by doing one of four jobs. Navigation offers a second route to pages a visitor might want once they have finished the main content. Reassurance comes from contact details, social proof and brand marks that tell a visitor they have landed somewhere real. Compliance covers the legal links that regulators and good practice expect on every page. Recovery catches the visitor who has scrolled to the bottom looking for something the header missed.

That split matters for what goes where. Core site navigation, the handful of pages people need on every visit, belongs in the header. The footer holds the quieter, global links: legal pages, sitemap, careers, press.

  • Navigation: a backup route to pages the header does not cover.
  • Reassurance: contact details and trust marks that confirm legitimacy.
  • Compliance: the legal links every page is expected to carry.
  • Recovery: a safety net for visitors who scroll past everything else.

Consistency across pages matters more here than almost anywhere else on a site. Repeat visitors learn where things live, and assistive technology users rely on that same predictability to navigate efficiently.

Most footers are built from the same handful of blocks, arranged differently depending on how much content a site needs to surface.

  1. Doormat navigation: short, clear group headings with one to six links each, never duplicating the main menu.
  2. Legal links: ordered the way UK design systems commonly present them, Accessibility, Cookies, Privacy, Terms, as recommended in the GOV.UK Design System.
  3. Contact and support: a dedicated column for a phone number, email or help link, kept separate from general navigation.
  4. Branding and copyright: a compact copyright line, with an optional pre-footer row above it for awards or partner logos.
  5. Optional extras: newsletter sign-up, a language or theme toggle, and back-to-top behaviour, used sparingly and built to be keyboard-friendly.

The National Archives Design System documents this same shape well: a navigation block, a legal array and a social block, each with its own accessible markup. Doormat groups work best when each heading describes a theme rather than echoing a page title already in the header, and legal links read more clearly as plain text than as icons.

Pro Tip: Keep one visible call to action in the footer at most. Stacking several competing buttons at the bottom of a page dilutes all of them.

One prominent footer button beside competing buttons

Accessibility and technical patterns that prevent common failures

Most footer accessibility failures come from a small set of repeatable mistakes, which makes them straightforward to fix once you know what to check.

  • Wrap the footer in a semantic <footer> element with proper navigation landmarks, so screen reader users can jump straight there.
  • Write link text that describes the destination (“Accessibility statement”, not “click here”), since link purpose in context is a measurable requirement.
  • Keep the order of footer links identical across pages, matching the consistent-help expectation in WCAG’s guidance.
  • Make keyboard focus visible on every link, and confirm every item is reachable by Tab alone.
  • Label icon-only social links with accessible names, since a bare icon tells a screen reader nothing.

Fixed banners and cookie notices are a frequent cause of hidden footer links. The W3C’s C43 technique shows how CSS scroll-padding, sometimes paired with a ResizeObserver to measure banner height, keeps a focused footer link from disappearing behind a fixed panel. The British Red Cross design system backs the same principle from a different angle, specifying semantic HTML, visible focus and descriptive link text as baseline requirements for its footer components, not optional extras.

A handful of patterns cover most of what a footer needs to do, and each is worth studying for a specific reason rather than copying wholesale.

  • Minimal legal-focused footer: a single row of clearly labelled legal links. Copy the restraint, not the emptiness; it works only when the site genuinely has nothing else to surface.
  • Multi-column doormat with a contact column: navigation groups on the left, contact details reserved for the rightmost column on wide screens. Copy the placement; it is the column visitors scan last and expect to hold a way to get in touch.
  • Pre-footer for awards or affiliations: a slim row above the main footer showing accreditations or partner logos. Copy the restraint again; this belongs on a homepage, not repeated on every page of a site.
  • Compact mobile accordion: footer groups collapse into expandable headings on small screens. Copy the clarity of the heading text and make sure each toggle is reachable and operable by keyboard, not just touch.

For teams building this in house rather than briefing a designer, TK Marketing’s website service for UK trades is one example of an implementation partner that handles ongoing site management once a pattern like this is chosen.

A short table like this travels well in a project brief or a pre-launch QA sheet.

Check What to look for
Required links present Accessibility, Cookies, Privacy, Terms all appear and link correctly
Link order Same order on every page template
Keyboard focus Every link reachable by Tab, with a visible focus outline
Link purpose Text describes the destination without relying on surrounding context
Contrast Footer text and links meet readable contrast against the background
Mobile behaviour Accordion groups expand and collapse cleanly, with no hidden controls
Cookie preference link A way to revisit cookie choices is present and working

Running through each row takes a few minutes once the footer is built, and catching a missing link here is far cheaper than catching it after launch.

A short manual pass catches most problems before they reach a live site.

  1. Tab through the footer from the last body element onward, checking that focus order matches the visual order and nothing is skipped or hidden.
  2. Check contrast and icon labelling against the background colour, and confirm every icon-only link has an accessible name.
  3. Compare the footer across a sample of page templates to confirm the link order has not drifted.
  4. Run an automated check with a tool such as aXe or pa11y to catch anything manual testing misses.
  5. Test on a real mobile device: open any accordion groups, check touch target sizes, and confirm sticky elements do not obscure footer links.

Pro Tip: Run the keyboard test with the cookie banner still showing. That is when hidden focus problems usually surface.

Kukoo Creative’s perspective: practical rules we use for client footers

Across years of building sites for small and growing businesses, we have settled on a short set of rules: legal links first, one focused call to action, and the same structure on every page without exception. Most footer problems we fix are not design failures, they are inconsistency between templates. We would rather ship a footer with six links that all work perfectly than twenty that half-work, and we encourage every client to prioritise what a visitor actually needs to do over how much can be squeezed into the space.

— Kukoo

We design footers as part of every website build, not as an afterthought bolted on before launch, which means accessibility checks and consistent legal ordering are built in from the first draft rather than patched in later.

Kukoocreative

  • Accessible, brand-aligned footers that pass basic WCAG checks before we hand the site over.
  • A single partner handling both the creative layout and the technical build, so nothing gets lost between designer and developer.
  • We offer revisions on the visual side, so the footer fits your brand as well as it fits the standards.

If your current site needs a fresh footer or a full rebuild, visit our services page to see how we approach web design and UX work, or browse our portfolio to see finished examples before you brief us.

FAQ

Start with the four jobs a footer does: navigation, reassurance, compliance and recovery, then group links by theme and keep the legal links in the same order on every page. Check keyboard focus and link text before launch, following the structure the GOV.UK Design System recommends.

A solid footer includes legal links (Accessibility, Cookies, Privacy, Terms), contact or support details, a copyright line, and optional extras like a newsletter sign-up or social links. The National Archives Design System documents this same combination as its standard footer structure.

There is no single best layout, but the strongest footers share clear link labels, a consistent order across pages and visible keyboard focus. A multi-column doormat with a dedicated contact column tends to work well for larger sites, while a minimal legal-only row suits simpler ones.

Yes. A footer is where visitors expect to find legal information and a way to get in touch when the header has not answered that need, and design systems such as the British Red Cross pattern library treat it as a mandatory part of every page template.

Sources