search

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

Public resources for building on and in support of VA.gov. Visit complete Knowledge Hub:
https://depo-platform-documentation.scrollhelp.site/index.html
284 stars 206 forks source link

[a11y-defect-2]: Edit Benefit Letters update address buttons must be contextual for assistive technology users #96346

Open 1Copenut opened 1 month ago

1Copenut commented 1 month ago

Point of contact

Trevor Pierce

Severity level

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

Details

When Benefit Letter users update their address, we have a secondary routine that asks users to confirm their address. They can either use the address as entered or use the USPS recommended address. In this routine, the primary action button says "Use this address" but non-sighted users have no context what "this" means in this case. It could lead to a situation where errors are introduced or addresses incorrectly updated. Screenshot attached.

Image

Reproduction steps

  1. Log into https://staging.va.gov/records/download-va-letters/letters/confirm-address with a test user who has benefit letters. I used 54.
  2. Turn on a screen reader of your choosing
  3. Click the "Edit" button to switch the mailing address to the inline form
  4. Edit or change one or two fields in the form
  5. Press the "Save" button
  6. Verify the updated alert box announces itself to your screen reader
  7. Tab to the Use this address button and consider how important it is to know if you're using the suggested or as entered address

Proposed solution or next steps

The button text should be more descriptive and should be contextual to which radio button users have selected. That way they have a chance to know what address is being used and double check as they feel necessary.

Solution, per Rick and Julie in the comments:

  1. I suggest the second action button says "Use address you entered" or "Use suggested address" depending on what address is selected in the form (with this edit, the button text is consistent with the form labels "You entered" and "Suggested address").
  2. Change the other action button from "Go back to edit" to "Edit address"
  3. Change the order of the action buttons so "Use suggested address" comes before "Edit address"
  4. Change the label "Suggested Address" to "Suggested address" (per the style guide, we should not use title case for headers, labels, links. etc.)
  5. Change the form label from You entered to Address you entered
  6. Make sure the form label Suggested addresses is only plural if we're suggesting more than one address

References, articles, or WCAG support

  1. Understanding SC 1.3.1: Info and Relationships (Level A)
  2. Understanding SC 3.3.4: Error Prevention (Legal, Financial, Data) (Level AA)

Type of issue

rallencf commented 2 weeks ago

@1Copenut After our chat, I suggest the second action button says "Use address you entered" or "Use suggested address" depending on what address is selected in the form (with this edit, the button text is consistent with the form labels "You entered" and "Suggested address").

Other suggestions:

Thoughts?

dysbo commented 1 week ago

Discussed in planning and we love it, let's go 👍

jstrothman commented 1 week ago

All of @rallencf 's suggested changes sound good to me. Could you also:

  1. Change the form label from You entered to Address you entered
  2. Make sure the form label Suggested addresses is only plural if we're suggesting more than one address
jstrothman commented 1 week ago

@dysbo @1Copenut @rallencf @sh0wn On second thought, what do you think about making this interaction more form-like:

  1. Move the form instruction out of the alert and change it from "Tell us which of these addresses you'd like us to use" to "Which of these addresses should we use?" (Marked up as a heading -- whatever's the next level heading under "Mailing address"
  2. Use the tile style of radio buttons for the address options
dysbo commented 1 week ago

@jstrothman I love the tile radio buttons for this. I would love to get everyone's thoughts. Also @1Copenut and @janechodance if we want to reevaluate the points we put on this after we land on a direction, let's do that 👍

rallencf commented 1 week ago

@jstrothman Good call. I like pulling the instructions out of the alert box—and that text change. More straightforward.

dysbo commented 1 week ago

If we could get a quick Figma or similar of what we want the updates to look like, that'd be stellar 🙏 @sh0wn I guess is who I tag? if you have a chance 🙂

sh0wn commented 1 week ago

@dysbo @jstrothman Happy to sketch something out today

dysbo commented 5 days ago

@1Copenut is going to take a look at this and see what our options are. We'll circle back around Monday to see what's possible and what we can achieve.