acteng / update-your-capital-schemes

Update your capital schemes service.
https://update-your-capital-schemes.activetravelengland.gov.uk/
MIT License
4 stars 0 forks source link

WCAG Level A: Page Titled #132

Closed markhobson closed 3 months ago

markhobson commented 3 months ago

High Priority WCAG Level A

Page Titled

Web pages did not have titles that described topic or purpose.

WCAG Reference:

2.4.2 Page Titled (Level A) Understanding Page Titled | How to Meet Page Titled

Issue ID: DAC_Page_Titled_01

URL: https://test.update-your-capital-schemes.activetravelengland.gov.uk/schemes Page title: 'Update your capital schemes - Active Travel England - GOV.UK' H1 heading: 'Your schemes' Journey: 1.1a

Screenshot: page-titled

On the 'Your schemes' page and subsequent pages in the service the page title remains the same throughout, failing to provide a unique and descriptive title for the page.

Whilst all users can benefit from unique and descriptive page titles, this particularly affects screen reader users as the page title is the first thing that screen readers announce on page load and is often the primary means for screen reader users to identify content and distinguish different pages to orientate themselves within the service.

Current code ref(s):

head > title

<title>
   Update your capital schemes - Active Travel England - GOV.UK
</title>

Screen reader user comments:

“When I activated the reference link there was no change in the page title. This is an issue as a screen reader user would be unaware that the page had changed, and they would remain unaware until they found the h1 which within its heading text gives full information of the page’s content. I feel that ensuring page titles change to reflect the content would eliminate any issues that at present may be encountered by a screen reader user navigating this area of the service.”

Examples of additional instances:

Additional instances of this issue may exist on other pages throughout the website; wherever this issue occurs, they too will need to be resolved.

Solution:

Ensure that page titles are descriptive of the topic or purpose of the page, and are unique within the service.

As detailed in GOV.UK Service Manual: Writing for user interfaces (Headings and )</a>, but which is explained in better detail in <a rel="noreferrer nofollow" target="_blank" href="https://design.tax.service.gov.uk/hmrc-design-patterns/page-title/">HMRC Design System: Page Title</a>, page titles should either follow the format:</p> <pre><code>H1 heading – service name – GOV.UK</code></pre> <p>Or, if content has been further divided into sections, it should also include the section name:</p> <pre><code>H1 heading – section name – service name – GOV.UK</code></pre> <p>Where the page title is 'front loaded' to place the most specific and relevant information first, to permit screen reader users to skip the rest of the page title announcement, once they have heard enough to orientate themselves within the service.</p> <h3>Example:</h3> <pre><code class="language-html"><title> Your schemes - Active Travel England - GOV.UK </title></code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/markhobson"><img src="https://avatars.githubusercontent.com/u/178443?v=4" />markhobson</a> commented <strong> 3 months ago</strong> </div> <div class="markdown-body"> <h2>Tasks</h2> <p>Using the suffix "Update your capital schemes - Active Travel England - GOV.UK", change page titles as follows:</p> <ul> <li>[x] <a href="https://test.update-your-capital-schemes.activetravelengland.gov.uk/schemes">Your schemes</a>: "Your schemes - ..."</li> <li>[x] <a href="https://test.update-your-capital-schemes.activetravelengland.gov.uk/schemes/64">Scheme</a>: "{scheme_name} - ..."</li> <li>[x] Scheme review error: "Error: {scheme_name} - ..."</li> <li>[x] <a href="https://test.update-your-capital-schemes.activetravelengland.gov.uk/schemes/64/spend-to-date">Change spend to date</a>: "Change spend to date - ..."</li> <li>[x] Change spend to date error: "Error: Change spend to date - ..."</li> <li>[x] <a href="https://test.update-your-capital-schemes.activetravelengland.gov.uk/schemes/64/milestones">Change milestone dates</a>: "Change milestone dates - ..."</li> <li>[x] Change milestone dates error: "Error: Change milestone dates - ..."</li> <li>[x] <a href="https://test.update-your-capital-schemes.activetravelengland.gov.uk/privacy">Privacy</a>: "Privacy notice - ..."</li> <li>[x] <a href="https://test.update-your-capital-schemes.activetravelengland.gov.uk/cookies">Cookies</a>: "Cookies - ..."</li> </ul> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>