diff --git a/apps/docs/src/common/pages/accessibility.tsx b/apps/docs/src/common/pages/accessibility.tsx index 3ec380d1..92566934 100644 --- a/apps/docs/src/common/pages/accessibility.tsx +++ b/apps/docs/src/common/pages/accessibility.tsx @@ -174,7 +174,7 @@ const Page: FC = () => ( different needs and circumstances such as location, health and equipment.

Delivering accessible and inclusive services is also in line with government standards and our legal responsibilities for equality and accessibility.

-

In order to provide consistency for users and product teams, we’ve developed a Home Office Accessibility Standard that closely aligns to the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA but simplifies and focuses on the areas most likely to present challenges for Home Office users.

+

In order to provide consistency for users and product teams, we’ve developed a Home Office Accessibility Standard that closely aligns to the Web Content Accessibility Guidelines (WCAG) 2.2 Level AA but simplifies and focuses on the areas most likely to present challenges for Home Office users.

); diff --git a/apps/docs/src/common/pages/accessibility/audio-and-video.tsx b/apps/docs/src/common/pages/accessibility/audio-and-video.tsx index f8c1ab9b..4f728d01 100644 --- a/apps/docs/src/common/pages/accessibility/audio-and-video.tsx +++ b/apps/docs/src/common/pages/accessibility/audio-and-video.tsx @@ -192,8 +192,6 @@ and a transcript.

Provide sign language interpretation for video that has audio content - when you have identified a need.

-

You can arrange sign language interpretation services through TheBigWord. Contact lauren.brayshaw@thebigword.com.

-

When you cannot make something accessible

Tell users when certain accessibility features are not present and why, such as no captions due to the video not having important @@ -201,11 +199,8 @@ auditory information.

Provide dates for fixes and include these in your accessibility statement.

- -
-

Get in touch

-

If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

-
+

Get in touch

+

If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

diff --git a/apps/docs/src/common/pages/accessibility/colour-and-contrast.tsx b/apps/docs/src/common/pages/accessibility/colour-and-contrast.tsx index 95e02f6c..f68bff38 100644 --- a/apps/docs/src/common/pages/accessibility/colour-and-contrast.tsx +++ b/apps/docs/src/common/pages/accessibility/colour-and-contrast.tsx @@ -140,10 +140,8 @@ const Page: FC = () => (

Most automated testing tools such as Microsoft Accessibility Insights check for contrast issues. These can be useful for quick checks on a page, but do not only rely on automated tools – you should manually check contrast ratios as well.

-
-

Get in touch

-

If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

-
+

Get in touch

+

If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

diff --git a/apps/docs/src/common/pages/accessibility/error-messages.tsx b/apps/docs/src/common/pages/accessibility/error-messages.tsx index 228adf30..17061bee 100644 --- a/apps/docs/src/common/pages/accessibility/error-messages.tsx +++ b/apps/docs/src/common/pages/accessibility/error-messages.tsx @@ -252,10 +252,8 @@ You should place keyboard and visual focus at the summary to alert screen reader -
-

Get in touch

-

If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

-
+

Get in touch

+

If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

diff --git a/apps/docs/src/common/pages/accessibility/forms.tsx b/apps/docs/src/common/pages/accessibility/forms.tsx index d15c8367..8746f30e 100644 --- a/apps/docs/src/common/pages/accessibility/forms.tsx +++ b/apps/docs/src/common/pages/accessibility/forms.tsx @@ -169,10 +169,8 @@ const Page: FC = () => ( -
-

Get in touch

-

If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

-
+

Get in touch

+

If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

diff --git a/apps/docs/src/common/pages/accessibility/forms/keyboard.tsx b/apps/docs/src/common/pages/accessibility/forms/keyboard.tsx index 7f1184fe..8a5a3ec4 100644 --- a/apps/docs/src/common/pages/accessibility/forms/keyboard.tsx +++ b/apps/docs/src/common/pages/accessibility/forms/keyboard.tsx @@ -78,10 +78,8 @@ const Page: FC = () => (

If your form control is more complex than a text field or dropdown, consider giving users help with how to use the control via hint text. You should also offer an alternative, for example allowing users to type in a date field as well as having a date picker.

Using keyboard, switch or other input devices can be tiring for people with motor impairments so make sure users don’t have to use Tab more than they need to. Things like typeahead fields, the autocomplete attribute and considering field number and order can help make your form easier to use.

-
-

Get in touch

-

If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

-
+

Get in touch

+

If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

diff --git a/apps/docs/src/common/pages/accessibility/gestures-and-motion.tsx b/apps/docs/src/common/pages/accessibility/gestures-and-motion.tsx index d570cc39..d353d3dd 100644 --- a/apps/docs/src/common/pages/accessibility/gestures-and-motion.tsx +++ b/apps/docs/src/common/pages/accessibility/gestures-and-motion.tsx @@ -110,10 +110,8 @@ const Page: FC = () => (

Activation of any function should occur on the up-event - lifting a finger from the screen or mouse button. Using the click event by default will only trigger the action on release.

After clicking the mouse or touching the screen, users must be able to cancel the action that would be executed on releasing the mouse button or touch input. This means that if a user selects a control but moves the mouse away from the control before releasing it, the functionality should not be triggered.

-
-

Get in touch

-

If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

-
+

Get in touch

+

If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

diff --git a/apps/docs/src/common/pages/accessibility/headings.tsx b/apps/docs/src/common/pages/accessibility/headings.tsx index 316153d8..2660c4de 100644 --- a/apps/docs/src/common/pages/accessibility/headings.tsx +++ b/apps/docs/src/common/pages/accessibility/headings.tsx @@ -121,10 +121,9 @@ Headings are defined by using <h> tags which come in the form

Where sections are broken up with visual design alone, it may be worth adding a screen reader-only heading to help non-visual users navigate these parts of the page. You can do this with a ‘visually hidden’ style in CSS.

-
-

Get in touch

-

If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

-
+

Get in touch

+ +

If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

diff --git a/apps/docs/src/common/pages/accessibility/images.tsx b/apps/docs/src/common/pages/accessibility/images.tsx index 7a1be749..94bf3fc1 100644 --- a/apps/docs/src/common/pages/accessibility/images.tsx +++ b/apps/docs/src/common/pages/accessibility/images.tsx @@ -144,10 +144,8 @@ const Page: FC = () => (

For images with multiple selectable regions, alt text should be provided for all area elements.

-
-

Get in touch

-

If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

-
+

Get in touch

+

If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

diff --git a/apps/docs/src/common/pages/accessibility/keyboard.tsx b/apps/docs/src/common/pages/accessibility/keyboard.tsx index a2e95a03..d46d7de6 100644 --- a/apps/docs/src/common/pages/accessibility/keyboard.tsx +++ b/apps/docs/src/common/pages/accessibility/keyboard.tsx @@ -101,11 +101,8 @@ const Page: FC = () => (
  • pointer gestures
    • - -
    -

    Get in touch

    -

    If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

    -
    +

    Get in touch

    +

    If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

    diff --git a/apps/docs/src/common/pages/accessibility/keyboard/character-key-shortcuts.tsx b/apps/docs/src/common/pages/accessibility/keyboard/character-key-shortcuts.tsx index a51576cd..66226507 100644 --- a/apps/docs/src/common/pages/accessibility/keyboard/character-key-shortcuts.tsx +++ b/apps/docs/src/common/pages/accessibility/keyboard/character-key-shortcuts.tsx @@ -38,10 +38,8 @@ const Page: FC = () => (

    Find out more about WCAG success criteria on character key shortcuts.

    -
    -

    Get in touch

    -

    If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

    -
    +

    Get in touch

    +

    If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

    diff --git a/apps/docs/src/common/pages/accessibility/keyboard/focus.tsx b/apps/docs/src/common/pages/accessibility/keyboard/focus.tsx index f4ddfc64..c32b54b8 100644 --- a/apps/docs/src/common/pages/accessibility/keyboard/focus.tsx +++ b/apps/docs/src/common/pages/accessibility/keyboard/focus.tsx @@ -87,10 +87,9 @@ const Page: FC = () => (

    This bad example shows irregular tab moves. The focus does not move in a left to right, top to bottom order - instead it jumps back up the page and from right to left. It also does not tab to all interactive elements in each section.

    Find out more about WCAG success criteria on focus order.

    -
    -

    Get in touch

    -

    If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

    -
    + +

    Get in touch

    +

    If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

    diff --git a/apps/docs/src/common/pages/accessibility/keyboard/pointer-gestures.tsx b/apps/docs/src/common/pages/accessibility/keyboard/pointer-gestures.tsx index a4c4c363..c542eff4 100644 --- a/apps/docs/src/common/pages/accessibility/keyboard/pointer-gestures.tsx +++ b/apps/docs/src/common/pages/accessibility/keyboard/pointer-gestures.tsx @@ -29,10 +29,8 @@ const Page: FC = () => (

    These types of elements must also be accessible to keyboard users. If you see pointer gesture elements on a website you should try getting to it with keyboard controls and then see if you can control it by using the arrow keys, or other character controls if required.

    Find out more about WCAG success criteria on pointer gestures.

    -
    -

    Get in touch

    -

    If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

    -
    +

    Get in touch

    +

    If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

    diff --git a/apps/docs/src/common/pages/accessibility/keyboard/skip-to-content.tsx b/apps/docs/src/common/pages/accessibility/keyboard/skip-to-content.tsx index 6b06db61..8c1ad715 100644 --- a/apps/docs/src/common/pages/accessibility/keyboard/skip-to-content.tsx +++ b/apps/docs/src/common/pages/accessibility/keyboard/skip-to-content.tsx @@ -38,10 +38,9 @@ const Page: FC = () => (

    You can test this by pressing enter on the ‘skip to content’ link and then pressing tab. If your next move focuses the first interactive element further down the page in the main content, you know it is working.

    Read more on the WCAG success criteria on bypassing blocks of content.

    -
    -

    Get in touch

    -

    If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

    -
    +

    Get in touch

    +

    If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

    + ); diff --git a/apps/docs/src/common/pages/accessibility/keyboard/tab-navigation.tsx b/apps/docs/src/common/pages/accessibility/keyboard/tab-navigation.tsx index 77b17414..4ac3eef9 100644 --- a/apps/docs/src/common/pages/accessibility/keyboard/tab-navigation.tsx +++ b/apps/docs/src/common/pages/accessibility/keyboard/tab-navigation.tsx @@ -57,12 +57,8 @@ const Page: FC = () => (

    Interacting with an element should not automatically move a user to another page or open a popup, unless the user has been informed beforehand. Instead provide a submit to perform an action.

    Sometimes you can get stuck in elements such as carousel content or social media widgets. When this happens and you cannot move out of an element with tab, first try using the esc key. If you continue to be stuck, this is a fault and is known as getting caught in a keyboard trap.

    - - -
    -

    Get in touch

    -

    If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

    -
    +

    Get in touch

    +

    If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

    diff --git a/apps/docs/src/common/pages/accessibility/layout-typography.tsx b/apps/docs/src/common/pages/accessibility/layout-typography.tsx index 4be32a89..e7fd037b 100644 --- a/apps/docs/src/common/pages/accessibility/layout-typography.tsx +++ b/apps/docs/src/common/pages/accessibility/layout-typography.tsx @@ -97,7 +97,7 @@ const Page: FC = () => (

    Fonts

    -

    The Home Office and GOV.UK design systems both use fonts chosen for clarity and readability, so use them if you can. In emails, documents, or third-party products that allow limited customisation, choose a font that is open and clear. Because all users have different needs, there’s no such thing as a fully ‘accessible’ font, but usually it’s better to choose a sans-serif font (such as Arial) over a serif font (such as Times New Roman).

    +

    The Home Office and GOV.UK design systems both use fonts chosen for clarity and readability, so use them if you can. In emails, documents, or third-party products that allow limited customisation, choose a font that is open and clear. Because all users have different needs, there’s no such thing as a fully ‘accessible’ font.


    Styling

    @@ -150,10 +150,8 @@ const Page: FC = () => (
    -
    -

    Get in touch

    -

    If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

    -
    +

    Get in touch

    +

    If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

    diff --git a/apps/docs/src/common/pages/accessibility/leaders-guide.tsx b/apps/docs/src/common/pages/accessibility/leaders-guide.tsx index 407a779b..9c2ebbb1 100644 --- a/apps/docs/src/common/pages/accessibility/leaders-guide.tsx +++ b/apps/docs/src/common/pages/accessibility/leaders-guide.tsx @@ -450,8 +450,8 @@ const Page: FC = () => (

    Widest user need

    Designing services so as many people as possible, including those with access needs, can use them.

    -

    Contribute

    -

    Get involved with GitHub discussions about our styles, components and patterns.

    +

    Get in touch

    +

    If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

    diff --git a/apps/docs/src/common/pages/accessibility/links.tsx b/apps/docs/src/common/pages/accessibility/links.tsx index 962f77a7..b9f85b09 100644 --- a/apps/docs/src/common/pages/accessibility/links.tsx +++ b/apps/docs/src/common/pages/accessibility/links.tsx @@ -169,11 +169,8 @@ the link destination, not the image itself.

    An example of doing something unexpected is if content opens in a new browser tab or window. If you have to do this you should tell users that this will happen in the link text or with a clearly defined icon.

    - -
    -

    Get in touch

    -

    If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

    -
    +

    Get in touch

    +

    If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

    diff --git a/apps/docs/src/common/pages/accessibility/lists.tsx b/apps/docs/src/common/pages/accessibility/lists.tsx index 93a75190..1b5ac93a 100644 --- a/apps/docs/src/common/pages/accessibility/lists.tsx +++ b/apps/docs/src/common/pages/accessibility/lists.tsx @@ -138,12 +138,8 @@ const Page: FC = () => (

    If your document template has list styles built in, use those, as they will have the correct list functionality already built in.

    - - -
    -

    Get in touch

    -

    If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

    -
    +

    Get in touch

    +

    If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

    diff --git a/apps/docs/src/common/pages/accessibility/moving-and-flashing-content.tsx b/apps/docs/src/common/pages/accessibility/moving-and-flashing-content.tsx index 1d572e49..f1fe2f2f 100644 --- a/apps/docs/src/common/pages/accessibility/moving-and-flashing-content.tsx +++ b/apps/docs/src/common/pages/accessibility/moving-and-flashing-content.tsx @@ -102,10 +102,8 @@ const Page: FC = () => (

    Flashing content

    Content must not flash more than three times a second.

    -
    -

    Get in touch

    -

    If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

    -
    +

    Get in touch

    +

    If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

    diff --git a/apps/docs/src/common/pages/accessibility/navigation.tsx b/apps/docs/src/common/pages/accessibility/navigation.tsx index 51e227fd..1ac21e42 100644 --- a/apps/docs/src/common/pages/accessibility/navigation.tsx +++ b/apps/docs/src/common/pages/accessibility/navigation.tsx @@ -129,11 +129,8 @@ const Page: FC = () => (

    Never use navigation links that operate ‘on focus’ – keyboard-only users will tab through a list of links to find the one they need, and on-focus operation (which takes them to a new page at every tab stop) will prevent them from using your navigation altogether. The more content in your main navigation, the more important it is to include a skip link that lets users quickly move past it if they need to.

    - -
    -

    Get in touch

    -

    If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

    -
    +

    Get in touch

    +

    If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

    diff --git a/apps/docs/src/common/pages/accessibility/notifications.tsx b/apps/docs/src/common/pages/accessibility/notifications.tsx index bc335c01..8deb13bf 100644 --- a/apps/docs/src/common/pages/accessibility/notifications.tsx +++ b/apps/docs/src/common/pages/accessibility/notifications.tsx @@ -129,10 +129,8 @@ const Page: FC = () => (

    Focus

    Where possible, avoid moving the visual or keyboard focus.

    -
    -

    Get in touch

    -

    If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

    -
    +

    Get in touch

    +

    If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

    diff --git a/apps/docs/src/common/pages/accessibility/readability.tsx b/apps/docs/src/common/pages/accessibility/readability.tsx index 0f411fa5..4738adaf 100644 --- a/apps/docs/src/common/pages/accessibility/readability.tsx +++ b/apps/docs/src/common/pages/accessibility/readability.tsx @@ -133,10 +133,8 @@ const Page: FC = () => (
  • Hemingway Editor (hemingwayapp.com) - highlights lengthy, complex sentences and common errors
    • -
    -

    Get in touch

    -

    If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

    -
    +

    Get in touch

    +

    If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

    diff --git a/apps/docs/src/common/pages/accessibility/resources.tsx b/apps/docs/src/common/pages/accessibility/resources.tsx index f5d81256..299e1aea 100644 --- a/apps/docs/src/common/pages/accessibility/resources.tsx +++ b/apps/docs/src/common/pages/accessibility/resources.tsx @@ -48,10 +48,8 @@ const Page: FC = () => (
  • Accessibility in government blog
    • -
    -

    Get in touch

    -

    If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

    -
    +

    Get in touch

    +

    If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

    diff --git a/apps/docs/src/common/pages/accessibility/standard.tsx b/apps/docs/src/common/pages/accessibility/standard.tsx index 36bffae1..c4f9014e 100644 --- a/apps/docs/src/common/pages/accessibility/standard.tsx +++ b/apps/docs/src/common/pages/accessibility/standard.tsx @@ -27,7 +27,7 @@ const Page: FC = () => ( Accessibility Standard

    As a public body, the Home Office has a legal responsibility to ensure that the digital services and systems we control are accessible to the widest possible group of people.

    -

    To provide consistency for users and product teams, we’ve developed a Home Office Accessibility Standard. This closely aligns with the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA but simplifies and focuses on the areas most likely to present challenges for Home Office users.

    +

    To provide consistency for users and product teams, we’ve developed a Home Office Accessibility Standard. This closely aligns with the Web Content Accessibility Guidelines (WCAG) 2.2 Level AA but simplifies and focuses on the areas most likely to present challenges for Home Office users.

    @@ -107,7 +107,7 @@ const Page: FC = () => ( @@ -602,10 +602,8 @@ const Page: FC = () => (

    Where visual headings are used to communicate the structure of a page, they must also be communicated in a way that supports assistive technology users to access this structure.

    -

    You should use semanatic HTML headings to structure your page. Heads should cascade from H1-H6. Each page must have at least a Level 1 Heading (H1).

    +

    You should use semanatic HTML headings to structure your page. Headings should cascade from H1-H6. Each page must have at least a Level 1 Heading (H1).
    -
    -

    Get in touch

    -

    If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

    -
    +

    Get in touch

    +

    If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

    diff --git a/apps/docs/src/common/pages/accessibility/standard/meet-user-needs.tsx b/apps/docs/src/common/pages/accessibility/standard/meet-user-needs.tsx index dc2f869c..fa20a008 100644 --- a/apps/docs/src/common/pages/accessibility/standard/meet-user-needs.tsx +++ b/apps/docs/src/common/pages/accessibility/standard/meet-user-needs.tsx @@ -79,10 +79,8 @@ const Page: FC = () => (

    as appropriate for the service audience and environment.

    The full combinations of assistive technologies and browsers you should test with can be found in the Testing with assistive technologies guidance

    -
    -

    Get in touch

    -

    If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

    -
    +

    Get in touch

    +

    If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

    diff --git a/apps/docs/src/common/pages/accessibility/standard/operable.tsx b/apps/docs/src/common/pages/accessibility/standard/operable.tsx index 6340b2ac..4cb68449 100644 --- a/apps/docs/src/common/pages/accessibility/standard/operable.tsx +++ b/apps/docs/src/common/pages/accessibility/standard/operable.tsx @@ -29,7 +29,7 @@ const Page: FC = () => (

    All interactive components and page navigations must be operable via different input modalities.

    Users should be able to easily navigate around the site and have enough time to interact with the content without discomfort or physical reactions.

    Index

    -

    Keyboard Accessible

    +

    Keyboard accessible

    -

    Input Modalities

    +

    Input modalities

    -

    Keyboard Accessible

    +

    Keyboard accessible

    2.1.1 - Keyboard accessible

    It must be possible for someone using a keyboard to complete all tasks in a service.

    This approach will also ensure that users on touch devices that are running assistive technology will also have access to all parts of a service.

    @@ -182,7 +182,7 @@ const Page: FC = () => (

    2.4.1 - Bypass blocks

    When there is repeated content (like a header) at the top of the page, there must be a way for keyboard users to move focus directly to the start of the main content area of the page.

    -

    Consider including shortcuts to allow the user to jump between other parts of the content on long pages

    +

    Consider including shortcuts to allow the user to jump between other parts of the content on long pages.

    Understanding Success Criterion 2.4.1: Bypass Blocks

    Implementation guidance

    Provide a ‘Skip to main content’ link close to the start of the page.

    @@ -304,10 +304,10 @@ const Page: FC = () => (

    When an interactive element receives keyboard focus, the focus must be easy to see (not entirely hidden behind elements such as cookie banners, sticky headers or footers).

    When implementing content such as headers, footers and banners, make sure page content is shifted accordingly and there is no overlap with the focused element. Alternatively restrict keyboard focus to the banner to prevent user from interacting with the underlying page.

    How to test with a visual check

    -

    If a cookie banner is present, tab around before you dismiss it, to make sure focus indicator does not disappear behind it. Clear your cookie cache to make the banner reappear if necessary.

    -

    Then tab around the page to make sure focus indicator does not disapear behind other elements, such as sticky headers or footers.

    +

    If a cookie banner is present, tab around before you dismiss it, to make sure the focus indicator does not disappear behind it. Clear your cookie cache to make the banner reappear if necessary.

    +

    Then tab around the page to make sure focus indicator does not disappear behind other elements, such as sticky headers or footers.

    -

    Input Modalities

    +

    Input modalities

    2.5.1 - Pointer gestures

    Any functionality which requires a multipoint or path based gestures has an alternative single pointer, non path-based gesture.

    @@ -384,10 +384,8 @@ const Page: FC = () => (

    Use the bookmarklet to check that interactive areas of components are either 24 x 24 CSS pixels, or have at least that much space around them in total to avoid clashing with other interactive areas (24×24 Pixel Cursor Bookmarklet).

    Interactive elements could include buttons, radio buttons, checkboxes and carousel controls.

    -
    -

    Get in touch

    -

    If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

    -
    +

    Get in touch

    +

    If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

    diff --git a/apps/docs/src/common/pages/accessibility/standard/perceivable.tsx b/apps/docs/src/common/pages/accessibility/standard/perceivable.tsx index 7e463940..c694c8eb 100644 --- a/apps/docs/src/common/pages/accessibility/standard/perceivable.tsx +++ b/apps/docs/src/common/pages/accessibility/standard/perceivable.tsx @@ -29,7 +29,7 @@ const Page: FC = () => (

    Users must be able to perceive the content.

    Text alternative for non-text content, captions and other alternatives for multimedia should be provided, and content should be adaptable by the user to fit their requirements.

    Index

    -

    Text Alternatives

    +

    Text alternatives

    1.1.1 - Non text content

    Time based media

    @@ -61,7 +61,7 @@ const Page: FC = () => (
  • 1.4.13 - Content on hover or focus
    • -

    Text Alternatives

    +

    Text alternatives

    1.1.1 - Non text content

    All non-text content like images, charts, icons and infographics, must have an appropriate text equivalent. This ensures that information conveyed by non-text content is available to people who cannot see it, like screen reader users.

    @@ -169,7 +169,7 @@ const Page: FC = () => (

    1.3.1c - Info and relationships - Headings

    Where visual headings are used to communicate the structure of a page, they must also be communicated in a way that supports assistive technology users to access this structure.

    -

    You should use semantic HTML headings to structure your page. Heads should cascade from H1-H6. Each page must have at least a Level 1 Heading (H1).

    +

    You should use semantic HTML headings to structure your page. Headings should cascade from H1-H6. Each page must have at least a Level 1 Heading (H1).

    Understanding Success Criterion 1.3.1: Info and Relationships

    Implementation guidance

    Use proper HTML markup for headings (<h1> through <h6> elements).

    @@ -292,7 +292,7 @@ const Page: FC = () => (

    1.3.4 - Orientation

    A page view must not be locked to either horizontal or vertical views only, unless this is essential.

    -

    There are limited cases where ‘essential’ orientation locking applies. Check with the A&I team for cases.

    +

    There are limited cases where ‘essential’ orientation locking applies. Check with the Accessibility Assurance team for cases.

    Understanding Success Criterion 1.3.4: Orientation

    Implementation gudance

    Let the user view pages in their preferred orientation.

    @@ -322,7 +322,7 @@ const Page: FC = () => (

    Distinguishable

    1.4.1 - Use of colour

    -

    Information conveyed with colour must also be identifiable from context, labelling, or alternative forms

    +

    Information conveyed with colour must also be identifiable from context, labelling, or alternative forms.

    Understanding Success Criterion 1.4.1: Use of Color

    Implementation guidance

    When rendered in monochrome, information does not disappear.

    @@ -335,7 +335,7 @@ const Page: FC = () => (

    Check that all links within the content (not navigation).

    1.4.2 - Audio control

    -

    Audio/video must not play automatically unless the user is pre-warned and can control the audio

    +

    Audio/video must not play automatically unless the user is pre-warned and can control the audio.

    Understanding Success Criterion 1.4.2: Audio Control

    Implementation guidance

    Audio or video content that plays automatically, for example an alert sound, lasts for three seconds or less.

    @@ -473,10 +473,8 @@ const Page: FC = () => (
  • check that the new content does not disappear until you move the mouse pointer or keyboard focus to the next item on the page
    • -
    -

    Get in touch

    -

    If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

    -
    +

    Get in touch

    +

    If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

    diff --git a/apps/docs/src/common/pages/accessibility/standard/robust.tsx b/apps/docs/src/common/pages/accessibility/standard/robust.tsx index 3de4dac2..3e09c131 100644 --- a/apps/docs/src/common/pages/accessibility/standard/robust.tsx +++ b/apps/docs/src/common/pages/accessibility/standard/robust.tsx @@ -64,10 +64,8 @@ const Page: FC = () => (

    When completing actions that involve a visual status message or information that a user needs to be made aware of, check that the message is announced to screen reader users in a timely manner.

    Note that these messages should not interrupt the screen reader's current activity but should relay the information at a suitable break in the screen reader audio.

    -
    -

    Get in touch

    -

    If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

    -
    +

    Get in touch

    +

    If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

    diff --git a/apps/docs/src/common/pages/accessibility/standard/understandable.tsx b/apps/docs/src/common/pages/accessibility/standard/understandable.tsx index f92560c4..ed47c8b2 100644 --- a/apps/docs/src/common/pages/accessibility/standard/understandable.tsx +++ b/apps/docs/src/common/pages/accessibility/standard/understandable.tsx @@ -85,7 +85,7 @@ const Page: FC = () => (

    3.2.2 - On input

    -

    Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behaviour before using the component

    +

    Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behaviour before using the component.

    Understanding Success Criterion 3.2.2: On Input

    Implementation guidance

    Do not change the context automatically when a radio button or checkbox is checked/unchecked or an option in a <select> is chosen. Provide an explicit submit/go option.

    @@ -235,10 +235,8 @@ const Page: FC = () => (

    How to test with a manual code check

    Right click on each form field required to register or login, select ‘Inspect’ and check that an appropriate username, new-password and current-password autocomplete attributes are included in its source code.

    -
    -

    Get in touch

    -

    If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

    -
    +

    Get in touch

    +

    If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

    diff --git a/apps/docs/src/common/pages/accessibility/tables.tsx b/apps/docs/src/common/pages/accessibility/tables.tsx index 83437faa..c1d6677a 100644 --- a/apps/docs/src/common/pages/accessibility/tables.tsx +++ b/apps/docs/src/common/pages/accessibility/tables.tsx @@ -153,10 +153,8 @@ const Page: FC = () => (

    Ensure that text within tables can be resized up to 200% and the text spacing adjusted without it being clipped, truncated or obscured.

    -
    -

    Get in touch

    -

    If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

    -
    +

    Get in touch

    +

    If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.

    diff --git a/apps/docs/src/common/pages/accessibility/timeouts.tsx b/apps/docs/src/common/pages/accessibility/timeouts.tsx index b6fa4ddc..29602434 100644 --- a/apps/docs/src/common/pages/accessibility/timeouts.tsx +++ b/apps/docs/src/common/pages/accessibility/timeouts.tsx @@ -125,11 +125,8 @@ const Page: FC = () => (

    Provide a way for the user to get back to where they were

    When a user experiences a timeout, provide a way for them to return back to where they were before the timeout occurred. This may not be possible without the user having to re-enter data, though this should be minimised.

    - -
    -

    Get in touch

    -

    If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.

    -
    +

    Get in touch

    +

    If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.