search

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

Public resources for building on and in support of VA.gov. Visit complete Knowledge Hub:
https://depo-platform-documentation.scrollhelp.site/index.html
283 stars 204 forks source link

[a11y-defect-2]: Benefit letter accordion headings must be nested properly for semantic and visual hierarchy #96355

Open 1Copenut opened 4 days ago

1Copenut commented 4 days ago

Point of contact

Trevor Pierce

Severity level

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

Details

The VA Documents and Letters has an accordion "Benefit Summary and Service Verification Letter" that has several improperly nested headings inside it. This can cause issues for screen reader users and users who rely on headings' size and proximity to content. Screenshot attached.

Image

Reproduction steps

  1. Log into https://staging.va.gov/records/download-va-letters/letters/letter-list with a test user who has the right letters. I tested with user 54.
  2. Expand the "Benefit Summary and Service Verification Letter" accordion
  3. Verify visually and using DevTools that headings are nested improperly
  4. If you want to hear headings out of order, start a screen reader and traverse through by headings. If you're using VoiceOver, press Ctrl + Opt + Cmd + H to move by headings or if you're using JAWS/NVDA, press the h key.

Proposed solution or next steps

Headings need to be marked up properly, nested as H4s and H5s respectively. There's also a question of the visual design where subordinate headings are styled much larger than their parent elements. This gives the impression headings are more important and could be improved.

References, articles, or WCAG support

  1. Understanding SC 1.3.1: Info and Relationships (Level A)

Type of issue