[Link and button labels] Button and link language isn't descriptive and/or their purpose isn't clear. (08.03.1)

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

Button and link language isn't descriptive and/or their purpose isn't clear.

Issue Details

When viewing a list of messages (eg. /inbox/), the linked text for each message is the subject line. That makes sense, but it makes it possible for a user to have multiple message links with identical text.

Screen reader users often navigate the page by tabbing from link to link, or by having their screen reader announce a list of all of the links on the page and then jumping to the one that they're looking for. When hearing link text like this without the surrounding context, it's not possible to distinguish between the links.

Link, screenshot or steps to recreate

VA.gov Experience Standard

Category Number 08, Issue Number 03

Other References

WCAG SC 2.4.4_A

Platform Recommendation

Each link should have a unique accessible name. Given that these are user-generated message subjects, that's probably not possible. But I think the most useful thing here would be to associate the message timestamp with the link via aria-describedby. That way, screen reader users would get some helpful context for the message when they tab to the link. Something like:

<div class="vads-l-col vads-u-margin-left--1">
     <div class="vads-u-margin-y--0p5">
          ... 
     </div>
     <a class="message-subject-link vads-u-margin-y--0p5" href="/my-health/secure-messages/thread/1965394" aria-describedby="some-unique-id">General: Hydration</a>
     <p id="some-unique-id" class="received-date vads-u-margin-y--0p5"><span>June 10, 2021 at 5:12 p.m. CDT</span></p>
</div>

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.

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