Footer

[govuk-design-system]

Use this issue to discuss the footer component in the GOV.UK Design System.

What

Footer for GOV.UK sites, including departmental and service variants.

Why

Site footer are used on all web pages. There's also a need for consistent footers for departmental and internal services.

Anything else

• HMRC footer in HMRC design patterns
• DWP footer in DWP elements guide
• Footer discussion on Dropbox Paper

Related patterns

• #97 Site header

[chrisroos]

Hi,

We're using this footer component on the new marketplace app we're building for CCS. We're investigating how to make the footer sticky so that it appears at the bottom of the page even if the page doesn't have much content. I've searched the design system but couldn't find anything about a sticky footer there so wondered whether you had any advice on how best to go about it?

[amyhupe]

Dropbox Paper audit

On 16 January 2019 the Design System team reviewed a Dropbox Paper document discussing the Footer component.

The aim was to reduce the number of places containing guidance and code by:

• migrating relevant, useful content into the Design System itself
• recording important research findings in the community backlog
• removing the original Dropbox Paper page

Below is a record of the outcomes of that review.

If you need to, you can see the original Dropbox Paper content in the internet archive.

Review outcomes

Updates to the Design System

The Design System team will carry out the following updates to ensure that relevant, useful content from the Dropbox Paper file is added to the Design System.

• Under when to use, clarify that you have to use the footer if your service is on GOV.UK as currently the guidance just says "Use the footer at the bottom of every page of your service."

• Update the list of things you can add to your footer to include links to APIs and data feeds and link to the responsible department (not to a commercial supplier).

[edwardhorsford]

I'm trying to have one or more lines of text above the footer links. Right now the component makes this a little awkward.

It has the text option - but this places content below the links.

I can pass html, but then have to pass the html of the links too.

I also can't see a class for getting the right font / colour - it seems to inherit from the parent govuk-footer - if I put things in a paragraph it throws out the styling (we have styles on p). I think the equivalent of govuk-body but for footer content would be good.

What I'm aiming for:

[edwardhorsford]

I'm now making my own style for the footer text - but it doesn't look like the colour used is exposed. For now I've hard coded it - but perhaps it could be made available?

[edwardhorsford]

For now, I've gone with:

$govuk-footer-text: #454a4c; // design system doesn't expose this colour

.app-footer__body {
  @include govuk-font(16);
  color: $govuk-footer-text
}

[edwardhorsford]

One more from me. Is it possible to override the OGL logo and text? It's not relevant to our service and our content is not released under this licence.

I presume other services which contain confidential / official information may have similar needs - potentially depending on the page of the service. Feels like it would be good to make it configurable.

I've ended up using raw html - but need extra styles so the last child of .govuk-footer__menu-item has 0 margin-bottom.

[HughePaul]

Another reason to have the English text on this component configurable is so it can be translated into Welsh

[terrysimpson99]

Some sites have "Built by ..." in the footer, see: https://www.gov.uk/universal-credit/how-to-claim

Others don't, see: https://www.universal-credit.service.gov.uk/postcode-checker

Is there a declutter opportunity here?

[paulrobertlloyd]

For the service I’m prototyping, we want to signpost help content in the footer. However this component isn’t yet flexible enough to achieve the desired result:

In order to achieve the above, I ‘forked’ the footer, making the following changes:

• Removed the OGL licence text as this isn’t applicable to our service (could this be made an option, but shown by default?)
• Added a meta.title option. If this value is provided, a heading is shown above the meta links. If not, the current behaviour is honoured (a visibly hidden title, whose content defaults to ‘Support links’ if params.meta.visuallyHiddenTitle is not provided)
• Moved div.govuk-footer__meta-custom (populated by params.meta.text/params.meta.html) above ul.govuk-footer__inline-list. Is there a case for having slots above and below params.meta.items?

(This is all very similar to @edwardhorsford’s feedback above).

This is the forked Nunjucks tag as it appears in our templates:

{{ appFooter({
  classes: "govuk-footer--app",
  meta: {
    title: "Need help?",
    html: "Call <a href=\"https://getintoteaching.education.gov.uk/\">Get into Teaching</a> on Freephone 0800 389 2500 or chat to an adviser using their <a href=\"https://ta-chat.education.gov.uk/chat/chatstart.aspx?domain=www.education.gov.uk&department=GetIntoTeaching%27,%27new_win%27,%27width=0,height=0%27);return%20false;%22&SID=1\">online chat service</a> between 8am and 8pm, Monday to Friday",
    items: [{
      href: "mailto:[email protected]",
      text: "Give feedback or report a problem"
    }, {
      href: "/admin/flags",
      text: "Feature flags"
    }, {
      href: "/admin/clear-data",
      text: "Clear data"
    }]
  }
}) }}

In terms of CSS, I modified the following:

.govuk-footer--app {
  .govuk-footer__meta-custom {
    max-width: 40rem;
    margin-bottom: govuk-spacing(6);

    a {
      color: inherit;
    }
  }

  .govuk-footer__inline-list {
    margin-bottom: 0;
  }

  .govuk-footer__inline-list-item {
    margin-bottom: 0;
  }
}

This ensures links within the meta content inherit the colour of the footer text, and removes bottom margins from both .govuk-footer__inline-list and .govuk-footer__inline-list-item so that they align with ‘© Crown Copyright’. These margins exist due to the presence of the OGL licence text; were that to be made optional, the space should be added to the top of that content, rather than to the bottom of the meta items.

I hope this feedback is useful!

[edwardhorsford]

In the footer, some links look to no longer have underlines - did this change recently?

Is the rule that it should have an underline if it’s in a sentence, and not if it’s on it’s own?

My service uses links on their own as well as in sentences - it feels odd to have two different link styles for these:

[NickColley]

Hey @edwardhorsford,

I've recorded the reasoning why this decision was made here:

https://github.com/alphagov/govuk-frontend/pull/1321#issuecomment-549364442

[DouglasCaven]

Hi, I am working on the Immigration Health Surcharge project and we have an accessibility statement that we want to add a potential date for the resolution of this issue. Can someone please advise (that if we have a date) when this fix is scheduled to go 'live'? Thank you.

[vanitabarrett]

Hi @DouglasCaven 👋 Apologies, I'm not sure exactly which issue you're referring to as there are a couple of things in our backlog relating to the footer component. If you let me know specifically what issue/fix you want to get an update on, I can look into that for you.

[DouglasCaven]

Hi Vanita,

Thank you for the quick response.

The specific issue relates to the footer contrast and the issue description is to ensure the contrast between foreground and background meets WCAG 2 AA contrast ration thresholds.

I have added the screenshot of the potential fix to clarify. [Graphical user interface, application, email Description automatically generated]

Please let me know if this is enough information for you or if you require anything else?

Thank you.

Doug.

Douglas Caven User Experience Designer NHS Business Services Authority

(updated)

[vanitabarrett]

@DouglasCaven I can't see your screenshot, but I think you might be referring to the Crown Copyright logo? We do have an issue for that here: https://github.com/alphagov/govuk-frontend/issues/2134 .

Unfortunately I'm not sure when we will be picking up this work yet. We are planning quite a few improvements to the header and footer components for our next breaking release, which we're hoping to work on in the next few months, but I can't say for sure when it'll be released.

[DouglasCaven]

Hi Vanita,

Yes, 2134 covers it.

Is there any way I can be notified of a potential release date?

Thanks for the update.

Doug.

Douglas Caven User Experience Designer NHS Business Services Authority

(updated)

[vanitabarrett]

@DouglasCaven I think the best way is to keep an eye on that Github issue - there should be a button in the sidebar on that issue which lets you sign up for notifications. When we do a release of GOV.UK Frontend we also always document the changes in the changelog and release notes, so it will be included there when we do ship a fix.

[DouglasCaven]

There is a dropdown next to ‘Watch’ for Notifications where I can select ‘All Activity’, which should do it for this specific issue.

For the GOV.UK Frontend changelog and release notes, how can I be notified? Is there something I need to sign up to for this?

Apologies, my GitHub knowledge is limited!

Thanks again.

Douglas Caven User Experience Designer NHS Business Services Authority

(updated)

[vanitabarrett]

@DouglasCaven That notification should be enough. We publish our release notes in the 'releases' tab in Github https://github.com/alphagov/govuk-frontend/releases

As an update, I've spoken to some of the other developers in our team and we've agreed that the colour contrast issue with the Crown Copyright logo shouldn't be a WCAG fail and we don't think it would need to be included in an accessibility statement. The Crown Copyright logo meets the WCAG definition of a "meaningful graphic" and falls under WCAG 1.4.11: Non-text Contrast where a contrast of 3:1 is required. The Crown Copyright logo has a contrast of 4.08:1 which comfortably meets this requirement. That's not to say we won't be looking at improving the contrast in the future to match text/links on the page, but at this moment in time we don't think it's a WCAG fail.

[DouglasCaven]

Hi Vanita,

Thank you for your help and for the ‘release’ link.

Doug.

Douglas Caven User Experience Designer NHS Business Services Authority

(updated)

[Marat-Faizov]

Hello, noticed that in Footer with secondary navigation and links to meta information section footer link with welsh text doesn't use lang='cy', it might cause difficulties for assistive technology users, and 'read out' text incorrectly for them <a class="govuk-footer__link" href="#"> Rhestr o Wasanaethau Cymraeg </a>

[AllenConquest-6p6]

I have seen many documents online stating that HTML markup should be used in preference to ARIA roles (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/contentinfo_role). It seems the govuk design system breaks this in many cases, for example using the

tag along with a role="contentinfo". These additional ARIA roles should be dropped in preference to the HTML, unless you are nesting within certain over tags.

I'd be interested in people's thoughts on this.

[querkmachine]

tag along with a role="contentinfo". These additional ARIA roles should be dropped in preference to the HTML, unless you are nesting within certain over tags.

Hi @AllenConquest-6p6, we include the role attributes on elements such as the header and footer because version 4 of GOV.UK Frontend still supports Internet Explorer 8, which doesn't support these newer elements—and thus doesn't understand their semantics or accessible roles.

We're currently in the process of removing support for IE8, and will likely remove the redundant role attributes as part of that work.

[StephenGill]

The GOV.UK terms and conditions are drafted so that they potentially apply to services as well as to page published through the GOV.UK publishing platform.

This is a good thing - it means that services can potentially benefit from some basic legal protection without having to publish duplicative terms and conditions pages of their own.

But terms and conditions are more likely to be legally effective if there's a a direct link to them.

Suggest that by default, each variant of the footer include a link to the GOV.UK terms and conditions.

Some services will also need their own, service-specfic set of terms and conditions - so we'd need to set the GOV.UK terms apart through positioning within the footer and/or link text.

For link text, suggest -

[GOV.UK terms and conditions](https://www.gov.uk/help/terms-conditions)

[StephenGill]

Suggest that by default, each variant of the footer include a link to the GOV.UK terms and conditions.

Some services will also need their own, service-specfic set of terms and conditions - so we'd need to set the GOV.UK terms apart through positioning within the footer and/or link text.

Some more context on this: https://medium.com/@stephen.gill/does-your-government-digital-service-need-terms-and-conditions-a43fad5869cf

[irfan-mehmood]

When using the VoiceOver screenreader on the footer support links. Blank Space is read out. This is on govuk-frontend: "4.7.0". This is caused by Nunjucks formatting templates with extra whitespace.

However there is a solution according to the Nunjucks docs:

[36degrees]

@irfan-mehmood I can't reproduce this. Can you please raise a bug report in the GOV.UK Frontend repo, including all of the information requested in the template?

[laura-biscuits]

Most services have the same footer link - Accessibility statement, contact, cookies, terms and conditions and privacy.

I recently noticed that there is no consistency in the order that links are included in the footer across services. I also noticed that there is no consistency in how the links are named (for example Contact or Contact us, Privacy or Privacy statement).

Success criterion 3.2.6 of WCAG 2.2 is about consistency of presenting information about how to get help.

It would be good if the guidance for footer component defined the order of the links (for example alphabetical) and name of the common links - in order to provide a consistent appearance across services for users.

[paulrobertlloyd]

Option to not show Royal Coat of Arms

See: https://github.com/alphagov/govuk-frontend/issues/4019#issuecomment-1708743587

In summary, reasons why it may be useful to allow service teams to not show the Royal Coat of Arms:

1. Unclear user need: decisions made about this device a decade ago may no longer be relevant
2. Impact on performance: this is the only part of govuk-frontend which requires calling a bitmap image (2, in fact)
3. Reduced customisation: this and the OGL license link are the only 2 aspects of this component which are fixed and cannot be removed or customised
4. Not always relevant: some organisations using this component may not need/want to show this device (see evidence below)
5. Maintenance overhead: bitmap assets need to managed, and changes need to be made every time the monarch changes (rare, but recently relevant!)

Options

1. Allow service teams to not include the Royal Coat of Arms
2. Don’t show the Royal Coat of Arms if value given for copyright.text and/or copyright.html
3. Remove Royal Coat of Arms from the footer component entirely

Evidence and examples

Organisations not using the Royal Coat of Arms in their footers:

• The Civil Aviation Authority: The Register a Drone service uses govuk-frontend with the footer adapted to not show the Royal Coat of Arms
• Ofqal: The Register of Regulated Qualifications service replaces the arms with their own logo and that of another organisation, CEA.
• NHS: The NHS Design System, forked from the GOV.UK Design System, forgoes the arms in their footer.
• Home Office: The Home Office Design System doesn’t show the arms in their footer. Different code base, sure, but it shares a similar design which hopefully proves the broader need.

Frameworks consuming govuk-frontend that allow removal of the Royal Coat of Arms:

• The footer component in the GOV.UK Components for Ruby on Rails gem allows you to replace the contents of the footer entirely; partly this was done as a way to remove the Royal Coat of Arms
• Options for GOV.UK Eleventy Plugin allow you to provide a different value for copyright.text or copyright.html; doing so removes the Royal Coat of Arms (see: https://github.com/x-govuk/govuk-eleventy-plugin/blob/bb3d558ef2c69b55a44c169cbd0ad5469b9da22e/components/footer/template.njk#L64)

Please add examples to this thread if you have them!

[daniovini]

Although understandable, I wonder if it would not be appropriate to test recognisability through one or more validation sessions, given the impact that this change would have on thousands of products and services. My only concern about that