[Content organization] Your page doesn't follow heading hierarchy. Headings aren't properly nested, and headings and/or labels aren't relevant to the page. (02.04.1)

[shiragoodman]

General Information

VFS team name

MHV

VFS product name

My HealtheVet

VFS feature name

Secure Messaging

Point of Contact/Reviewers

Brian DeConinck - @briandeconinck - Accessibility

*For more information on how to interpret this ticket, please refer to the Anatomy of a Staging Review issue ticket guidance on Platform Website.

---

Platform Issue

Your page doesn't follow heading hierarchy. Headings aren't properly nested, and headings and/or labels aren't relevant to the page.

Issue Details

On the /secure-messages/compose interstitial page, the content starting with "Your care team" and ending with the "Continue to start message" link is wrapped in a div with role="heading" aria-level="2". That's indicating to screen reader users that most of the content of the page should be interpreted as a single H2 heading --- which I don't think is the intention here.

Link, screenshot or steps to recreate

As currently coded:

<main class="interstitial-page">
        <h1>Only use messages for <span class="no-word-wrap">non-urgent</span> needs</h1>
        <div role="heading" aria-level="2">
                <p>Your care team may take up to <strong>3 business days</strong> to reply.</p>
                <p>If you need help sooner, use one of these urgent communication options:</p>
                <ul>
                        <li><p><strong>If you’re in crisis or having thoughts of suicide, </strong> connect with our Veterans Crisis Line. We offer confidential support anytime, day or night.</p><va-button secondary="" text="Connect with the Veterans Crisis Line" class="hydrated"></va-button></li>
                        <li><p><strong>If you think your life or health is in danger, </strong> call <va-telephone contact="911" class="hydrated"></va-telephone> or go to the nearest emergency room.</p></li>
                </ul>
                <a class="vads-c-action-link--green vads-u-margin-top--1 link" tabindex="0" role="button" data-testid="continue-button">Continue to start message</a>
        </div>
</main>

VA.gov Experience Standard

Category Number 02, Issue Number 04

Other References

WCAG SC 1.3.1_A
WCAG SC 2.4.6_AA

Platform Recommendation

I don't think the heading role or aria-level get you anything here, and if it was intentional I'd be curious to understand the thought process. My recommendation would be to remove those attributes entirely and look for another solution to whatever the intention here was.

---

VFS Guidance

• Close the ticket when the issue has been resolved or validated by your Product Owner
• If your team has additional questions or needs Platform help validating the issue, please comment on the ticket
• Some feedback provided may be out of scope for your iteration of the product, however, Platform's OCTO leadership has stated that all identified issues need to be documented and it is still your responsibility to resolve the issue.
• If you do not believe that this Staging Review issue ticket is the responsibility of your team, comment below providing an explanation and who you believe is responsible. Please tag the Point of Contact/Reviewers. Governance team will research and will follow up.

[lichellebain]

Jira ticket created: https://jira.devops.va.gov/browse/MHV-46058

[vsaleem]

Good morning! @shiragoodman @AngelaFowler82 @sara-amanda -- Same thing for this ticket... This issue has been implemented by our team and is now in the staging environment. Can we please have some help with this accessibility testing to see if this is an issue?

[AngelaFowler82]

Is this the page I'm supposed to be looking at? It doesn't look like there's anything here except the nav with the list of folders and such.

[sara-amanda]

CAIA Note

Page for Testing

@AngelaFowler82 I agree, it looks like /compose presents only a left-hand navigation (pictured in this comment below).

• I am thinking the URL may have changed at some point between this ticket and now in staging?
• I was able to get to a compose-like page by clicking on:continue to start a new message in the body of the page.
  • This took me to: https://staging.va.gov/my-health/secure-messages/new-message/
• To that end, there doesn't appear to be another way to compose in the menu, only on the messages and inbox page.
  • As an aside: The continue to start a new message button only shows on: https://staging.va.gov/my-health/secure-messages/new-message/ which I don't see in the navigation. The navigation highlights inbox but if inbox is selected the URL changes to: https://staging.va.gov/my-health/secure-messages/inbox/
• It is coded: <div role="heading" aria-level="2">

---

**Image 1:** Pictured below is the content on the /compose URL, which has no page body

Image 2: Pictured below is the /secure-messages/new-message/ page that contains a body to start a message.

Image 3: Pictured below is what renders on this url: https://staging.va.gov/my-health/secure-messages/new-message/ the page shows inbox highlighted in the left navigation, but if the inbox is clicked you are taken to a new URL: https://staging.va.gov/my-health/secure-messages/inbox/ The non-navigation linked page reads as follows:

Only use messages for non-urgent needs
Your care team may take up to 3 business days to reply.

If you need help sooner, use one of these urgent communication options:

If you’re in crisis or having thoughts of suicide, connect with our Veterans Crisis Line. We offer confidential support anytime, day or night.

Connect with the Veterans Crisis Line (modal appears upon clicking)
If you think your life or health is in danger, call 911 or go to the nearest emergency room.

Continue to start message