[A11y]: VA Forms System Core [Demo Content]: Link text is not descriptive

AngelaFowler82 commented 2 years ago

Point of contact

Angela Fowler

Severity level

2, Serious. Should be fixed in 1-2 sprints post-launch.

Details

...

User Story or Problem Statement

As a screen reader user, I should be able to navigate the content of the page and understand link context. The link text that appears in my screen reader rotor or element list should convey the link purpose for each available link.

Details

Currently, Step 10: Review Your Application includes EDIT links for each form step summary. For screen reader users, it can be difficult to determine what form section the EDIT link is associated with since they all display the same text.

Acceptance Criteria

[ ] Each EDIT link provides aria-label text informing screen reader users of the related section

Environment

macOS Monterey, <Version 12.4>
Chrome, <Version 102.0.5005.61>
VoiceOver
Staging

...

Steps to Recreate

Enter https://staging.va.gov/burial-poc-v6/ in browser address bar
Navigate to Step 10: Review Your Application
Verify that there are repetitive EDIT links on the page that provide no context to screen readers as to which section they will be editing upon click

Proposed Solution (if known)

Add in additional text for screen readers to indicate which section the EDIT link is referring to. This can be achieved with an aria-label attribute (see example below).

Example:


<h2 id=”veteran-information-burial”>Deceased Veteran Information</h2>

<a …. aria-label=”Edit Deceased Veteran Information”>Edit</a>

...

WCAG or Vendor Guidance (optional)

2.4.4 - Link Purpose

Screenshots or Trace Logs

Type of issue

[X] Screenreader
[ ] Keyboard
[ ] Focus
[ ] Headings
[ ] Color
[ ] Zoom
[ ] Semantics
[ ] Axe-core
[ ] Something else

obliviga commented 2 years ago

The aria-label attribute needs to be added to the Link component inside src/form-data/ReviewPage.tsx.

obliviga commented 2 years ago

This issue will be addressed in the following PR: https://github.com/department-of-veterans-affairs/va-forms-system-core/pull/565

obliviga commented 2 years ago

Verified fix has been deployed to the main branch.

department-of-veterans-affairs / va-forms-system-core