[a11y-defect-2]: Benefit Letter download buttons must have unique text

[1Copenut]

Point of contact

Trevor Pierce

Severity level

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

Details

All the Benefit Letters download buttons say "Download letter" This doesn't give context to what letter and could be problematic for screen reader users. If a screen reader user has all accordions open and is viewing their Form Controls menu, they'll hear "Download letter, button" repeated multiple times. This can cause a significant cognitive load. Screenshot attached.

---

Reproduction steps

1. Log into https://staging.va.gov/records/download-va-letters/letters/letter-list with a test user. I used 54.
2. Turn on the screen reader of your choosing
3. Expand an accordion and set focus on the download button
4. Verify the screen reader announces "Download letter, button"
5. Repeat steps 3 and 4 on another accordion

Proposed solution or next steps

I'd like to suggest making each button name unique and reference the letter in the accordion heading. This will need some design and/or content help as some of the names are very long.

Solution: Update the button to show the type of the letter being downloaded, followed by the format of the file in parenthesis. Example: Proof of Service Letter (PDF)

References, articles, or WCAG support

1. Understanding SC 2.4.4: Link Purpose (In Context) (Level A)
2. Understanding SC 1.3.1: Info and Relationships (Level A)

Type of issue

• Axe-core
• Screenreader | assistive tech & device support
• Keyboard
• Zoom
• Color, typography, & visual elements
• Components and pattern standards
• Content organization
• Focus
• Headings
• Content style guide
• Link and button labels
• Semantic HTML
• Markup and metadata
• Non-text content and media
• Overall user experience
• Cognitive | user flows & navigating
• URL standards
• Something else

[dysbo]

We would like content/design guidance on what we should be putting into these buttons.

[rallencf]

I suggest that each "Download letter" button uses the text of the document title and specifies the file type. For example:

Commissary Letter (PDF)
Proof of Service Letter (PDF)

@dysbo My IA/content review of the benefit letter pages will conclude with additional suggested edits on this page. I mention this in case you want to wait to implement this update to do it with the other updates.

[dysbo]

@rallencf Are you suggesting to remove the word "Download" as well? Or would the full button text read "Download Commissary Letter (PDF)"? Just to make sure I am clear :)

[rallencf]

@dysbo Yes, suggest removing "download."