[Markup and meta data] Name and role can't be programatically determined for UI components. (09.06.1)

shiragoodman commented 1 year ago

General Information

VFS team name

Benefits Team 1

VFS product name

Claim Status Tool

VFS feature name

Download Decision Letters

Point of Contact/Reviewers

Tiffany Pender - @TiffanyPender - Accessibility (Shared Support team)

*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

Name and role can't be programatically determined for UI components.

Issue Details

Navigation landmarks are not uniquely named. There are currently two areas with a role of "navigation" included on the page. The first has an ID of "vetnav" and the second is included as . Neither are uniquely named, and so for screen readers, they both display in the landmark rotor as "navigation". This makes it difficult for assistive technology users to distinguish between the two forms of navigation.

Link, screenshot or steps to recreate

VA.gov Experience Standard

Category Number 09, Issue Number 06

Other References

WCAG SC 4.1.2_A

Platform Recommendation

Include an aria-label attribute on the element with appropriate text to identify it as pagination. This will help screen readers to know the type of navigation it is.

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.

shiragoodman commented 1 year ago

@allison0034 please point this team to the DST bug ticket.

joshkimux commented 1 year ago

This is a great catch @TiffanyPender ⭐ I'll reach out to the sitewide folk to see if this is something they can handle as it's out of our control on benefits.

~~@laflannery , my goldfish memory thinks y'all on sitewide may already be aware of this issue! Do y'all have a ticket in place documenting it so we can close this one out?~~

Edit: vetnav id is referring to the primary navigation, which shouldn't need to be uniquely labelled if the pagination is labelled 😄

allison0034 commented 1 year ago

@TiffanyPender @joshkimux there is another bug with the pagination component so DST will be doing work on this. Please fill out a bug report ticket.

joshkimux commented 1 year ago

@coforma-terry could we enlist CAIA folk to:

double check if a ticket was made for this in the DS backlog and
if not, spin up a design system ticket for this?

I think Sara mentioned this as an issue she's noticed.

sara-amanda commented 1 year ago

cc: @joshkimux and @coforma-terry @TiffanyPender @allison0034 @briandeconinck

Related Tickets

Please see my notes in the comments of this ticket, relating to a similar issue: Accessibility Testing for CTO Health Team: MyHealtheVet on VA.gov: Landing Page #54863

In the comments I mention that @laflannery shared a historical ticket that is still open #34163
I cc:'d @briandeconinck with my comments re: unique ARIA labels and account-menu and how that issue relates to #54863.
I can note this issue in those comments as well.
@joshkimux I see that it is an open issue #34163 - it appears in the Icebox on this VFT Board

joshkimux commented 1 year ago

@sara-amanda thanks for rounding these up! You're the best ❤️ As for the icebox, that likely means it doesn't have an actual owner at the moment. I think we may need to spin up a formal bug issue for this in the vets-design-system-documentation repo if it's not already there (that way we (a) can close out some of these one off tickets or mark them as blocked and (b) place it in a space where a team will be able to pick it up)

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