Contact banner

On this page

Anatomy

Designer guidance

Developer guidance

Content editor guidance

Accessibility 

Support

Anatomy

Designer Guidance

When to use

Use the Contact banner when users need to:

• Contact a team, service, or organisation for help.
• Access important support channels such as phone numbers or email addresses.
• Find assistance when completing a task or journey.
• Understand who to contact for service-specific queries.

When not to use

Avoid using a Contact banner when:

• Contact information is not relevant to the user's current task.
• Multiple support options require detailed explanations, consider a dedicated contact page instead.
• The information is not actionable or does not provide a clear next step for users.

How to use

• Always provide a clear heading that explains the purpose of the contact information.
• Display the most relevant contact method first.
• Use clear and recognisable formats for phone numbers, email addresses, and links.
• Ensure all contact methods are actionable where possible.
• Use optional supporting text to explain when users should contact the service.
• Keep content concise and focused on helping users decide whether the contact option is appropriate.
• Avoid long paragraphs of instructional content.
• Use descriptive link text.

Behaviours


• Phone numbers and email addresses should be interactive where supported by the device.
• Links must have a visible hover and focus state.
• Contact information should remain readable across all screen sizes.
• If contact methods become unavailable, provide alternative contact options where possible.
• Contact details should be reviewed regularly to ensure they remain accurate and up to date.

Options

The Contact banner may include:

• Optional supporting text.
• Up to four contact methods: Phone, email, address and a link.
  • Prioritise contact methods based on user needs and frequency of use.

Developer Guidance

Best practices

• Use semantic HTML elements where appropriate.
• Structure contact information using links for phone numbers (tel:) and email addresses (mailto:).
• Ensure all interactive elements are keyboard accessible.
• Maintain logical focus order.Apply visible focus styles to all links and actions.
• Ensure interactive targets meet the minimum touch target size (44×44px).
• Where opening hours are displayed, ensure they are available to assistive technologies.
• Test responsive behaviour across screen sizes and zoom levels.

Content Editor Guidance

Best practices

• Write headings that clearly indicate help or support is available.
• Use plain English and avoid internal team names where possible.
• Present phone numbers, email addresses and support channels consistently.
• Be specific about availability and response times.
• Keep supporting text concise and task-focused.
• Review contact details regularly to ensure accuracy.

Accessibility

Accessible Contact banners should:

• Include a clear heading that describes the section's purpose.
• Ensure all contact methods are accessible to keyboard and screen reader users.
• Use meaningful link text that describes the action or destination.
• Provide sufficient colour contrast for text, links, icons and backgrounds.
• Maintain a logical reading order on all screen sizes.
• Ensure focus indicators are clearly visible.
• Ensure any opening hours, availability information or important contact guidance is available to assistive technologies.

WCAG Success Criteria

• 1.3.1 Info and Relationships (Level A)
  Contact information and headings are structured semantically and can be interpreted by assistive technologies.
• 1.4.3 Contrast (Minimum) (Level AA)
  Text and links meet minimum contrast requirements.
• 2.1.1 Keyboard (Level A)
  All links and actions are fully operable via keyboard.
• 2.4.4 Link Purpose (Level A)
  Link text clearly communicates its destination or purpose.
• 2.4.6 Headings and Labels (Level AA)
  Headings clearly describe the purpose of the contact section.
• 2.4.7 Focus Visible (Level AA)
  Keyboard focus indicators are clearly visible on all interactive elements.
• 3.2.4 Consistent Identification (Level AA)
  Contact methods and actions are presented in a consistent way.

Related components

Header