Mailing address' conditional checkbox creates several a11y issues

[joshkimux]

Bug Report

• I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

The mailing address has a conditional checkbox to denote if a user lives on a US military base outside of the US. Several key a11y issues exist here:

• Additional static information "U.S. military bases are considered a domestic address and a part of the United States." is provided directly below the checkbox which crucially won't be announced to screen reader users and will likely not be discoverable as it is sandwiched between two form controls. Since screen reader users will effectively only hear items that can be tabbed to within the context of a form, static non-interactive content that is sandwiched between controls will be missed.
• The country field will also be skipped as it is disabled, so unless the screen reader user suspects that information has been skipped or disabled (which is unlikely), they're likely to not know this exists.
• Using disabled components is generally not recommended for low vision users.
  • If contrast is too low, some users won’t be able to identify what they are looking at
  • If contrast is too high, users won’t be able to tell the field is disabled
  • The field doesn’t tell the user anything about why it’s disabled or how to enable it (arguably the paragraph above does that, but it's not clearly connected to the field)

What I expected to happen

Several better alternatives can be explored. I strongly recommend working with an a11y specialist on this. Some possibilities include, but aren't limited to:

• Splitting the checkbox into a separate question on a page before the address field. For example, first asking the user if they live on/off a military base, then after continuing show them the appropriate set of fields.
• If the user checks the checkbox, (a) providing an additional information component (which is interactive) to explain why U.S. military bases are considered to be a domestic address and (b) removing the country input completely (instead of disabling it).

Reproducing

• Formation version:
• Device: (e.g. iPhone 8, Macbook)
• Browser: (e.g. Firefox, IE 11)

Steps to reproduce:

Documentation on this exists on the design system

Urgency

How urgent is this request? Please select the approriate option below and/or provide details

• This bug is blocking work currently in progress
• This bug is affecting work currently in progress but we have a workaround
• This bug is blocking work planned within the next few sprints
• This bug is not blocking any work
• Other

Details

[humancompanion-usds]

@jeana-adhoc - Would you mind reviewing this issue and determining if our address pattern as it stands still has these issues or has solved them and update the issue accordingly? Thanks!

[jeana-adhoc]

After talking with the A11y Community of Practice we've come up with a few ways to make this even more accessible.

The current state of the pattern relies on making the country field "inert" when selected (which is another type of 'disabled' field which the Design System has stated they want to avoid). While this did resolve some of Josh's concerns around color contrast, the country is still not 'visible' or interactive to screen reader users.

Here are some action steps we'd like to take:

For all forms

1. We'd like to make United States the default option in the select. I had even written a ticket about this back in August 2023.

For military addresses
There are two options we could take:

1. If military address checkbox is selected, strip out all of the other countries from the select box so that United States is the only option that can be selected. This allows the country to still be an interactive element that keyboard/screen reader users can hear announced when tabbing through the form. But they would be unable to select any other country.

   • This may violate the Design Experience principle "Don’t give Veterans options that aren’t actionable. Avoid dead ends by providing relevant next steps a Veteran can take by leveraging user data and available services." (Although it's not really a dead end)

2. If military address checkbox is selected, completely remove the country field from the form page. There's a11y cop concern that this could cause confusion for users. Why is the field removed? However the collapsed additional info component does explain that United States is the only correction country for military addresses.

Exploration and conversations continue - will update when there's more to add/a route to take.

[humancompanion-usds]

@jeana-adhoc - I feel like the current pattern does handle this. We added the additional info below the checkbox and the U.S. becomes inert text instead of having the select. Thus can we close this issue?