Staging Review finding: Appointment details title different from h1

Need help? Please review how to read a Staging Review ticket. Tag @platform-governance-team-members on Slack if you need further assistance.

Product Information

Team: Appointments FE Team Product: Appointments Feature: Medication Review

Findings details

VA.gov Experience Standard - issue: User can't determine where a page is within the VA.gov website. VA.gov Experience Standard - category: Findability Launch-blocking: No Design System review: No Collab Cycle Reviewer: @erinrwhite (IA)

Description

On appointment details pages, the is <code>[Type of] appointment on [date] | Veterans Affairs</code>, but the H1s on these pages are, <code>Type of appointment</code>.</p> <details><summary>Link, screenshot or steps to recreate</summary> <img width="261" alt="Screenshot 2024-08-26 at 11 07 46 AM" src="https://github.com/user-attachments/assets/0b304693-ed7f-4f80-b2ca-b137a392fa53"> </details> <h2>Recommended action</h2> <p>The first part of the<title> tag before | Veterans Affairs should match the text in the H1 on the page. See <a rel="noreferrer nofollow" target="_blank" href="https://design.va.gov/content-style-guide/title-tags">guidance on title tags</a> for more details.</p> <h2>References</h2> <ul> <li><strong>Accessibility Defect Severity:</strong> N/A</li> <li><strong>WCAG Success Criteria:</strong> N/A</li> <li><strong>Modality:</strong> N/A</li> <li><strong>Design System Component:</strong> N/A</li> <li><strong>Design System Pattern or Template:</strong> N/A</li> <li><strong>Design System Foundation:</strong> N/A</li> <li><strong>Content Style Guide:</strong> <a rel="noreferrer nofollow" target="_blank" href="https://design.va.gov/content-style-guide/page-titles-and-section-titles">Page titles and section titles</a></li> <li><strong>Context:</strong> N/A</li> </ul> <hr /> <h3>Next Steps for the VFS Team</h3> <ul> <li>[ ] <strong>Questions?</strong> For the most timely response, comment on Slack in your team channel tagging <code>@platform-governance-team-members</code> with any questions or to get help validating the issue.</li> <li>[ ] <strong>Ticket ownership:</strong> If you believe that this issue is out of scope, not your team's responsibility, or a Design System issue, comment and tag <code>@platform-governance-team-members</code> on your team channel in Slack to provide an explanation and who you believe is responsible. The Governance team will follow up.</li> <li>[ ] <strong>Close this ticket</strong> when the issue has been resolved or validated by your Product Owner.</li> </ul> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/outerpress"><img src="https://avatars.githubusercontent.com/u/2536801?v=4" />outerpress</a> commented <strong> 2 weeks ago</strong> </div> <div class="markdown-body"> <p>Note: I originally dropped this in the wrong ticket, moving here</p> <hr /> <p>Hi @erinrwhite ! Sorry for the screed; a lot of background on our page headings/titles follows. I wanted to capture this in one spot since questions about this come up a lot, and this will hopefully get us toward a better solution (I dropped some options at the bottom). </p> <h3>What we’re trying to solve</h3> <p>Veterans identify/differentiate their appointments primarily by looking at what each appointment is for, and when it is. </p> <p>For example, if one has four mental health appointments in a month, they could easily differentiate them from an upcoming primary care appointment by the date, and comparing the type of care. </p> <p>However, we aren’t able to display type of care data for many appointments. So for the details pages we use status (past, canceled), modality (i.e. “In-person appointment” or “Canceled request”), and date in the title. Here’s what that looks like in the browser history:</p> <img width="779" src="https://api.zenhub.com/attachedFiles/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBK0dhQmc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--fd46db785af271a4e5e00362704766c8fa916012/Screenshot%202024-08-29%20at%208.33.22%E2%80%AFAM.png" alt="Screenshot 2024-08-29 at 8.33.22 AM.png" /> <p>For the H1 on the details page, we use just status, modality and whether it’s an appt or request. The date of the appointment follows in the appt data below that.</p> <p>The feedback is to make the title and heading the same. Before we get there, here’s some guidance we’ve looked at to get us to the current iteration:</p> <h3>H1’s/titles should be unique</h3> <p>Previously, we used only date and time as the heading. This is technically unique but this turns the browser history/open tabs into a list of dates, which aren't descriptive of the page you want and don't help identify the appointments.</p> <p>When we worked through the redesign, we discussed this issue with accessibility SMEs and they agreed that multiple tabs named only with a date wouldn’t be helpful. Uniqueness is an a11y best practice, not a hard requirement - a descriptive title is the main goal.</p> <h3>Headings should clearly and quickly tell people the main purpose of the page—what they can do or what information they can get on that page.</h3> <p><a href="https://design.va.gov/content-style-guide/page-titles-and-section-titles">From the content guidelines.</a></p> <p>Without type of care data, we do this by telling users the status (past, canceled), whether it’s an appointment or request, and how they will attend it. </p> <h3>H1’s/titles should not contain PHI/PII</h3> <p>This is a new requirement. I think it’s mainly because this data shouldn’t be exposed in Google Analytics, but there might be other reasons. Given this, even if we had type of care data, we likely shouldn’t use it in the browser title to avoid issues with exposing PHI/PII in our analytics. (I’d argue that we should still use it as page title, but that’s a future that might never exist so I’ll leave that alone.)</p> <h3>Try to keep page titles to 52 characters maximum, with spaces. </h3> <p>If we included the date and time in the H1, it would often go over this limit I believe it would be difficult to read an understand.</p> <p>For example, this is 60 characters:</p> <p><code>In-person appointment on December 5th, 2024 at 5:00 p.m. ET</code></p> <p>More important, this is a lot of information for someone to parse out from a heading: </p> <img width="493" src="https://api.zenhub.com/attachedFiles/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBK09hQmc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--e9bd92badb7c5061533eb053fe75a884c6c841b7/Wednesday%2C.png" alt="Wednesday,.png" /> <p>That's why we broke out date and time info during the redesign, to make the page easier to scan and understand.</p> <h3>Possible solutions</h3> <p>If we’re trying to match the title to the h1 we could:</p> <h4>Include the date in the H1</h4> <p>I wouldn’t do this just because it’s too much information for the heading.</p> <h4>Use just the date as H1 and Title</h4> <p>I’d argue against this one too, since date alone isn’t descriptive of the page or its purpose.</p> <h4>Show only status and modality in the title tag</h4> <p>This could work, but if I was looking through my history for mental health appointments I’ve had in a given month, I would have no way of distinguishing them. They would just be listed as: </p> <pre><code>Past video appointment Past video appointment Past video appointment Past video appointment</code></pre> <h4>Other ideas?</h4> <p>I don't think any of these work better than what we have - open to other ideas! And thanks for reading this far :) </p> </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>

department-of-veterans-affairs / va.gov-team