Footer #96
Comments
timpaul
added
the
component
|
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? |
Dropbox Paper auditOn 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:
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 outcomesUpdates to the Design SystemThe 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.
|
|
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 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 What I'm aiming for: |
|
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? |
|
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
} |
|
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 |
|
Another reason to have the English text on this component configurable is so it can be translated into Welsh |
|
Some sites have "Built by ..." in the footer, see: Others don't, see: Is there a declutter opportunity here? |
|
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:
(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 I hope this feedback is useful! |
|
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: |
|
Hey @edwardhorsford, I've recorded the reasoning why this decision was made here: |
|
Hi, |
|
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. |
|
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)
|
|
@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. |
|
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)
|
|
@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. |
|
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)
|
|
@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. |
christopherthomasdesign
moved this to Published
in GOV.UK Design System: Discuss styles, components and patterns
|
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. |
Hi @AllenConquest-6p6, we include the We're currently in the process of removing support for IE8, and will likely remove the redundant |
|
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 -
|
Some more context on this: https://medium.com/@stephen.gill/does-your-government-digital-service-need-terms-and-conditions-a43fad5869cf |
|
When using the VoiceOver screenreader on the footer support links. Blank Space is read out. This is on However there is a solution according to the Nunjucks docs: |
|
@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? |
|
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. |
Option to not show Royal Coat of ArmsSee: alphagov/govuk-frontend#4019 (comment) In summary, reasons why it may be useful to allow service teams to not show the Royal Coat of Arms:
Options
Evidence and examplesOrganisations not using the Royal Coat of Arms in their footers:
Frameworks consuming
Please add examples to this thread if you have them! |
|
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 |
|
@paulrobertlloyd Last year I did spike making the Royal Coat of Arms and OGL logos optional using Nunjucks flags at the same time as adding support for translations. At that time we opted not to include those changes in the final PR as those changes were not directly relevant to localisation. Of those suggestion, option 1 would remain my favoured approach. Option 2 presents a possibility of an unexpected or breaking change when localising the Crown Copyright notice—just because you've translated it to "© Hawlfraint y Goron" doesn't automatically mean you wanted the Arms to suddenly vanish. Being explicit is preferable to making that assumption, IMO. I have similar thoughts about Option 3. Lots of government services do display the Arms, and it may be undesirable or unexpected if they were to suddenly disappear in an update. I'm not even sure if removing them is a decision the Design System can or should unilaterally make, especially as it feels like there's an increased amount of scrutiny on what and how the symbols of the monarch are being used as of late. |
|
Our team has built in this functionality, but I do not agree that it should be in the GDS Design System. I do not find the reasons listed compelling.
As this is a government branding issue, I do not think it should be up to individual teams to decide whether they want it or not unless they are totally deviating from the government branding. All of the examples listed do just that. I cannot see how anyone is disadvantaged by the presence of the government arms. It is commonplace to put a company logo and copyright statement in the footer, so it is hardly deviating from standard practice elsewhere online. We are making government services, so it is probably expected that we have government branding. The version of the Royal Arms used is essentially the government logo. As mentioned by others, I would fear that a unilateral decision to remove the arms, especially after the recent accession, might be seen as a political decision by civil servants. |
|
Hey. I just wanted to comment with some variations of the footer there are 2 things that felt off when testing with a screen reader.
|
|
@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! |
|
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. |
|
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. 
|
|
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'.
ReasoningThe 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. |
|
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.) |
|
@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 |
|
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:
I have played with this a bit more (different permutations, things that from my experience could be hard about this) over on |
|
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' |
|
Revisions to #96 (comment) 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:
Other thoughts:
Updated full version: https://vickytnz.github.io/govuk-header-footer/ |
![Assurance history for [service name] This service must meet the Service Standard. This is because it: changes a customer record, is built, not bought, entered discovery after 1 June 2019 - services before this date were assured to a previous version of the Service Standard More about the Service Standard on GOV.UK. Previous assurance events for this service This page is accurate as of 3 August 2024. Assurance event Date Result Report Live assessment 1 July 2024 Not met Not yet published; Beta reassessment 1 March 2023 Met Department service standard reports; Beta assessment 14 December 2022 Met GOV.UK service standard reports; Alpha reassessment 29 July 2021 Met GOV.UK service standard reports; Alpha assessment 1 March 2021 Not met GOV.UK service standard reports. All service assessments after 1 April 2021 were run by the Central Data and Digital Office and any before that date by the Government Digital Service.](https://private-user-images.githubusercontent.com/1223264/354816578-24c3d722-6073-4b07-af1d-f30a80697523.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg5MTQ4ODgsIm5iZiI6MTczODkxNDU4OCwicGF0aCI6Ii8xMjIzMjY0LzM1NDgxNjU3OC0yNGMzZDcyMi02MDczLTRiMDctYWYxZC1mMzBhODA2OTc1MjMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIwNyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMDdUMDc0OTQ4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MzAxMjc4NjNjYTgxMjRmY2ZkMzA1ZTQxZWEyZWZjZWY1NjFjMWUzZjQxNjAyYmFjMDFhNDE2ZTgxZTAwMmFiZCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.3-lOzYsiF7yh0CPpB7sjXv3vqA9TkWFT10ePR3zZvp4)
and others
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
Related patterns
The text was updated successfully, but these errors were encountered: