Description
Product Information
Team: Form Engine Tool
Product: TMF Form Builder
Feature: Form Builder
Findings details
Launch-blocking: No
Collab Cycle Reviewer: @laflannery
Description
Each page should have a unique <h1> heading that clearly identifies the main purpose of the page. After the <h1>, the headings should follow in a logical, numerical order without skipping any heading levels.
Currently, each page that is built within the Form Builder tool has the same <h1> of Form Builder. This is confusing for the user as they cannot orient themselves to where they are within the UI/process.
Link, screenshot or steps to recreate
Home/Start page
https://main-n1oyljbmtpcs4ldxmila0inkf67qf8ir.demo.cms.va.gov/form-builder/home
Build form page
https://main-n1oyljbmtpcs4ldxmila0inkf67qf8ir.demo.cms.va.gov/form-builder/76353
Form info page
https://main-n1oyljbmtpcs4ldxmila0inkf67qf8ir.demo.cms.va.gov/form-builder/76353/form-info
Recommended action
It is recommended that the <hgroup> element (MDN documentation) be used within the blue banner area. This will group the unique <h1> with the related content "Form Builder" to help orient the user to the tool that they are in.
The recommended headings and structure for each of the 3 screens built in Tugboat are below but this same pattern should be applied to all screens that are in Figma and not yet built.
Home/Start page
H1: Form dashboard
H2: Start a new form
H2: Edit an existing form
Build form page
H1: Build [formName] form
H2: Form overview
H3: Form info
H3: Introduction page
H2: Form Steps
H3: Step 1: Your personal information
H3: Step 2: Address information
H3: Step 3: Contact information
H3: Step 4: Veteran's employment history
H3: Add a step
H2: Submission and next steps
H3: Review and sign
H3: Confirmation page
H2: Form preview
Form info page
H1: Form info
Page introduction page
H1: Introduction page
Personal information page
H1: Personal Information page
H2: Non-editable pattern (alert)
H2: Default appearance of this pattern
Other notes Notes:
- Within the Figma screen, there seemed to be some duplicate info as well as other patterns regarding how to provide info about default patterns and that this was not editable.
- Providing an alert that includes the note seems like the most streamlined way to provide the information the user needs
- The other headings in the Figma (Step label, Your personal information) are unnecessary on this screen. They would be needed in a form view screen.
- This pattern (or something very similar) should be used not just on the Personal Information page but on all pages where default patterns are used.
References
- Accessibility Defect Severity: 2: High. Should be fixed in 1-2 sprints post-launch.
- WCAG Success Criteria: WCAG 1.3.1 Info and Relationships - 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