[A11y]: Design System [Component]: Semantic HTML - Definition list used in place of more appropriate unordered list

[AngelaFowler82]

Point of contact

Angela Fowler

Severity level

3, Moderate. Should be fixed in 1-3 sprints post-launch.

...

User Story or Problem Statement

As a screen reader user, I expect content to be listed in a way that provides proper context.

Details

Currently Step 10: Review Your Application contains a definition list for the “On this page” navigation content. The screen reader announces “Definition list, two items”, when there are actually multiple items listed.

Acceptance Criteria

• [ ] The “On this page” skip-to navigation links are contained within an unordered list

Environment

• macOS Monterey, <Version 12.4>

• Chrome, <Version 102.0.5005.61>

• VoiceOver

• Staging

Reproduction steps

1. 2. 3. ...

Steps to Recreate

1. Enter https://staging.va.gov/burial-poc-v6/ in browser address bar

2. Navigate to Step 10: Review Your Application

3. Verify that the “On this page” navigation list is contained within a definition list element

Proposed Solution (if known)

Typically, definition lists or description lists are lists of items with a description or definition of each item. In this scenario, I recommend using an unordered list for the “On this page” skip navigation links.

WCAG or Vendor Guidance (optional)

...

Type of issue

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

[taylorkaren]

Looks like there is some duplicate info on this ticket with ticket department-of-veterans-affairs/va-forms-system-core#551. This ticket needs to be reviewed and updated to include only the information relevant to this issue (I removed some of the duplicate info, but wasn't sure what to do with the rest of what is still here).

[davidakennedy]

I've adjusted this so it should make better sense now. Looks like this was a copy and paste error from our notes document–sorry about that!