[a11y-defect-2]: Address component issues when user lives abroad on a military base

[coforma-jamie]

Point of contact

Jamie Klenetsky Fay

Severity level

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

Details

There are a number of issues with the address component. The component is used on many forms, and CH36 is a good example. This ticket lays out small, medium, and large fixes to the component from an accessibility point of view.

Any changes applied to this iteration of the address component should apply sitewide.

Small

When a user checks "I live on a United States military base outside of the county," there are two immediate issues that crop up:

The "country" field is disabled

As explained in the form guidelines, there are two big issues with this:

1. Disabled buttons don’t explain what’s wrong. They communicate that something is off, but very often that is not enough information. As a result, users are left wondering what’s actually missing, and consequently are locked out entirely.
2. Disabled buttons can be unintentionally read out and accessed by mobile screen readers using touch controls.

The "APO/FPO/DPO" error message is incorrect

The error message says "City" is required, but the user isn't supposed to enter a city here:

Medium

Select boxes used when radio buttons would be more appropriate

When a user checks "I live on a United States military base outside of the county," the "APO/FPO/DPO" and "State" fields are select boxes, even though they only have 3 options to select from:

The select component guide notes that you should only use select "when a user needs to choose from about seven to 15 possible options and you have limited space to display the options." It's cognitively simpler to see a list of radio buttons when there's only a few options to select.

Large

Checkbox triggers conditional logic; is not "one thing per page"

When a user checks "I live on a United States military base outside of the county," some fields are removed, others are added. This can be confusing for folks, especially those using assistive technology, and goes against our "One thing per page" complete a sub task pattern.

Reproduction steps

1. Go to the form
2. Click "Start your application without signing in"
3. Get to the second page, where you see the "I live on a United States military base outside the country," and check the box
4. Click "continue" without filling in any fields to view the error messages

Proposed solution or next steps

When "I live on a United States military base outside of the country." is checked:

Small

The "country" field is disabled

• [ ] Do one of the following:
  1. Replace the select with text representing the current value instead of the current value within a disabled input.
  2. Hide the select, since it's longer valid.

The "APO/FPO/DPO" error message is incorrect

• [ ] Fix it, as per #16784 and #63545 (this one is about a different form, but the same component)

Medium

Select boxes used when radio buttons would be more appropriate

• [ ] Replace the "APO/FPO/DPO" select with radio buttons
• [ ] Replace the "State" select with radio buttons

Large

Checkbox triggers conditional logic; is not "one thing per page"

• [ ] This requires a big change to the address flow. Our thought is to ask whether the person lives on a military base outside the country FIRST. That selection takes the Vet to an address entry page that's appropriate for them, based on that selection.

References, articles, or WCAG support

No response

Type of issue

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

  
  ### Tasks

• [ ] https://github.com/department-of-veterans-affairs/va.gov-team/issues/68002
• [ ] https://github.com/department-of-veterans-affairs/va.gov-team/issues/68004

[steele-lm]

Some small improvements will be made as part of #68004 and #68002. Larger improvements will be handled at the design system level.

[jeana-adhoc]

@coforma-jamie et al, our team is fixing the error message in the forms library in this ticket.