[Assistive tech and device support] Pages require sensory characteristics to be understood or operable. (11.11.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

Pages require sensory characteristics to be understood or operable.

Issue Details

When viewing a message thread, the main element that contains the message metadata and message body has role="heading" aria-level="2" aria-label="Most recent message in this conversation" attributes set. The combination of those attributes tells screen readers that the main element isn't semantically a main but is instead an H2 heading with text "Most recent message..."

This results in some unusual behavior with multiple screen readers. In what I've tested:

• JAWS on Windows: Each line of the message metadata and each paragraph of the message body is announced, but is sometimes (but not always?) announced as an H2 heading
• NVDA on Windows: The main element is announced once as an H2 heading, and the message content inside the main is completely skipped over and never announced.
• VoiceOver on iOS: Each element inside the main is announced as an H2 heading, so you just hear "Heading level 2, Most recent message in this conversation" over and over.

I haven't tried multiple browser/screen reader combinations, but I suspect there's probably more variation happening there too.

Link, screenshot or steps to recreate

Steps to reproduce:

1. Log in with test user +263.
2. Activate NVDA on a Windows machine.
3. Navigate to message ID 1965394.
4. Have NVDA announce the full page ([Insert] + [Down arrow]).
5. Note that after the main "heading" is announced, NVDA skips directly to the "Back to top" button without ever announcing the message metadata or body.

Currently coded as:

<main class="message-detail-content" role="heading" aria-level="2" aria-label="Most recent message in this conversation">

VA.gov Experience Standard

Category Number 11, Issue Number 11

Other References

WCAG SC 1.3.3_A

Platform Recommendation

I like the intended heading structure, but I don't think this is the right way to implement it. A better option would be to use an h2 element and hide it visually, eg. <h2 class="sr-only">Most recent message in this conversation</h2>.

If that's not practical, then drop the heading semantics entirely and just use the aria-label on the main element. That pattern works fine when I test it, and is working fine on the section elements nested inside here for the message metadata and message body.

---

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.

[bryan-riley-va]

JIRA ticket created: https://jira.devops.va.gov/browse/MHV-45991

[AngelaFowler82]

JAWS and NVDA now read as expected. Closing as resolved.