Skip to content

Commit

Permalink
Merge pull request #617 from UKHomeOffice/accessibility
Browse files Browse the repository at this point in the history 
Fix and update wording in the accessibility section
  • Loading branch information
@daniel-ac-martin
daniel-ac-martin authored Dec 11, 2024
2 parents 6c74ae0 + d48d759 commit 1fe5ced
Show file tree
Hide file tree
Showing 32 changed files with 83 additions and 151 deletions.
2 changes: 1 addition & 1 deletion apps/docs/src/common/pages/accessibility.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ const Page: FC<PageProps> = () => (
different needs and circumstances such as location, health and equipment.</p>
<p>Delivering accessible and inclusive services is also in line with government standards and our legal
responsibilities for equality and accessibility.</p>
<p>In order to provide consistency for users and product teams, we’ve developed a <A href="/accessibility/standard">Home Office Accessibility Standard</A> 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.</p>
<p>In order to provide consistency for users and product teams, we’ve developed a <A href="/accessibility/standard">Home Office Accessibility Standard</A> 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.</p>
</div>
</div>
);
Expand Down
9 changes: 2 additions & 7 deletions apps/docs/src/common/pages/accessibility/audio-and-video.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,20 +192,15 @@ and a transcript. </p>

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

<p>You can arrange sign language interpretation services through TheBigWord. Contact <A href="mailto:[email protected]">[email protected]</A>.</p>

<h2>When you cannot make something accessible</h2>

<p>Tell users when certain accessibility features are not present and why, such as no captions due to the video not having important
auditory information.</p>

<p>Provide dates for fixes and include these in your accessibility statement.</p>


<div className="contact-us">
<h2 className="govuk-heading-m">Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>
</div>
<h2>Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>

</div>
</div>
Expand Down
6 changes: 2 additions & 4 deletions apps/docs/src/common/pages/accessibility/colour-and-contrast.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,10 +140,8 @@ const Page: FC<PageProps> = () => (

<p>Most automated testing tools such as Microsoft <A href="https://accessibilityinsights.io/">Accessibility Insights</A> 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.</p>

<div className="contact-us">
<h2 className="govuk-heading-m">Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>
</div>
<h2>Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>

</div>
</div>
Expand Down
6 changes: 2 additions & 4 deletions apps/docs/src/common/pages/accessibility/error-messages.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -252,10 +252,8 @@ You should place keyboard and visual focus at the summary to alert screen reader
</div>
</div>

<div className="contact-us">
<h2 className="govuk-heading-m">Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>
</div>
<h2>Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>

</div>
</div>
Expand Down
6 changes: 2 additions & 4 deletions apps/docs/src/common/pages/accessibility/forms.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,10 +169,8 @@ const Page: FC<PageProps> = () => (
</div>
</div>

<div className="contact-us">
<h2 className="govuk-heading-m">Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>
</div>
<h2>Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>

</div>
</div>
Expand Down
6 changes: 2 additions & 4 deletions apps/docs/src/common/pages/accessibility/forms/keyboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,8 @@ const Page: FC<PageProps> = () => (
<p>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.</p>
<p>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 <A href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete">autocomplete attribute</A> and considering field number and order can help make your form easier to use.</p>

<div className="contact-us">
<h2 className="govuk-heading-m">Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>
</div>
<h2>Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>

</div>
</div>
Expand Down
6 changes: 2 additions & 4 deletions apps/docs/src/common/pages/accessibility/gestures-and-motion.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,10 +110,8 @@ const Page: FC<PageProps> = () => (
<p>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.</p>
<p>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.</p>

<div className="contact-us">
<h2 className="govuk-heading-m">Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>
</div>
<h2>Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>

</div>
</div>
Expand Down
7 changes: 3 additions & 4 deletions apps/docs/src/common/pages/accessibility/headings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,10 +121,9 @@ Headings are defined by using <code>&lt;h&gt;</code> tags which come in the form

<p>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 <A href="https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/">‘visually hidden’ style in CSS</A>.</p>

<div className="contact-us">
<h2 className="govuk-heading-m">Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>
</div>
<h2>Get in touch</h2>

<p>If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>

</div>
</div>
Expand Down
6 changes: 2 additions & 4 deletions apps/docs/src/common/pages/accessibility/images.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,10 +144,8 @@ const Page: FC<PageProps> = () => (

<p>For <A href="https://www.w3.org/WAI/tutorials/images/imagemap/">images with multiple selectable regions</A>, alt text should be provided for all area elements.</p>

<div className="contact-us">
<h2 className="govuk-heading-m">Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>
</div>
<h2>Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>

</div>
</div>
Expand Down
7 changes: 2 additions & 5 deletions apps/docs/src/common/pages/accessibility/keyboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,11 +101,8 @@ const Page: FC<PageProps> = () => (
<li><A href="/accessibility/keyboard/pointer-gestures">pointer gestures</A></li>
</ul>


<div className="contact-us">
<h2 className="govuk-heading-m">Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>
</div>
<h2>Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>

</div>
</div>
Expand Down
6 changes: 2 additions & 4 deletions apps/docs/src/common/pages/accessibility/keyboard/character-key-shortcuts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,8 @@ const Page: FC<PageProps> = () => (
</ul>
<p>Find out more about WCAG success criteria on <A href="https://www.w3.org/WAI/WCAG21/Understanding/character-key-shortcuts.html">character key shortcuts</A>.</p>

<div className="contact-us">
<h2 className="govuk-heading-m">Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>
</div>
<h2>Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>

</div>
</div>
Expand Down
7 changes: 3 additions & 4 deletions apps/docs/src/common/pages/accessibility/keyboard/focus.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,10 +87,9 @@ const Page: FC<PageProps> = () => (
<br />
<p>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.</p>
<p>Find out more about WCAG success criteria on <A href="https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html">focus order</A>.</p>
<div className="contact-us">
<h2 className="govuk-heading-m">Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>
</div>

<h2>Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>

</div>
</div>
Expand Down
6 changes: 2 additions & 4 deletions apps/docs/src/common/pages/accessibility/keyboard/pointer-gestures.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,8 @@ const Page: FC<PageProps> = () => (
<p>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.</p>
<p>Find out more about WCAG success criteria on <A href="https://www.w3.org/WAI/WCAG21/Understanding/pointer-gestures.html">pointer gestures</A>.</p>

<div className="contact-us">
<h2 className="govuk-heading-m">Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>
</div>
<h2>Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>

</div>
</div>
Expand Down
7 changes: 3 additions & 4 deletions apps/docs/src/common/pages/accessibility/keyboard/skip-to-content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,9 @@ const Page: FC<PageProps> = () => (
<p>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.</p>
<p>Read more on the WCAG success criteria on <A href="https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks.html">bypassing blocks of content</A>.</p>

<div className="contact-us">
<h2 className="govuk-heading-m">Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>
</div>
<h2>Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>

</div>
</div>
);
Expand Down
8 changes: 2 additions & 6 deletions apps/docs/src/common/pages/accessibility/keyboard/tab-navigation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,12 +57,8 @@ const Page: FC<PageProps> = () => (
<p>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.</p>
<p>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 <A href="https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap.html">keyboard trap</A>.</p>



<div className="contact-us">
<h2 className="govuk-heading-m">Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>
</div>
<h2>Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>

</div>
</div>
Expand Down
8 changes: 3 additions & 5 deletions apps/docs/src/common/pages/accessibility/layout-typography.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ const Page: FC<PageProps> = () => (

<h3>Fonts</h3>

<p>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). </p>
<p>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. </p>
<br />
<h3>Styling</h3>

Expand Down Expand Up @@ -150,10 +150,8 @@ const Page: FC<PageProps> = () => (
</div>
</div>
<br />
<div className="contact-us">
<h2 className="govuk-heading-m">Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>
</div>
<h2>Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>

</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions apps/docs/src/common/pages/accessibility/leaders-guide.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -450,8 +450,8 @@ const Page: FC<PageProps> = () => (
<h3>Widest user need</h3>
<p>Designing services so as many people as possible, including those with access needs, can use them. </p>

<h2>Contribute</h2>
<p>Get involved with <A href="https://github.com/UKHomeOffice/design-system/discussions">GitHub discussions</A> about our styles, components and patterns.</p>
<h2>Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>

</div>
</div>
Expand Down
7 changes: 2 additions & 5 deletions apps/docs/src/common/pages/accessibility/links.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,11 +169,8 @@ the link destination, not the image itself.</p>

<p>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.</p>


<div className="contact-us">
<h2 className="govuk-heading-m">Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>
</div>
<h2>Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>

</div>
</div>
Expand Down
8 changes: 2 additions & 6 deletions apps/docs/src/common/pages/accessibility/lists.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,12 +138,8 @@ const Page: FC<PageProps> = () => (

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



<div className="contact-us">
<h2 className="govuk-heading-m">Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>
</div>
<h2>Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>

</div>
</div>
Expand Down
6 changes: 2 additions & 4 deletions apps/docs/src/common/pages/accessibility/moving-and-flashing-content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,10 +102,8 @@ const Page: FC<PageProps> = () => (
<h3>Flashing content</h3>
<p>Content must not flash more than three times a second.</p>

<div className="contact-us">
<h2 className="govuk-heading-m">Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>
</div>
<h2>Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>

</div>
</div>
Expand Down
7 changes: 2 additions & 5 deletions apps/docs/src/common/pages/accessibility/navigation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,11 +129,8 @@ const Page: FC<PageProps> = () => (
<p>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 <A href="https://design.homeoffice.gov.uk/accessibility/keyboard/skip-to-content">skip link</A> that lets users quickly move past it if they need to.</p>


<div className="contact-us">
<h2 className="govuk-heading-m">Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>
</div>
<h2>Get in touch</h2>
<p>If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email <A href="mailto:[email protected]">[email protected]</A>.</p>

</div>
</div>
Expand Down
Loading

1 comment on commit 1fe5ced

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Published on https://hods.netlify.app as production
🚀 Deployed on https://67598e8fe8e88ea569755bd5--hods.netlify.app

Please sign in to comment.