Staging Review finding: Warning alert unlikely to be announced by screen readers

shiragoodman commented 4 months ago

Need help? Please review how to read a Staging Review ticket. Tag @platform-governance-team-members on Slack if you need further assistance.

Product Information

Team: Pension benefits Product: 527EZ Feature: Update multi-response (single page list loop) pattern

Findings details

VA.gov Experience Standard - issue: User doesn't have enough information to complete a task. VA.gov Experience Standard - category: Comprehension Launch-blocking: No Design System review: No Collab Cycle Reviewer: @briandeconinck (Accessibility)

Description

On /employment/current/history when the maximum number of jobs has been entered, the "You've entered the maximum number of items allowed" message is likely to be missed by screen reader users.

When a screen reader user moves through a form, they don't typically have their screen reader announce all of the text on the page as they might on an informational page. Instead, they tab through the interactive elements on the page (buttons, links, form inputs) and hear their screen reader announce the labels programmatically associated with those elements.

The "You've entered the maximum..." message isn't programmatically associated with anything else, and blind users won't get the visual cue that something new has appeared on the page once they've added their second job. This could lead to confusion -- why isn't the Add another button there anymore?

Recommended action

There are a few ways to solve this, but I think the lowest-effort and most reliable option might be to add helper text to the legend telling users up front what the limit is. Something like:

<fieldset>
    <legend>
        <h3>Current employment</h3>
        <span>Enter all your current jobs</span>
        <span>You may enter up to two jobs.</span>
    </legend>
    [cards]
</fieldset>

The warning alert once the maximum has been entered can be kept as-is. It's not exactly duplicative of the suggested helper text, but it's close enough that I wouldn't consider it a requirement that the warning be announced.

References

Accessibility Defect Severity: 2: High. Should be fixed in 1-2 sprints post-launch.
WCAG Success Criteria: N/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
Context: N/A

Next Steps for the VFS Team

[ ] Questions? For the most timely response, comment on Slack in your team channel tagging @platform-governance-team-members with any questions or to get help validating the issue.
[ ] Ticket ownership: If you believe that this issue is out of scope, not your team's responsibility, or a Design System issue, comment and tag @platform-governance-team-members on your team channel in Slack to provide an explanation and who you believe is responsible. The Governance team will follow up.
[ ] Close this ticket when the issue has been resolved or validated by your Product Owner.

echin393 commented 4 months ago

After reviewing our form, I've noticed that instructional text tends to live as a part of the sub-heading (h4), or as a part of a question label if preceding radio buttons.

In this case, I'd suggest changing the current h4 heading from Enter all your current jobs to Enter up to two of your current jobs

aplatt-coforma commented 4 months ago

Hey team! Please add your planning poker estimate with Zenhub @ToddWebDev @TaiWilkin

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