UKHomeOffice · daniel-ac-martin · Jul 20, 2022 · Jul 19, 2022 · Jul 19, 2022 · Jul 19, 2022
diff --git a/apps/docs/src/common/pages/accessibility/audio-and-video.tsx b/apps/docs/src/common/pages/accessibility/audio-and-video.tsx
@@ -192,7 +192,7 @@ 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>
+<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>
 
@@ -204,7 +204,7 @@ auditory information.</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>
+  <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>
 
     </div>

diff --git a/apps/docs/src/common/pages/accessibility/colour-and-contrast.tsx b/apps/docs/src/common/pages/accessibility/colour-and-contrast.tsx
@@ -142,7 +142,7 @@ const Page: FC<PageProps> = ({ location }) => (
 
 <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>
+  <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>
 
     </div>

diff --git a/apps/docs/src/common/pages/accessibility/error-messages.tsx b/apps/docs/src/common/pages/accessibility/error-messages.tsx
@@ -198,10 +198,10 @@ You should place keyboard and visual focus at the summary to alert screen reader
     <div className="govuk-error-summary__body">
       <ul className="govuk-list govuk-error-summary__list">
         <li>
-          <a href="#passport-issued-day">The date your passport was issued must be in the past</a>
+          <A href="#passport-issued-day">The date your passport was issued must be in the past</A>
         </li>
         <li>
-          <a href="#postcode-input">Enter a postcode, like AA1 1AA</a>
+          <A href="#postcode-input">Enter a postcode, like AA1 1AA</A>
         </li>
       </ul>
     </div>
@@ -254,7 +254,7 @@ You should place keyboard and visual focus at the summary to alert screen reader
 
 <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>
+  <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>
 
     </div>

diff --git a/apps/docs/src/common/pages/accessibility/forms/keyboard.tsx b/apps/docs/src/common/pages/accessibility/forms/keyboard.tsx
@@ -39,7 +39,7 @@ const Page: FC<PageProps> = ({ location }) => (
       <li>use native components or components from the GOV.UK or Home Office design systems wherever possible as they come with expected keyboard functionality built-in</li>
       <li>test that your component works as expected</li>
       <li>use hint text to explain how complex controls work</li>
-      <li>make sure <a href="/../accessibility/keyboard/focus">focus is visible and in the correct order</a></li>
+      <li>make sure <A href="/../accessibility/keyboard/focus">focus is visible and in the correct order</A></li>
       </ul>
 
       <p>Do not:</p>
@@ -76,7 +76,7 @@ const Page: FC<PageProps> = ({ location }) => (
     <h2>Other considerations</h2>
 
     <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>
+    <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>

diff --git a/apps/docs/src/common/pages/accessibility/headings.tsx b/apps/docs/src/common/pages/accessibility/headings.tsx
@@ -119,7 +119,7 @@ Headings are defined by using <code>&lt;h&gt;</code> tags which come in the form
 
 <p>Similarly, if part of your content works as a heading (for example, to head up content blocks in the footer, or in a sidebar list of related links) then you must use the correct HTML code as well as any visual styling. If you don’t, a screen reader will not recognise this as a heading and the user may miss it.</p>
 
-<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>
+<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>

diff --git a/apps/docs/src/common/pages/accessibility/inclusive-language.tsx b/apps/docs/src/common/pages/accessibility/inclusive-language.tsx
@@ -46,7 +46,7 @@ const Page: FC<PageProps> = ({ location }) => (
         <li>use age-related descriptors like ‘young’ or ‘old’ - use specific age ranges, such as ‘18-24’ or ‘over 65’ </li>
         </ul>
         <h3>Disability</h3>
-        <p>As well as following our <a href="https://ukhomeoffice.github.io/accessibility-posters/">accessible design principles</a>, you should consider how your language is inclusive to people who face different barriers to accessing services.</p>
+        <p>As well as following our <A href="https://ukhomeoffice.github.io/accessibility-posters/">accessible design principles</A>, you should consider how your language is inclusive to people who face different barriers to accessing services.</p>
           <p>Do:</p>
           <ul>
           <li>clearly signpost users to alternative methods of accessing the service and get support if needed</li>

diff --git a/apps/docs/src/common/pages/accessibility/keyboard.tsx b/apps/docs/src/common/pages/accessibility/keyboard.tsx
@@ -50,7 +50,7 @@ const Page: FC<PageProps> = ({ location }) => (
         <li>trap keyboard users in content that stops them moving around the rest of the page</li>
         <li>use single character key shortcuts</li>
         </ul>
-        <p>See more in <a href="https://www.w3.org/WAI/test-evaluate/preliminary/#interaction">WCAG basics easy keyboard checks</a>.</p>
+        <p>See more in <A href="https://www.w3.org/WAI/test-evaluate/preliminary/#interaction">WCAG basics easy keyboard checks</A>.</p>
       <table className="govuk-table">
         <caption className="govuk-table__caption govuk-table__caption--l">Examples of users with access needs</caption>
         <thead className="govuk-table__head">
@@ -94,11 +94,11 @@ const Page: FC<PageProps> = ({ location }) => (
 
 <p>To create good accessibility via keyboard, you need to consider the following:</p>
 <ul>
-<li><a href="/accessibility/keyboard/tab-navigation">tab navigation</a></li>
-<li><a href="/accessibility/keyboard/focus">focus</a></li>
-<li><a href="/accessibility/keyboard/skip-to-content">‘skip to content’ links</a></li>
-<li><a href="/accessibility/keyboard/character-key-shortcuts">character key shortcuts</a></li>
-<li><a href="/accessibility/keyboard/pointer-gestures">pointer gestures</a></li>
+<li><A href="/accessibility/keyboard/tab-navigation">tab navigation</A></li>
+<li><A href="/accessibility/keyboard/focus">focus</A></li>
+<li><A href="/accessibility/keyboard/skip-to-content">‘skip to content’ links</A></li>
+<li><A href="/accessibility/keyboard/character-key-shortcuts">character key shortcuts</A></li>
+<li><A href="/accessibility/keyboard/pointer-gestures">pointer gestures</A></li>
 </ul>
 
 

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
@@ -36,11 +36,11 @@ const Page: FC<PageProps> = ({ location }) => (
       <li>look into remapping them so that they use two or more concurrent key presses OR</li>
       <li>disable the character key shortcuts if they do not bring value to the content</li>
       </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>
+      <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>
+  <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>
 
     </div>

diff --git a/apps/docs/src/common/pages/accessibility/keyboard/focus.tsx b/apps/docs/src/common/pages/accessibility/keyboard/focus.tsx
@@ -61,13 +61,13 @@ const Page: FC<PageProps> = ({ location }) => (
       <br />
       <p>This logout example shows bad focus indication. A thin blue line surrounds the selected button. This can be hard to tell apart from the already blue button, especially if the element is small.</p>
       <p>A user would not immediately be able to pick this out as the focused element on a busy page.</p>
-      <p>When developing a service, setting a highly visible focus style effects many users. The default browser style is not sufficient to meet <a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html">WCAG requirements for focus visibility</a>.</p>
+      <p>When developing a service, setting a highly visible focus style effects many users. The default browser style is not sufficient to meet <A href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html">WCAG requirements for focus visibility</A>.</p>
 
       <h2>Focus order</h2>
       <p>Keyboard users move through a page using a set range of navigation orders. It is not as easy to freely move about the page as it is with a mouse.</p>
       <p>This means your content should be in a sensible order - normally left to right, top to bottom.</p>
       <p>When you’re testing with the tab key, make sure that all interactive elements are selected and that you’re moving through the page in what you think is a sensible order. Your focus should not be jumping around the page.</p>
-      <p>When implementing <a href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html">modal dialogs</a>, the focus order should be contained within the window until the user closes or dismisses it.</p>
+      <p>When implementing <A href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html">modal dialogs</A>, the focus order should be contained within the window until the user closes or dismisses it.</p>
 
       <h3>Good example</h3>
       <div className="govuk-grid-row">
@@ -86,7 +86,7 @@ const Page: FC<PageProps> = ({ location }) => (
       </div>
       <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>
+      <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>

diff --git a/apps/docs/src/common/pages/accessibility/keyboard/pointer-gestures.tsx b/apps/docs/src/common/pages/accessibility/keyboard/pointer-gestures.tsx
@@ -27,7 +27,7 @@ const Page: FC<PageProps> = ({ location }) => (
       </h1>
       <p>Pointer gestures or path-based gestures are common elements of a website. You may be familiar with elements such as volume sliders, image carousels and swiping content. Each of these elements are controlled by clicking and dragging the content with a mouse in a given direction or a long a given path.</p>
       <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>
+      <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>

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
@@ -36,7 +36,7 @@ const Page: FC<PageProps> = ({ location }) => (
       </div>
 
       <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>
+      <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>

diff --git a/apps/docs/src/common/pages/accessibility/keyboard/tab-navigation.tsx b/apps/docs/src/common/pages/accessibility/keyboard/tab-navigation.tsx
@@ -29,7 +29,7 @@ const Page: FC<PageProps> = ({ location }) => (
         Tab navigation
       </h1>
       <p>A quick and easy way to test a common use of keyboard navigation is to use the tab key on your keyboard.</p>
-      <p>WebAIM has a useful list of <a href="https://webaim.org/techniques/keyboard/">common keyboard controls</a>.</p>
+      <p>WebAIM has a useful list of <A href="https://webaim.org/techniques/keyboard/">common keyboard controls</A>.</p>
       <div className="govuk-grid-row">
       <div className="govuk-grid-column-one-quarter">
         <img src={tabImage01} alt="Image of tab key" className="image-examples" />
@@ -55,7 +55,7 @@ const Page: FC<PageProps> = ({ location }) => (
       <p>The link information found in the bottom left corner can give you an idea of whether the element is selected – for instance in this image of GOV.UK, you can see where the link would take you to.</p>
       <p>Focusing on an interactive elements should not initiate a change such as submitting a form or changing focus to another interactive component.</p>
       <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>
+      <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>
 
 
 

diff --git a/apps/docs/src/common/pages/accessibility/layout-typography.tsx b/apps/docs/src/common/pages/accessibility/layout-typography.tsx
@@ -117,7 +117,7 @@ const Page: FC<PageProps> = ({ location }) => (
 
 <p>The page title, which appears in the browser tab, is vital for user navigation, and should always be unique. We recommend you use a format of ‘page – service – site’ for title text, for example ‘Enter your address – Apply for a passport – GOV.UK’.  </p>
 
-<p>Clear headings are important to help users find content within a page – see the <a href="/accessibility/headings">headings guidance</a> for more detail. You can also use <a href="/accessibility/keyboard/skip-to-content">skip links</a> to help keyboard users bypass repeated blocks of content.   </p>
+<p>Clear headings are important to help users find content within a page – see the <A href="/accessibility/headings">headings guidance</A> for more detail. You can also use <A href="/accessibility/keyboard/skip-to-content">skip links</A> to help keyboard users bypass repeated blocks of content.   </p>
 
 <p>Don’t capitalise every word in a title – it's easier for users to read ‘sentence case’, where only the first letter of the sentence is capitalised</p>
 <p>As well as headings, screenreader users can also use extra navigation functions such as landmarks to navigate within a page. </p>

diff --git a/apps/docs/src/common/pages/accessibility/navigation.tsx b/apps/docs/src/common/pages/accessibility/navigation.tsx
@@ -104,13 +104,13 @@ const Page: FC<PageProps> = ({ location }) => (
 <div className="govuk-breadcrumbs">
   <ol className="govuk-breadcrumbs__list">
     <li className="govuk-breadcrumbs__list-item">
-      <a className="govuk-breadcrumbs__link" href="#">Home</a>
+      <A className="govuk-breadcrumbs__link" href="#">Home</A>
     </li>
     <li className="govuk-breadcrumbs__list-item">
-      <a className="govuk-breadcrumbs__link" href="#">Passports, travel and living abroad</a>
+      <A className="govuk-breadcrumbs__link" href="#">Passports, travel and living abroad</A>
     </li>
     <li className="govuk-breadcrumbs__list-item">
-      <a className="govuk-breadcrumbs__link" href="#">Travel abroad</a>
+      <A className="govuk-breadcrumbs__link" href="#">Travel abroad</A>
     </li>
   </ol>
 </div>

diff --git a/apps/docs/src/common/pages/accessibility/readability.tsx b/apps/docs/src/common/pages/accessibility/readability.tsx
@@ -107,7 +107,7 @@ const Page: FC<PageProps> = ({ location }) => (
 <h3>Keep it simple</h3>
 
 <p>Follow the <A href="https://www.gov.uk/guidance/content-design/writing-for-gov-uk">GOV.UK best practice guidance</A> for writing content. Usually we recommend writing for a maximum reading age of 9, even if you are writing for a specialist audience. </p>
-<p>Microsoft Word has a reading-age checker within the spellcheck function (see following image) – there will be a score at the end of the checker, which you can interpret with a <A href="https://readable.com/readability/flesch-reading-ease-flesch-kincaid-grade-level/">conversion table</A>. See more <a href="#tools">readability tools</a> below.</p>
+<p>Microsoft Word has a reading-age checker within the spellcheck function (see following image) – there will be a score at the end of the checker, which you can interpret with a <A href="https://readable.com/readability/flesch-reading-ease-flesch-kincaid-grade-level/">conversion table</A>. See more <A href="#tools">readability tools</A> below.</p>
 
 <div className="govuk-grid-row">
 <div className="govuk-grid-column-two-thirds">

diff --git a/apps/docs/src/common/pages/accessibility/resources.tsx b/apps/docs/src/common/pages/accessibility/resources.tsx
@@ -64,7 +64,7 @@ const Page: FC<PageProps> = ({ location }) => (
 
     <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>
+      <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>
 
     </div>