[SCREENREADER]: ?? Review example PDF for accessibility

[lunascoop]

a11y CAIA Asignee(s)

• SK

  • • 508-defect-2

Feedback framework

• ❗️ Must for if the feedback must be applied
• ⚠️ Should if the feedback is best practice
• ✔️ Consider for suggestions/enhancements

Definition of done

1. Review and acknowledge feedback.
2. Fix and/or document decisions made.
3. Accessibility specialist will close ticket after reviewing documented decisions / validating fix.

Point of Contact

VFS Point of Contact: Selina @lunascoop

User Story or Problem Statement

As a Veteran, I need to know where to find my VA account number on my copay bill.

Details

The Sitewide Content team is adding verbiage to tell Veterans where they can find their account number on their copay bill, along with a PDF as an example. Can you review the PDF for accessibility? The PDF is just an example PDF to show where a Veteran might find their account number to pay their co-pay bill. It's not one they'd actually use.

Here's the PDF: https://www.pay.gov/FormServer/VAHRC/help/vahrc_examplestatement.pdf Related Github ticket: #19502

Acceptance Criteria

• [ ] All inputs have associated label elements
• [ ] Input labels are styled consistently

  Steps to Recreate

  Proposed Solution (if known)

  WCAG or Vendor Guidance (optional)

  Screenshots or Trace Logs

[1Copenut]

@lunascoop I took a look at this PDF, and there's a few issues with it. I'll divide my comment into automated scanning issues, and usability with a screen reader.

Automation

• The title is not set
• Several figures including the arrow and highlighted fields do not have alt text

Screen reader usability

• The text blocks are not in a left to right, top to bottom reading order
• The arrow and red outline on account number imply a spatial relationship, which could be difficult to understand for users who are blind

Suggested alternatives

• Rework the PDF to have a proper reading order. This will require access to the source file it was created from.
  • As part of this work, change the "This is where to find your VA account number" to more actionable text like "Click the down arrow or move forward to the next element to hear your account number read aloud"
  • Include a fictitious account number in the example PDF (I can understand if this is a non-starter)
• Use an image with descriptive text like the Profile 2.0 team did on the direct deposit check here: https://github.com/department-of-veterans-affairs/va.gov-team/issues/19611

Let me know if you have questions and we can discuss as needed. Thank you!

[joshkimux]

@coforma-terry for awareness

[RLHecht]

I left a comment in the original ticket for this work but as a general rule we aren't linking to outside PDFs anymore so we might address this in another way. I'll move this to the icebox for now.