Authenticated Experience | Disability Rating Nametag | [Other - Accessibility] Voice command software barrier for aria-label. (00.00.1)

shiragoodman commented 1 year ago

General Information

VFS team name

Authenticated Experience

VFS product name

Profile - Nametag

VFS feature name

Audit UX Improvements

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

No VA.gov Experience Standard for the issue found.

Issue Details

I'm not sure if this is something that changed in this iteration of work or if it's already in production and I missed it before. It's a very subtle issue that I happened to noticed when testing.

When a user has a disability rating that appears in the nametag at the top of the page, using voice command software I'm unable to successfully activate the link.

The link to view the disability rating has visible link text of "[percentage] service connected" and an aria-label of "View your [percentage] service connected disability rating."

A sighted voice command user will speak commands based on what's visible on screen and will never see the aria-label that's announced for screen reader users. So a voice command user who wants to follow that link will likely say "Click 100 percent service connected." Then the voice command software looks for any matches it can find on the page by searching the accessibility tree.

But when you give a link an aria-label, the aria-label takes priority over the visible link text in the accessibility tree. I believe the mismatch between the aria-label and what the voice command user is likely to say is causing this issue.

Additionally, we should remove the word "View" from the copy since it implies sight and use "review" instead.

Link, screenshot or steps to recreate

Example link markup:

<div ...>
     <dt class="vads-u-margin-right--0p5">
          Your disability rating:
     </dt>
     <dd>
          <a href="/disability/view-disability-rating/rating" aria-label="View your 100% service connected disability rating" class="vads-u-color--white" ...>
               <strong>100% service connected </strong>
               <i aria-hidden="true" ...></i>
          </a>
     </dd>
</div>

VA.gov Experience Standard

Category Number 00, Issue Number 00

Other References

Platform Recommendation

Two recommendations:

In the aria-label, change % to percent. Testing a few variations, it seems to match best with the word spelled out.
Rewrite either the aria-label or the visible text so they start with the same substring text. Some voice command software prioritizes the beginning of the text string when looking for matches. So when it's looking for "100 percent" and it's seeing "View your" it may not register the link as a match.

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.

joshkimux commented 1 year ago

Hi @aagosto90 , is this on y'alls radar to resolve? This would be the last a11y issue for y'all to resolve to hit a perfect score on the a11y health dashboard 🥳

BerniXiongA6 commented 1 year ago

Thanks @joshkimux it's on our radar now! We'll make sure to groom this on our team. cc: @mtcA6 @aagosto90

andaleliz commented 1 year ago

One other note - can we remove the word "View" from any of this, since it implies sight? We can use "review" instead.

mtcA6 commented 1 year ago

good call liz, i updated the copy of the ticket just so we don't miss your comment when we prioritize the work.

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