search

alphagov / govuk-design-system-backlog

GOV.UK Design System Community Backlog
31 stars 2 forks source link

Footer #96

Open govuk-design-system opened 6 years ago

govuk-design-system commented 6 years ago

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

chrisroos commented 5 years ago

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 commented 5 years ago

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:

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.

edwardhorsford commented 5 years ago

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: Screenshot 2019-03-26 at 15 34 29

edwardhorsford commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

terrysimpson99 commented 5 years ago

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 commented 4 years ago

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:

Updated footer

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: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 commented 4 years ago

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?

Screenshot 2019-11-12 at 14 21 00

My service uses links on their own as well as in sentences - it feels odd to have two different link styles for these: Screenshot 2019-11-12 at 14 25 18

NickColley commented 4 years ago

Hey @edwardhorsford,

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

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

DouglasCaven commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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 image <a class="govuk-footer__link" href="#"> Rhestr o Wasanaethau Cymraeg </a>

AllenConquest-6p6 commented 1 year ago

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

querkmachine commented 1 year ago

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 commented 1 year ago

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 commented 12 months ago

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 commented 11 months ago

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.

Screenshot 2023-08-07 at 16 29 09

However there is a solution according to the Nunjucks docs:

3ec7b2f0-2e6c-46dd-a0a2-536cdffff7a5

36degrees commented 11 months ago

@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 commented 11 months ago

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 commented 9 months ago

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:

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

Please add examples to this thread if you have them!

daniovini commented 9 months ago

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

querkmachine commented 9 months ago

@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.

MalcolmVonMoJ commented 9 months ago

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. 

  1. I think it must be assumed that any user need identified a decade ago must still be relevant unless there is evidence to the contrary. 
  2. There is actually a PNG fallback for the crown logo too, but we have assets of all kinds, if a PNG is considered a problem then look to changing it to an SVG like we have done in the header logo.
  3. The logo is part of the government branding, so customising it to be non-government branding is not really the responsibility of the govuk design system.
  4. All of the examples listed have chosen to significantly change the look and feel of their sites.  The team I work on manage a number of websites for arm length bodies, these likewise want to distance themselves from government so do not use the arms.  But if one wishes to visually distance themselves, one will need to do more than simply lose the arms.  The whole colour pallette will need to be changed - as has been done with the NHS and all other sites in the examples provided.  If you are making such wide-sweeping changes, you will have ample opportunity to amend the logo and copyright statement to your needs.  And indeed this is what has been done in the examples provided and on the sites I work on. 
  5. I can't see how an SVG image needs less management than a PNG image.  They are pretty static, and universally supported across all browsers.  I see no issue with using a PNG in this instance. 

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. 

Kate-Nicolson commented 9 months ago

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.

  1. Sometimes they are labelled as "Content Information"; and you hear it when you are navigating around the different regions. I just thought it would be easier to have the user know what is header, what is the main content, and what is the footer. Then have any subsections labelled up with customised sub-region labels. I just thought to mention it as I was confused and "Content Information" made me think it wasnt to be details on the page's content.
  2. Headings in the footer - when using a screen reader I can use H or a shortcut to navigate the Headings - when doing this I expect the headings to be ways of navigating the main content; so when there are h2 or h3 in the footer it is confusing as they are not subsections of the page title which is the h1 - they are just sections of a footer. Sorry if I am not making this very clear to understand. I think it might be good to avoid headings in the footer and banners - keep them to the main content. Note: I am just a tester - I am not a user with a screen reader; so might want to talk to some end users
querkmachine commented 9 months ago

@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 commented 9 months ago

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 commented 8 months ago

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 commented 8 months ago

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.

zoomed in footer with target size circles overlapping 2 of the links
edwardhorsford commented 1 month ago

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'.

Screenshot 2024-06-11 at 14 35 10

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 commented 1 month ago

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 commented 1 month ago

@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.