Merge pull request #2107 from nhsuk/remove-accessibility-same-page-pr…

…ofession-links

Remove same page profession links in accessibility section

CHANGELOG.md

@@ -1,5 +1,10 @@
 # NHS digital service manual Changelog
 
+## Unreleased
+
+:wrench: **Maintenance**
+- Remove same-page profession links from accessibility section
+
 ## 7.3.0 - 17 December 2024
 
 :wrench: **Maintenance**

app/views/accessibility/partials/ask-questions-at-the-start-of-the-project.njk

@@ -1,5 +1,4 @@
 <h2 id="ask-questions-at-the-start-of-the-project">Ask questions at the start of the project</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/product-and-delivery">Product and delivery</a></p>
 <p>Ask yourself:</p>
 <ul>
   <li>how your project will affect people with access needs</li>

app/views/accessibility/partials/avoid-accessibility-overlays-or-widgets.njk

@@ -1,6 +1,4 @@
 <h2 id="do-not-use-accessibility-overlays-or-widgets">Avoid accessibility widgets</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/design">Design</a>, <a href="/accessibility/development">Development</a></p>
-
 <p>Accessibility widgets are plugins that display as buttons, toolbars or overlays.</p>
 <p>The widgets let users adapt the display to make it easier to read the text or have it read out to them. Some widget providers claim they make your website accessible.</p>
 

app/views/accessibility/partials/check-autocomplete-in-forms.njk

@@ -1,5 +1,4 @@
 <h2 id="check-autocomplete-in-forms">Check autocomplete in forms</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/testing">Testing</a></p>
 <p>If you need information only from the person who is filling the form, make sure it has the autocomplete attribute.</p>
 <p>The <a href="https://www.w3.org/TR/html52/sec-forms.html#sec-autofill">W3C autofill table</a> tells you which attribute to use for each type of form field.</p>
 <p>If the form can be filled in for someone else, this isn't necessary.</p>

app/views/accessibility/partials/check-colour-contrast.njk

@@ -1,5 +1,4 @@
 <h2 id="check-colour-contrast">Check colour contrast</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/design">Design</a>, <a href="/accessibility/testing">Testing</a></p>
 <p>It's easier for people to read and interact with content if you use colours that contrast well. The NHS meets at least level AA for contrast and we aim for AAA where possible.</p>
 <p>Find out more about colour contrast in the <a href="/design-system/styles/colour#accessibility">accessibility section of the colour page</a> in the design system.</p>
 

app/views/accessibility/partials/check-flashes-and-animation.njk

@@ -1,5 +1,4 @@
 <h2 id="check-flashes-and-animation">Check flashes and animation</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/testing">Testing</a></p>
 <p>Make sure that users can pause, hide or stop anything that moves, blinks or scrolls automatically and lasts more than 5 seconds.</p>
 <p>Pages should not contain anything that flashes more than 3 times in any 1 second. Or the flash should be below the general flash and red flash thresholds.</p>
 <p>Read more about the <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html">3 flashes or below threshold</a> on the W3C website.</p>

app/views/accessibility/partials/check-keyboard-accessibility.njk

@@ -1,5 +1,4 @@
 <h2 id="check-keyboard-accessibility">Check keyboard accessibility</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/development">Development</a>, <a href="/accessibility/testing">Testing</a></p>
 <p>Keyboard accessibility is one of the most important parts of accessibility. It enables other input methods, including switches, speech input and screen readers.</p>
 <p>The starting point for keyboard accessibility is to use the correct HTML for links, buttons and form controls. Use <a href="/design-system/components">components from the service manual</a>, if you can. They've already been tested for keyboard accessibility.</p>
 

app/views/accessibility/partials/check-orientation-is-not-locked.njk

@@ -1,4 +1,3 @@
 <h2 id="check-orientation-is-not-locked">Check orientation is not locked</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/testing">Testing</a></p>
 <p>Use a mobile device and switch from portrait to landscape and back again. You should be able to see all the content and functionality.</p>
 

app/views/accessibility/partials/check-that-accessibility-is-done.njk

@@ -1,5 +1,4 @@
 <h2 id="check-that-accessibility-is-done">Check that accessibility is "done"</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/product-and-delivery">Product and delivery</a></p>
 <p>It's the product or delivery manager's responsibility to make sure that the product or service is accessible. In most cases it's a matter of making sure that the team is checking their work as they go along.</p>
 <p>If in doubt, <a href="#ask-questions-at-the-start-of-the-project">ask questions early</a>. The sooner you consider accessibility requirements, the easier it is.</p>
 

app/views/accessibility/partials/define-focus-styles.njk

@@ -1,5 +1,4 @@
 <h2 id="define-focus-styles">Define focus styles</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/design">Design</a></p>
 <p>Everyone should be able to access all interactive components with a keyboard or a similar device. It must be obvious to them which element or link is the current focus position on the page. The browser default is generally not good enough.</p>
 <p>Make sure that the focus is clearly visible. You can do this by adding something, like an outline or icon, or changing the colour of part of the component. <a href="#check-colour-contrast">Check the colour contrast</a>.</p>
 <p>We recommend <a href="/design-system/styles/focus-state">the focus state styles</a> in the service manual.</p>

app/views/accessibility/partials/define-page-structure.njk

@@ -1,5 +1,4 @@
 <h2 id="define-page-structure">Define page structure</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/design">Design</a>, <a href="/accessibility/testing">Testing</a></p>
 <p>You can help people who use assistive technologies understand the structure of the page and navigate it by including "landmarks" (hidden labels for sections of the page). Landmarks also help users looking at multiple pages skip repetitive sections.</p>
 <p>Use ARIA landmarks to identify the regions of a page.</p>
 

app/views/accessibility/partials/define-skip-links.njk

@@ -1,5 +1,4 @@
 <h2 id="define-skip-links">Define skip links</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/design">Design</a>, <a href="/accessibility/testing">Testing</a></p>
 <p>Use a skip link to help keyboard-only users skip to the main content on a page.</p>
 <p>Also add a skip link at the start of a long list of links or form fields (for example, over 20 checkboxes in a filter). This lets people who use keyboard-style access with a switch or head-wand skip to the end and avoid having to keep pressing the same key.</p>
 <p>Skip links can be invisible by default, but must be very visible when focused.</p>

app/views/accessibility/partials/discuss-any-custom-components.njk

@@ -1,5 +1,4 @@
 <h2 id="discuss-any-custom-components">Discuss any custom components</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/design">Design</a>, <a href="/accessibility/development">Development</a></p>
 <p>The <a href="/design-system/components">components in the service manual</a> are well tested and ready to use. Before you design a new component, please test an existing component and show that there's a clear need for something new.</p>
 <p>Discuss any new components with other members of your team. You need to make sure that:</p>
 <ul>

app/views/accessibility/partials/do-not-add-keyboard-shortcuts.njk

@@ -1,5 +1,4 @@
 <h2 id="do-not-add-keyboard-shortcuts">Do not add keyboard shortcuts</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/testing">Testing</a></p>
 <p>Do not use single letter keyboard shortcuts. (Gmail, for example, uses the "j" and "k" keys to move between emails.)</p>
 <p>Keyboard shortcuts which use single numbers, punctuation, lowercase letters, uppercase letters or symbol characters can interfere with voice input software.</p>
 

app/views/accessibility/partials/do-not-include-text-in-images.njk

@@ -1,5 +1,4 @@
 <h2 id="do-not-include-text-in-images">Do not include text in images</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/design">Design</a>, <a href="/accessibility/testing">Testing</a></p>
 <p>Users need as much information as possible in text format, so that they can adjust its size, spacing or formatting.</p>
 <p>Do not include text in graphical (raster) formats like PNG, JPEG or GIF. They do not work well when users zoom in. Instead put text in HTML (styled with CSS) or use SVG.</p>
 <p>This does not apply to logos.</p>

app/views/accessibility/partials/do-not-override-visible-labels.njk

@@ -1,4 +1,3 @@
 <h2 id="do-not-override-visible-labels">Do not override visible labels</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/testing">Testing</a></p>
 <p>Make sure that ARIA or HTML labels for buttons, links or anchors match or contain the same words as visible labels. That applies whether the visible label is in text or an image of text.</p>
 

app/views/accessibility/partials/do-not-play-audio-automatically.njk

@@ -1,4 +1,3 @@
 <h2 id="do-not-play-audio-automatically">Do not play audio automatically</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/testing">Testing</a></p>
 <p>Audio must not play automatically for more than 3 seconds. It makes it hard for people to hear their screen reader.</p>
 

app/views/accessibility/partials/do-not-rely-on-colour-or-position-alone.njk

@@ -1,5 +1,4 @@
 <h2 id="do-not-rely-on-colour-or-position-alone">Do not rely on colour or position alone</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/content">Content</a>, <a href="/accessibility/design">Design</a>, <a href="/accessibility/testing">Testing</a></p>
 <p>Do not rely on colour to convey meaning, for example, an instruction. To communicate with people who cannot see well or distinguish colours, you may need to:</p>
 <ul>
   <li>word things differently</li>

app/views/accessibility/partials/do-not-rely-on-motion-sensors.njk

@@ -1,5 +1,4 @@
 <h2 id="do-not-rely-on-motion-sensors">Do not rely on motion sensors</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/testing">Testing</a></p>
 <p>If you have any functionality that is triggered by device or user motion (like shaking or tilting), you must provide another way for users to activate it. For example, let the user press a button.</p>
 <p>Also make sure that users can disable motion actions.</p>
 

app/views/accessibility/partials/do-not-rely-on-touch-gestures.njk

@@ -1,5 +1,4 @@
 <h2 id="do-not-rely-on-touch-gestures">Do not rely on touch gestures</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/testing">Testing</a></p>
 <p>Do not rely on touch, even for interfaces designed for touch screens. You can use touch gestures but you need a standard fallback.</p>
 <p>For example, if you swipe between images, you also need a button that does the same thing for people using switch access or screen readers.</p>
 

app/views/accessibility/partials/do-not-trigger-pop-ups-by-hover-or-focus.njk

@@ -1,5 +1,4 @@
 <h2 id="do-not-trigger-pop-ups-by-hover-or-focus">Do not trigger pop-ups by hover or focus</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/testing">Testing</a></p>
 <p>Do not trigger additional content by mouse hover or keyboard focus. It causes problems for people using zoom or a screen magnifier.</p>
 <p>If you use 3rd party content which does this, make sure you give users a way to dismiss the content without moving the mouse or focus. For example, use the ESC key.</p>
 

app/views/accessibility/partials/do-not-use-onkeydown-or-onmousedown-for-links-and-buttons.njk

@@ -1,4 +1,3 @@
 <h2 id="do-not-use-onkeydown-or-onmousedown-for-links-and-buttons">Do not use "onkeydown" or "onmousedown" for links and buttons</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/testing">Testing</a></p>
 <p>For interactive elements, only trigger actions once the user takes their finger or pointer away from the activation target. This gives users a chance to cancel or avoid activating the trigger.</p>
 

app/views/accessibility/partials/for-small-or-specialist-user-groups-focus-on-testing-the-interface.njk

@@ -1,5 +1,4 @@
 <h2 id="for-small-or-specialist-user-groups-focus-on-testing-the-interface">For small or specialist user groups, focus on testing the interface</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/user-research">User research</a></p>
 <p>It can be difficult to find people in small or specialist target audiences who also have access needs. In that case, focus on testing the interface with people with access needs.</p>
 
 <details class="nhsuk-details">

app/views/accessibility/partials/give-users-time-to-read-and-act.njk

@@ -1,5 +1,4 @@
 <h2 id="give-users-time-to-read-and-act">Give users time to read and act</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/design">Design</a>, <a href="/accessibility/development">Development</a>, <a href="/accessibility/testing">Testing</a></p>
 <p>If you have set a time limit for inactivity (for example, on a multi-step form), make it at least 20 hours.</p>
 <p>If you use 3rd party content that has a time limit, it should warn users clearly how much time they have left and let them extend or turn off the time limit.</p>
 <p>There are exceptions to this when the time limit is essential, for  example, for an online test or real-time event.</p>

app/views/accessibility/partials/highlight-errors-in-forms.njk

@@ -1,5 +1,4 @@
 <h2 id="highlight-errors-in-forms">Highlight errors in forms</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/content">Content</a>, <a href="/accessibility/design">Design</a>, <a href="/accessibility/testing">Testing</a></p>
 <p>Make sure that error messages clearly describe what went wrong and how to fix the problem.</p>
 <p>Include an error message wherever there's a problem with the input and check that it's visibly obvious that the message is connected to that input.</p>
 <p>If you have an error summary at the top of a form, check that each error in the list has a link that moves the focus to the relevant form field. This helps users who rely on keyboard navigation.</p>

app/views/accessibility/partials/identify-target-groups-and-accessibility-challenges.njk

@@ -1,5 +1,4 @@
 <h2 id="identify-target-groups-and-accessibility-challenges">Identify target groups and accessibility challenges</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/user-research">User research</a></p>
 <p>In the discovery part of the project, you need to understand how it will affect people with access needs. Consider:</p>
 <ul>
   <li>whether it will cause particular accessibility challenges, for example for people who can't read text</li>

app/views/accessibility/partials/involve-people-with-access-needs-at-every-stage.njk

@@ -1,5 +1,4 @@
 <h2 id="involve-people-with-access-needs-at-every-stage">Involve people with access needs at every stage</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/user-research">User research</a></p>
 <p>In the UK, almost 1 in 5 people have a disability of some kind. Many more have a temporary impairment like an illness or injury. Try to include 1 person with access needs in every 5 people you research with.</p>
 <p>Involving people with access needs in user research doesn't just help identify accessibility issues. It shows up general issues that affect everyone.</p>
 

app/views/accessibility/partials/label-form-fields-clearly.njk

@@ -1,5 +1,4 @@
 <h2 id="label-form-fields-clearly">Label form fields clearly</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/content">Content</a>, <a href="/accessibility/design">Design</a>, <a href="/accessibility/testing">Testing</a></p>
 <p>Make sure that every form field has a label that tells users what information they need to enter.</p>
 
 <details class="nhsuk-details">

app/views/accessibility/partials/look-after-your-team.njk

@@ -1,5 +1,4 @@
 <h2 id="look-after-your-team">Look after your team</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/user-research">User research</a></p>
 <p>It's important that the team supports one another. User research in health can be tiring and emotional. Sometimes users might tell you stories that are hard to hear or you might see them struggle.</p>
 <p>It's OK to take some time out during a day of research or, as a user researcher, to ask for someone to stand in for you.</p>
 <p>Check in with your team mates during and after research and take time to reflect together.</p>

app/views/accessibility/partials/make-sure-everyone-knows-their-responsibilities.njk

@@ -1,4 +1,3 @@
 <h2 id="make-sure-everyone-knows-their-responsibilities">Make sure everyone knows their responsibilities</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/product-and-delivery">Product and delivery</a></p>
 <p>Make sure everyone in the team knows what they need to do and is checking their work, using the guidance for different activities.</p>
 <p>If a team member doesn't have a basic understanding already, help them <a href="/accessibility/getting-started">get started with accessibility</a>.</p>

app/views/accessibility/partials/make-sure-navigation-is-consistent.njk

@@ -1,5 +1,4 @@
 <h2 id="make-sure-navigation-is-consistent">Make sure navigation is consistent</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/testing">Testing</a></p>
 <p>Identify any navigational mechanisms (navigation bars, search fields, and skip links) that appear on multiple pages.</p>
 <p>Check that the links or buttons are presented in the same order each time they appear, even if other items are removed or added between them.</p>
 <p>If the navigation is defined by templates, you only need to check 1 or 2 pages.</p>

app/views/accessibility/partials/make-sure-your-service-meets-wcag-2-2.njk

@@ -1,6 +1,4 @@
 <h2 id="make-sure-your-service-meets-wcag-2-2">Make sure your service meets WCAG 2.2</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/design">Design</a>, <a href="/accessibility/development">Development</a>, <a href="/accessibility/product-and-delivery">Product and delivery</a>, <a href="/accessibility/testing">Testing</a></p>
-
 <p>
     <strong class="nhsuk-tag">
         WCAG 2.2

app/views/accessibility/partials/make-users-aware-of-status-updates-away-from-current-focus.njk

@@ -1,5 +1,4 @@
 <h2 id="make-users-aware-of-status-updates-away-from-current-focus">Make users aware of status updates away from current focus</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/testing">Testing</a></p>
 <p>Make screen reader users aware of important changes in content during an action in a way that does not interrupt their journey.</p>
 <p>If you need to let users know the results of an action (for example, updated search results or that they have successfully submitted a form), convey this information programmatically.</p>
 

app/views/accessibility/partials/make-video-and-other-multimedia-content-accessible.njk

@@ -1,5 +1,4 @@
 <h2 id="make-video-and-other-multimedia-content-accessible">Make video and other multimedia content accessible</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/content">Content</a>, <a href="/accessibility/design">Design</a>, <a href="/accessibility/development">Development</a>, <a href="/accessibility/testing">Testing</a></p>
 <p>Consider using video as well as text. Some people find it easier to understand.</p>
 <p>With all video and animation, make sure that:</p>
 <ul>

app/views/accessibility/partials/make-your-research-more-accessible-on-the-day.njk

@@ -1,5 +1,4 @@
 <h2 id="make-your-research-more-accessible-on-the-day">Make your research more accessible on the day</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/user-research">User research</a></p>
 <ul>
   <li>Meet people at the front door of the building and escort them to the room.</li>
   <li>Give them plenty of time to settle in. Tell them that they can end the session at any time or take a break during it if they need to. Leave enough time between sessions.</li>

app/views/accessibility/partials/monitor-and-record-your-work.njk

@@ -1,5 +1,4 @@
 <h2 id="monitor-and-record-your-work">Monitor and record your work</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/product-and-delivery">Product and delivery</a></p>
 <p>You must show that your team:</p>
 <ul>
   <li>has carried out accessibility tests at each stage of the project</li>

app/views/accessibility/partials/publish-an-accessibility-statement.njk

@@ -1,5 +1,4 @@
 <h2 id="publish-an-accessibility-statement">Publish an accessibility statement</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/product-and-delivery">Product and delivery</a></p>
 <p>All websites must have an accessibility statement, in line with with accessibility regulations. Read more about <a href="https://www.gov.uk/guidance/accessibility-requirements-for-public-sector-websites-and-apps">the accessibility requirements for public sector bodies on GOV.UK</a>.</p>
 <p>For the statement, you must test every area of your product or service and report on issues that people with access needs might face. You should have as few accessibility issues as possible. Following this accessibility guidance will help you with that.</p>
 <p>GOV.UK has published a <a href="https://www.gov.uk/government/publications/sample-accessibility-statement/sample-accessibility-statement-for-a-fictional-public-sector-website">sample accessibility statement</a>. You can see a live example on the <a href="https://your-data-matters.service.nhs.uk/accessibility-statement">NHS Your data matters service.</a></p>

app/views/accessibility/partials/recruit-people-with-access-needs.njk

@@ -1,6 +1,4 @@
 <h2 id="recruit-people-with-access-needs">Recruit people with access needs</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/user-research">User research</a></p>
-
 <h3>Recruitment agencies</h3>
 <p>Ask your agency to include people with access needs. If they say it's too hard or want to charge extra for this, get quotes from other recruiters. You should be able to find an agency that will recruit people with different needs at no extra cost.</p>
 
@@ -23,5 +21,4 @@
       <li>no hearing - you may need a sign language interpreter at the same time</li>
     </ul>
   </div>
-</details>
-
+</details>

app/views/accessibility/partials/run-technical-tests-for-accessibility-beforehand.njk

@@ -1,5 +1,4 @@
 <h2 id="run-technical-tests-for-accessibility-beforehand">Run technical tests for accessibility beforehand</h2>
-<p class="nhsuk-body-s">For: <a href="/accessibility/user-research">User research</a></p>
 <p>Check that the thing you're testing is technically accessible - for example, that it works for people who use screen readers or voice input.</p>
 <p>This applies to your survey software too. If you're using Qualtrics, as many user researchers do, be aware that it's not fully accessible.</p>