diff --git a/deploy/public/accessibility/index.html b/deploy/public/accessibility/index.html index 5c2e736038..23515787eb 100644 --- a/deploy/public/accessibility/index.html +++ b/deploy/public/accessibility/index.html @@ -942,7 +942,7 @@
The GOV.UK Design System website and the codebase it uses, GOV.UK Frontend, is maintained by a team at the Government Digital Service (GDS).
This page explains how the team works to ensure the Design System and Frontend are accessible.
Read about how to test components using accessibility acceptance criteria.
-This accessibility statement applies to the GOV.UK Design System at https://design-system.service.gov.uk/, and the components and patterns from the GOV.UK Frontend codebase which appear in the examples throughout the Design System.
The GOV.UK Design System team wants as many people as possible to be able to use this website. For example, that means you should be able to:
They also tested the global search functionality that appears in the header of every page in the Design System.
The GOV.UK Frontend documentation website was last tested for accessibility issues in March 2021.
-The GOV.UK Design System team works hard to ensure that this Design System and Frontend, the codebase it uses, are accessible.
Where possible, the team aims to research components and patterns with a representative range of users, including those with disabilities.
We also test components to ensure they work with a broad range of browsers, devices and assistive technologies - including screen magnifiers, screen readers and speech recognition tools.
diff --git a/deploy/public/community/resources-and-tools/index.html b/deploy/public/community/resources-and-tools/index.html index 008ea8a371..66525ec8e8 100644 --- a/deploy/public/community/resources-and-tools/index.html +++ b/deploy/public/community/resources-and-tools/index.html @@ -1053,10 +1053,10 @@Sketch Wireframing Kit - Sketch wireframes based on the GOV.UK Design System.
Guidance on bringing the GOV.UK Design System into a .NET MVC Project - A walkthrough for how to import the GOV.UK Design System into a MVC project and compile the sass at runtime using gulp.
-Guidance on building a hapi service using GOV.UK Frontend.
GOV.UK Frontend Jinja - diff --git a/deploy/public/components/accordion/index.html b/deploy/public/components/accordion/index.html index 333005af75..aacac3a6c6 100644 --- a/deploy/public/components/accordion/index.html +++ b/deploy/public/components/accordion/index.html @@ -2145,7 +2145,7 @@
We updated this component in December 2021 to solve an accessibility issue where the buttons and section labels might be mistaken for links.
Read about the research and development that went into improving the accordion component.
The team made sure the component is accessible, for example that users can interact with it using just the keyboard.
-We need to find out more about users that navigate using ‘elements lists’ of headings, buttons, links and other elements — such as users of speech recognition software and partially-sighted users of screen readers.
For these users, it might not be clear enough that the section headings are considered buttons. This could mislead them to navigate (less efficiently) using the show or hide labels.
While this experience is inconvenient at first, it’s likely the user will better understand the button area once they interact with it and see its focus state. See ‘Testing with Dragon’ in the accessibility clinic summary.
diff --git a/deploy/public/components/character-count/index.html b/deploy/public/components/character-count/index.html index bc2dac7293..b2626f7069 100644 --- a/deploy/public/components/character-count/index.html +++ b/deploy/public/components/character-count/index.html @@ -1882,7 +1882,7 @@If you’re asking more than one question on the page, do not set the contents of the <label>
as the page heading. Read more about asking multiple questions on question pages.
Order checkbox options alphabetically by default.
In some cases, it can be helpful to order them from most-to-least common options. For example, you could order options for ‘What is your nationality?’ based on population size.
Group checkboxes together in a <fieldset>
with a <legend>
that describes them, as shown in the examples on this page. This is usually a question, like ‘How would you like to be contacted?’.
If you’re asking just one question per page as recommended, you can set the contents of the <legend>
as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.
Read more about why and how to set legends as headings.
There are 2 ways to use the checkboxes component. You can use HTML or, if you’re using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.
@@ -2078,7 +2078,7 @@If you’re asking more than one question on the page, do not set the contents of the <legend>
as the page heading. Read more about asking multiple questions on question pages.
When ‘none’ would be a valid answer, give users the option to check a box to say none of the other options apply to them — without this option, users would have to leave all of the boxes unchecked. Giving users this option also makes sure they do not skip the question by accident.
Remember to start by asking one question per page. You might be able to remove the need for a ‘none’ option by asking the user a better question or filtering them out with a ‘filter question’ beforehand. The GOV.UK Service Manual has guidance on designing good questions.
Show the ‘none’ option last. Separate it from the other options using a divider. The text is usually the word ‘or’.
diff --git a/deploy/public/components/cookie-banner/index.html b/deploy/public/components/cookie-banner/index.html index f77741a94a..d6b70e5b49 100644 --- a/deploy/public/components/cookie-banner/index.html +++ b/deploy/public/components/cookie-banner/index.html @@ -1139,11 +1139,11 @@Position the cookie banner after the opening <body>
tag and before the ’skip to main content‘ link. If you’re using the Nunjucks page template, use the bodyStart
block.
You can choose not to have a cookie banner if the service only sets essential or ‘strictly necessary’ cookies, as these do not need user consent.
However, you must tell users that you set essential cookies. You can do this with a cookies page — link to this page in the footer.
Keep the text as short as possible while making sure it’s an accurate description of how you use cookies. For example, if you use more than one ‘functional’ cookie and there’s not enough space to mention what each of them does, you could ask for permission to set cookies so ‘you can use as many of the service’s features as possible’.
See the cookies page for more advice on writing about cookies.
-You can use this example text for a service which sets essential and analytics cookies. Analytics cookies are those set by your organisation to collect information about how people are using your digital service.
You can use this example text for a service that set:
Never automatically tab users between the fields of the date input because this can be confusing and may clash with normal keyboard controls.
-If you’re asking more than one question on the page, do not set the contents of the <legend>
as the page heading. Read more about asking multiple questions on question pages.
If your service is on GOV.UK and it’s affected by an emergency, ask your department’s content team to request a change to the service start page. If your service is getting more demand than usual, check that you’ve set up There is a problem with the service pages and Service unavailable pages, and the wording is up to date.
-Use a ‘neutral’ notification banner if the user needs to know about something that’s happening elsewhere in the service. For example:
In some cases, it can be helpful to order them from most-to-least common options. For example, you could order options for ‘Where do you live?’ based on population size.
However you should do this with extreme caution as it can reinforce bias in your service. If in doubt, order alphabetically.
Group radios together in a <fieldset>
with a <legend>
that describes them, as shown in the examples on this page. This is usually a question, like ‘Where do you live?’.
If you are asking just one question per page as recommended, you can set the contents of the <legend>
as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.
Read more about why and how to set legends as headings.
There are 2 ways to use the radios component. You can use HTML or, if you are using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.
@@ -2041,7 +2041,7 @@If you’re asking more than one question on the page, do not set the contents of the <legend>
as the page heading. Read more about asking multiple questions on question pages.
Make sure errors follow the guidance in error message and have specific error messages for specific error states.
-Say ‘Select yes if [whatever it is is true]’. For example, ‘Select yes if Sarah normally lives with you’.
-Say ‘Select if [whatever it is]’. For example, ‘Select if you are employed or self-employed’.
Say ‘Select [whatever it is]’. For example, ‘Select the day of the week you pay your rent’.
-Include an error message that is clearly related to the initial question.
If you’re asking just one question per page as recommended, you can set the contents of the <label>
as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.
Read more about why and how to set legends as headings.
There are 2 ways to use the text input component. You can use HTML or, if you’re using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.
@@ -2005,7 +2005,7 @@If you’re asking more than one question on the page, do not set the contents of the <label>
as the page heading. Read more about asking multiple questions on question pages.
You will not normally need to use the autocomplete
attribute in prototypes, as users will not generally be using their own devices.
Users often need to copy and paste information into a text input, so do not stop them from doing this.
-Sometimes, browsers will spellcheck the information a user puts into a text input. If a user enters something which is recognised as a spelling error, sighted users will see a red line under the word.
If you are asking users for information which is not appropriate to spellcheck, like a reference number, name, email address or National Insurance number, disable the spellcheck.
To do this set the spellcheck
attribute to false
as shown in this example.
Users will often need to copy and paste information into a textarea, so do not stop them from doing this.
-If you’re asking more than one question on the page, do not set the contents of the <label>
as the page heading. Read more about asking multiple questions on question pages.
The GOV.UK Design System team at the Government Digital Service (GDS) maintains this design system.
If you want to contact the team you can diff --git a/deploy/public/get-started/extending-and-modifying-components/index.html b/deploy/public/get-started/extending-and-modifying-components/index.html index 13aadbc430..f034c1c4db 100644 --- a/deploy/public/get-started/extending-and-modifying-components/index.html +++ b/deploy/public/get-started/extending-and-modifying-components/index.html @@ -1044,21 +1044,12 @@
If you make a modification involving CSS you might decide to write a selector that targets a GOV.UK Design System class and change its CSS properties.
This will work in the short term but may break if you install an update relying on the component’s previous behaviour.
For example, if you want to override the button component you could do the following.
-<div class="app-interruption-card">
- <button class="govuk-button">
- Inverse button
- </button>
-</div>
-
-.app-interruption-card .govuk-button {
- background-color: white;
- color: blue;
-}
-
+html <div class="app-interruption-card"> <button class="govuk-button"> Inverse button </button> </div>
css .app-interruption-card .govuk-button { background-color: white; color: blue; }
This would work in the short term, but if the GOV.UK Design System team changes how the button component works it could break when you update your service. For examples like this, consider using small modifications to components.
The GOV.UK Design System team uses prefixes, sometimes called namespacing, to make sure the code in the GOV.UK Design System does not unintentionally break your application code.
@@ -1075,29 +1066,14 @@If you need to specify some custom override classes which do not belong to a particular component, you can define these using your prefix and the -!-
convention from the GOV.UK Design System.
For example, to define a custom width for a specific reference number in your services you might do this.
-.app-\!-reference-number-width {
- width: 10ch !important;
-}
-
-<span class="app-!-reference-number-width">
- 7446868939
-</span>
-
+css .app-\!-reference-number-width { width: 10ch !important; }
html <span class="app-!-reference-number-width"> 7446868939 </span>
The GOV.UK Design System uses a naming convention called Block Element Modifier (BEM) which makes it easier to ensure styling is isolated to individual components. You can use this convention to make modifications to components.
When making small modifications to components you can make use of the modifier convention from BEM, which uses a suffix of --
plus a name, alongside your own prefix.
For example, if you wanted to override the button component you could do the following.
-<div class="app-interruption-card">
- <button class="govuk-button app-button--inverse">
- Inverse button
- </button>
-</div>
-
-.app-button--inverse {
- background-color: govuk-colour("white");
- color: govuk-colour("blue");
-}
-
+html <div class="app-interruption-card"> <button class="govuk-button app-button--inverse"> Inverse button </button> </div>
css .app-button--inverse { background-color: govuk-colour("white"); color: govuk-colour("blue"); }
You should not use modifiers when:
If you use Sass, you should include the govuk-focused-text
mixin in your component’s :focus
selector if that component is focusable text. For example, the component is a link in body text, or the details component:
.app-component:focus {
- @include govuk-focused-text;
-}
-
.app-component:focus { @include govuk-focused-text; }
If you use Sass, you can use 3 GOV.UK Frontend variables if your component has a background colour or border. For example a text input or checkbox.
The 3 Sass variables are:
To start using GOV.UK styles, components and patterns contained here, you’ll need to include GOV.UK Frontend in your project.
There are 2 ways to include GOV.UK Frontend in your project. You can either install it using node package manager (npm) or include the compiled files in your application.
You can set up a basic page that is consistent with GOV.UK branding by using the GOV.UK page template.
The Design System provides CSS classes for styling content, instead of global styles.
diff --git a/deploy/public/patterns/addresses/index.html b/deploy/public/patterns/addresses/index.html index 6c984e7e09..90dca01639 100644 --- a/deploy/public/patterns/addresses/index.html +++ b/deploy/public/patterns/addresses/index.html @@ -1297,7 +1297,7 @@Make it optional for users to enter their county (such as Berkshire or Cumbria). It’s not part of a correct UK address, according to Royal Mail, and it’s not used to deliver post.
Remove the county field if you’re sure your users will not need it, and your service will not use it.
Use the autocomplete
attribute on each individual address field to help users enter their address more quickly. This lets you specify each input’s purpose so browsers can autofill the information on a user’s behalf if they’ve entered it previously.
Use the autocomplete
attribute on each individual address field to help users enter their address more quickly. This lets you specify each input’s purpose so browsers can autofill the information on a user’s behalf if they’ve entered it previously.
Check which input purpose to use for each field.
In production, you’ll need to do this to meet WCAG 2.1 Level AA. You will not normally need to use the autocomplete
attribute in prototypes, as users will not generally be using their own devices.
See the GOV.UK style for writing telephone numbers.
Tell users if they might have to pay to use any of your contact channels.
@@ -1305,7 +1305,7 @@Follow the GOV.UK style guide format for time ranges and date ranges.
Explain any exceptions, like bank holidays, or days of the week when your opening hours are different.
For example, ‘Monday to Friday, 9am to midday and 2pm to 4:30pm (closed on bank holidays)’ or ‘24-hour service’.
-Tell users when you’ll respond to them. This helps users choose which contact channel to use.
For example, tell users how long it’ll usually take to:
If a user fails to create an account they might not be able to use your service at all.
Make sure the account creation screen is solely about that task. Do not add any distracting content or links.
-If you currently use National Insurance numbers to verify identity, find out how to protect your service against fraud.
Start with the harmonised standards, keeping the categories of responses in the same order. Break them down into subcategories if necessary. For example if your service is aimed at a disabled people in particular, you may want to collect more detailed information about their disability. But make sure any categories you use map back to a ‘parent’ category in the harmonised standard.
See the full list of Government Statistical Service harmonised standards if you want to collect other types of equality information. For example, about income or employment status.
-Use this approach to ask for the user’s date of birth.
For one-off services, we’ve suggested placing the equality and diversity questions between the ‘check your answers’ and confirmation pages.
This is based on where the ‘Do you want to create an account?’ question is placed in the ‘Get support if you’re clinically extremely vulnerable to coronavirus’ service - but we’d like to confirm whether this placement works for the equality questions too.
We’d also appreciate any the following questions:
diff --git a/deploy/public/patterns/names/index.html b/deploy/public/patterns/names/index.html index 61159d91b4..4b5e3e2fa6 100644 --- a/deploy/public/patterns/names/index.html +++ b/deploy/public/patterns/names/index.html @@ -1270,7 +1270,7 @@If you are working in production you’ll need to do this to meet WCAG 2.1 Level AA.
You will not normally need to use the autocomplete
attribute in prototypes, as users will not generally be using their own devices.
Sometimes, browsers will spellcheck the information a user enters into a text input. To make sure user’s names will not be spellchecked, set the spellcheck
attribute to false
as shown in this example.
Avoid asking users for their title.
It’s extra work for them and you’re asking them to potentially reveal their gender and marital status, which they may not want to do.
It’s also hard to predict the range of titles your users will have. If you have to ask for someone’s title, use an optional text input not a select.
diff --git a/deploy/public/patterns/question-pages/index.html b/deploy/public/patterns/question-pages/index.html index cda7553a90..d4c18fea63 100644 --- a/deploy/public/patterns/question-pages/index.html +++ b/deploy/public/patterns/question-pages/index.html @@ -1573,11 +1573,11 @@Avoid using the start point to provide complex eligibility information. Instead, ask questions inside the service to find out whether the user is eligible.
Read guidance on designing how GOV.UK content and transactions work together.
-The options available depend on whether the start point will be published as ‘mainstream’ or ‘Whitehall’ content.
Mainstream content is content aimed at the general public — or at meeting business needs that are not sector-specific.
The content team at GDS is responsible for creating mainstream start points on GOV.UK, as with other mainstream content. They’ll work with you to make sure the journey from GOV.UK into the service works as well as possible. It’s a good idea to talk to your organisation’s content team during alpha — if necessary, they can put you in touch with the team at GDS.
@@ -1169,8 +1169,7 @@For non-mainstream services, publishers in departments with access to the ‘Whitehall’ app can create a simple start page using the ‘detailed guide’ format.
Use this Markdown to create a button within a detailed guide:
-{button start}[Button text goes here](https://servicename.service.gov.uk/first-page-within-service){/button}
-
+plaintext {button start}[Button text goes here](https://servicename.service.gov.uk/first-page-within-service){/button}
Steps and tasks should be listed in the order users need to complete them.
If there is not a set order, they should be listed in an order that helps the user.
For example, ‘Agree a contract and salary’ is listed as step 4 in ‘Employ someone: step by step’ although it can be completed earlier.
-Use ‘and’ to show when you can or must complete steps at the same time. You can use ‘and’ for more than 2 steps.
Use ‘or’ to show when there’s a choice between 2 steps, or when a task must be completed in a different way based the user’s circumstances or eligibility.
diff --git a/deploy/public/patterns/task-list-pages/index.html b/deploy/public/patterns/task-list-pages/index.html index a1de1f25aa..71b1293eb7 100644 --- a/deploy/public/patterns/task-list-pages/index.html +++ b/deploy/public/patterns/task-list-pages/index.html @@ -1208,11 +1208,11 @@Tell users why you might contact them and when.
It’s possible to mark up telephone numbers as links, like this:
-<a href="tel:+442079476330">020 7947 6330</a>
-
+html <a href="tel:+442079476330">020 7947 6330</a>
However, doing this will style telephone numbers as links, which is confusing on devices that do not support telephone calls.
It might also not be necessary - some modern mobile browsers automatically detect telephone numbers and display them as links anyway.
If you do need to mark up your telephone numbers as links, for example, to support a device that cannot automatically detect them, make sure they do not display as links on devices that cannot make calls.
When you look at your service’s user journey, remember that telephone numbers as links might behave in unexpected ways for the user. For example, unless the user sets a default app to handle tel:
links, some browsers and operating systems will automatically start a setup process.
See the GOV.UK style for writing telephone numbers.
Avoid input masking because it makes it harder for users to:
diff --git a/deploy/public/styles/layout/index.html b/deploy/public/styles/layout/index.html index 1c94e015c0..7dbb34c502 100644 --- a/deploy/public/styles/layout/index.html +++ b/deploy/public/styles/layout/index.html @@ -1287,7 +1287,7 @@