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

• Header #5958 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:becomingateacher@digital.education.gov.uk",
      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:

alphagov/govuk-frontend#1321 (comment)

[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: alphagov/govuk-frontend#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.

[querkmachine]

@Kate-Nicolson Thanks for the feedback.

Regarding the footer being read as "content information": this may be how your screen reader chooses to interpret the footer element. We aren't consciously doing anything to encourage a screen reader to call the region by that name.

Are you able to provide information on what web browser, screen reader software and operating system you're using? This can help us reproduce what you're describing. Thanks!

[daniel-ac-martin]

With regards to the reference to the Home Office Design System as an example. I think it's worth bearing in mind that the design is intended for internal systems rather than anything that would be consumed by members of the public. (Public facing systems would use the GOV.UK Design System with the coat of arms, as usual.)

I also provide a simplified version of the footer in NotGovUK (a React implementation of GOV.UK Design Sytstem), but again this is intended for situations where the coat of arms wouldn't be appropriate.

[danielelder]

Hi, when the screen is under 640px wide the space between the link is reduced below what is acceptable for WCAG2.2 criteria Target Size (minimum) 2.5.8.

It appears to be that the text is 17px high with a 5px margin at the bottom. 17px + 5px = 22px, which 2px short of the minimum requirement.

It would be good to get a review and confirmation if this is an issue or not as we are starting to audit against WCAG 2.2 and will have to report if it is.

Thanks.

[shabana-ali]

Hi, when the screen is under 640px wide the space between the link is reduced below what is acceptable for WCAG2.2 criteria Target Size (minimum) 2.5.8.

It appears to be that the text is 17px high with a 5px margin at the bottom. 17px + 5px = 22px, which 2px short of the minimum requirement.

It would be good to get a review and confirmation if this is an issue or not as we are starting to audit against WCAG 2.2 and will have to report if it is.

Thanks.

Example of footer in Chrome with browser screen at 1280px and 400% zoom. Using target size booklet.

[edwardhorsford]

I'd like to suggest updating the default footer example to either remove the line about 'all content is available under the Open Government Licence' or modify it to 'Source code for this service is available under the Open Government Licence'.

Reasoning

The current default footer text is primarily applicable to content-based sites like www.gov.uk, where such a licence is relevant. However, the design system is often used by transactional services where user data or casework data should not be implied to be available under such a licence.

Although teams can customise the text, not all do. The default example should avoid implying a licence that might not be appropriate for many services, ensuring it is broadly applicable and reducing potential confusion or misuse.

[daniel-ac-martin]

Disclaimer: I'm not a maintainer and don't work for GDS.

@edwardhorsford: The default example seems reasonable to me, as the GOV.UK Design System is primarily for services on GOV.UK. (Whose content should be available under OGL, as I understand it.) For those of us that are re-using bits of the GOV.UK Design System for applications that are internal to departments, it seems that it is incumbent on us remove that notice.

That said, perhaps GDS could be nice and provide support for easily removing the notice. (I think it should be there by default though.)

With regards to source code, I don't think the GOV.UK Design System can predict whether the source code is always available or the license that it is available under. (OGL isn't really a software license, so we would typically use something else.)

[edwardhorsford]

@daniel-ac-martin I don't think that's the case. Most services being on GOV.UK doesn't mean all their content is under OGL - certainly when using a transactional service you would not expect user-provided data to be released under OGL.

I think the line is mostly only relevant for www.gov.uk or perhaps purely content services - which is the minority of usage of the design system. For most transactional services I don't think you'd want to say 'all content is available' - at best it's ambiguous.

As you say, the design system team can't predict the usage of the components. Therefore I would have the default output of {{ govukFooter() }} be less opinionated and not default to text that is likely not correct for (what I believe to be) the majority of services. It could instead be a param you pass with your licence text.

[vickytnz]

So this is a bit of a wildcard, but after seeing the phase banner start to get in the way of govuk one login stuff, and more general discussion about lack of transparency about service standard processes and even coding in the open, I have been playing with something that could be an interesting GDS/CDDO combined thing with the footer:

A few key things:

• phase banner in footer, not header
• feedback moved into its own link
• open source code link added
• the phase area tweaked to talk about the standard it was built to (Service Standard, Digital Service Standard, Digital by Default Service Standard, even Technology Code of Practice if bought though that probably isn'a a thing) and even link to a new in service page that collates all the service assessment reports for that service

I have played with this a bit more (different permutations, things that from my experience could be hard about this) over on
https://vickytnz.github.io/govuk-header-footer/

[joelanman]

Nice! I like the link to code and any relevant reports - I think adding the dept or org responsible could help for transparency and accountability too. Relevant legislation might be cool.

Feedback is really important and I'd worry it might get missed in the footer, also I think you'd want it more active like 'Give feedback'

[vickytnz]

Revisions to https://github.com/alphagov/govuk-design-system-backlog/issues/96#issuecomment-2263743542

Footer:

History page (forgive the slightly funky service header, I've been playing around with Eleventy for fun and this is the default):

Thanks to:

• @joelanman for suggestion to make 'Feedback' more of an action - it is now 'Give feedback'
• Rosanna Fairthorne (via xgov-slack) for pressing down on the need for the history to flex for non-standard assurance. This will need workshopping as Rosanna suggested but as a first point I have renamed 'service assessments' to 'service assurance' - other comments about the framing of the Service Standard have also been included in the history page.
• @edwardhorsford to more explicitly separate user-facing and government-facing links - 'Give feedback' has remained on the first line as a user-facing action, whereas 'Source code' (was 'Open-sourced code') has moved down to the second line with the phase and 'Service assurance history'. I did try using the proper navigation components but it looked strange and I think would need hacking of the component.

Other thoughts:

• there's definitely scope for other things to add, however I think as a starting point they could start by being scoped into the service assurance history page more than anything (or even if that page just becomes a more general service assurance statement) and then see if they need to come out? I also think that it could also be something that could require a bit of space to explain in complex cases - for Student Finance England being a public partnership by the Department for Education run by Student Loans Company, or Tax-Free Childcare being from memory a collaboration across 3 departments.

Updated full version: https://vickytnz.github.io/govuk-header-footer/

[Laura-DfE]

Hello
I've noticed on the GOV.UK design system web page for the GOV.UK footer component it says "Use... ‘Accessibility’ for the link text."

Whereas on the actual GOV.UK footer itself at the moment, the link text says 'Accessibility statement'.

'Accessibility statement' makes more sense as its more specific. And it's whats in our DfE standard.

I was wondering if the guidance needs updating?

[andrewhick]

Could I please chase a response to the Target Size issue mentioned by @danielelder and @shabana-ali in November 2023?

This recently failed in a monitoring team audit and the service team is asking for a resolution date. Does it need to be logged as a separate issue?

[36degrees]

@andrewhick Since GOV.UK Frontend v6.0.0 the font size used in footer has increased to 19px with a 25px line height.

Anyone using GOV.UK Frontend v5.2.0 or newer can also opt in to this change by setting $govuk-new-typography-scale: true – see the release notes for full details on what this does.

Browser developer tools show differing heights for the links:

• 23px in Safari
• 23.5px in Chrome
• 24px in Firefox

But each list item is 25px with a 5px margin, so we should be covered by the 'Spacing' exception in 2.5.8.

Trying to recreate the example given above, there are no overlapping controls:

[beedell-roke]

@36degrees, why 19px, rather than merely 1em? (I hope that it's at least not !important).

[owenatgov]

@RokeJulianLockhart Couple of things here:

• We do in fact translate our font sizes into rem values but it's easier to use the px values we translate from when discussing fonts. In this case, 19px is actually 1.1875rem in production but it's easier to visualise if we say 19px
• The default value across browsers for 1em is the same as 1rem which is equivalent 16px. We bump our standard body text to 19px (rem equivalent as I mentioned above) because it's easier to read.

There's some more details on our type scale page if you're interested.