Footer

On this page

Example

Designer guidance

Developer guidance

Content editor guidance

Accessibility 

Support

Designer Guidance

When to use

Use the footer at the bottom of every webpage to provide

• Consistent access to cross-site navigation
• Contact information
• Legal and regulatory information
• Links to key organisational services or external channels

When not to use

• Do not use the footer anywhere other than at the bottom of a webpage.
• Do not recreate variations of the footer for individual pages. The footer should remain globally consistent.

How to use

• Place the Footer at the bottom of the page, outside the main content area.
• Keep the structure and content consistent across all pages.
• Group related links together (e.g. legal links, corporate information, support links).

Behaviours


The footer component can include:

• Doormat navigation - links to key sections of the website.
• Contact information and social links - ensure icons have accessible labels
• Required legal information - such as terms and conditions, privacy policy, and copyright notice. 
• Accessibility statement - if required

The footer should remain static and non interactive beyond link navigation.

Developer Guidance

Best practices

• Use semantic HTML:
  • <footer> for the overall component.
  • <nav> for navigation links.
• Apply landmark roles for assistive technologies.
• Ensure full keyboard navigation with logical focus order.
• Provide visible focus indicators for all links.
• Ensure icon-only links (eg. social media) expose acc

Content Editor Guidance

Best practices

• Use clear, descriptive link text (e.g. “Privacy Policy” not “Click here”).
• Keep link names consistent across the site.
• Avoid abbreviations unless widely understood.
• Ensure social media links include accessible names.

Accessibility

A footer must:

• Use semantic HTML to expose structure and relationships
• Provide descriptive link text that clearly indicates purpose
• Maintain sufficient contrast for text, links, icons, and focus indicators
• Be operable entirely by keyboard
• Appear consistently across pages to support user familiarity
• Ensure all interactive elements expose an accessible name, role and state

WCAG Success Criteria

• 1.3.1 Info and Relationships (Level A)
  Use semantic HTML for the footer (<footer> element) and structure links, navigation lists, and contact information with proper markup.
• 1.4.11 Non-text Contrast (Level AA)
  Focus indicators, link underlines, and icon-only links (e.g. social media icons) must have at least 3:1 contrast with adjacent colours.
• 2.1.1 Keyboard (Level A)
  All links in the footer must be accessible with the keyboard.
• 2.4.4 Link Purpose (In Context) (Level A)
  All links in the footer must have descriptive labels (e.g. “Privacy Policy” instead of “Click here”).
• 3.2.3 Consistent Navigation (Level AA)
  If footer navigation appears across multiple pages, its order and placement must be consistent.
• 3.2.4 Consistent Identification (Level AA)
  Icons or labels used in the footer (e.g. social media links) must be presented consistently across the site.
• 4.1.2 Name, Role, Value (Level A)
  Interactive elements must expose an accessible name (via link text or aria-label for icons), their role, and their state to assistive technologies.