Description
Product Information
Team: Form Engine Tool
Product: TMF Form Builder
Feature: Form Builder
Findings details
Launch-blocking: No
Collab Cycle Reviewer: @laflannery
Description
On the Build this form page, the statuses (Complete & Incomplete) are not in the correct DOM order. The statuses are being rendered using a CSS :before declaration. Each status is showing within the DOM before the <h4> and therefore when read with a screen reader they are read before the headings which is confusing because when this happens there is no context, or the context is not clear.
Link, screenshot or steps to recreate
https://main-n1oyljbmtpcs4ldxmila0inkf67qf8ir.demo.cms.va.gov/form-builder/76353
Recommended action
The statuses need to be after the headings in the DOM so that they will read “Form info, Complete” and “Introduction page, Incomplete” which will avoid confusion and provide the correct context.
References
- Accessibility Defect Severity: 3: Medium. Should be fixed in 1-3 sprints post-launch.
- WCAG Success Criteria: WCAG 1.3.2 Meaningful Sequence - Level A
- Modality: Screen reader
- Design System Component: N/A
- Design System Pattern or Template: N/A
- Design System Foundation: N/A
- Content Style Guide: N/A
Next Steps
- Questions? comment in this ticket tagging @laflannery with any questions or to get help validating the issue.
- Close this ticket when the issue has been resolved or validated by your team.
Activity