Accessibility Feedback - Medical Device Re-ordering Tool, Usability Prep

[1Copenut]

! Please note: 
! Team, hold on the VSP Feedback below.
! VSA a11y specialist is meeting with VSP a11y specialist on Thursday
! to gain alignment on feedback

Feedback framework

• ❗️ Must for if the feedback must be applied
• ⚠️Should if the feedback is best practice
• ✔️ Consider for suggestions/enhancements

VSA Feedback

Comments provided in Invision.

• Pg 1 - Since this is the first mention of DLC on this page, consider spelling out what DLC is an acronym for and putting DLC in parentheses afterwards. [cognition]
• Pg 1 - FOR DEVS: When this phone number is coded, devs should add an aria-label="3 0 3. 2 7 3. 6 2 0 0", so that screen readers will voice each number individually, instead of turning it into hundreds and thousands that sound confusing.
• Pg 1 - Within the timeframe indicated by the tracking number? Is something missing?
• Pg 3 - FOR DEVS: Ensure this (alert heading) is an H2.
• Pg 3 - FOR DEVS: Same note re phone number coding.
• Pg 4 - FOR DEVS: Ensure this (alert heading) is an H2.
• Pg 5 - FOR DEVS: Ensure this (alert heading) is an H2.
• Pg 7 - For email address, Was the possibility of confirming the email address with a second entry considered? There are some users who may enter the wrong email address and the order confirmation be sent to someone else. [cognition, mobility]
• Pg 11 - If this checkbox is selected, the country locks as United States and the field is greyed.
• Pg 18 - Consider not putting the "Why can't I order…" text in an additional info component, and rather have it on the page. Consider testing it with users with it all on the page. [cognition, mobility, keyboard, screen reader]
• Pg 19 - Ensure headings order follows h1, h2, h3, etc.
• Pg 32 - FOR DEVS: Ensure this is an h2.

Research Plan

• Consider requesting a 50/50 mix of enlisted and officer service history
• Consider specifically requesting at least one person of color
• For Veterans with a cochlear implant or the disability rating of 80% or higher, consider extending the time of the session to anticipate any troubleshooting.

Definition of Done

1. Acknowledge individual feedback with decisions made.
2. VSA Accessibility Specialist will close ticket.

VSP Feedback

Must

• Radio buttons styled as cards must be evaluated with screen readers for good usability.
  • https://vsateams.invisionapp.com/share/6MVTG94WNH5#/screens/408098735 looks like radio buttons. If this assumption is correct, these must be a single group, because users can only pick one. There are a lot of things going on with visual styles, but ultimately these are <label> and <input type="radio"> elements. All users should be able to understand these things have a relationship and it's one or the other.
• Checkboxes styled as cards must be evaluated with screen readers for good usability.
  • https://vsateams.invisionapp.com/share/6MVTG94WNH5#/screens/405269597 look like checkboxes. If this assumption is correct, these must be coded as a single group to maintain a relationship with each other.
  • One of the checkboxes isn't available. There's an <Alert/> box instead, and that's going to need careful testing with assistive tech users. We need that non-selectable element to do a few things:
  • Communicate that it has a relationship to the other checkboxes
  • Keep the checkbox in the source order. <input type="checkbox" disabled /> should do the trick.
  • Let assistive tech users know and understand that this choice is unavailable.
  • Accessibility specialists are working on a code pattern and will communicate this with the team when it has been vetted.

Should

• https://vsateams.invisionapp.com/share/6MVTG94WNH5#/screens/407912464
  • Listen to how the social security number is read out with "dots". This might be better to only show the last four, if we're concerned with privacy.
• Global: The checked radio buttons do not read as checked to me. There's no center to the "bullseye" and despite the reversed color scheme, I'm not confident I've done everything right. Should be tested closely with users to ensure they understand this is the checked state.
• https://vsateams.invisionapp.com/share/6MVTG94WNH5#/screens/405269597 and https://vsateams.invisionapp.com/share/6MVTG94WNH5#/screens/405269598 should have the Left ear only and Both ears headings on both pages. It was confusing why those appeared in some views but not others.

Consider

• Global: Removing the yellow focus halo on non-native focusable elements like headings. It's been VSP's guidance to only set the halo on native (links, buttons, form inputs) elements. So glad you're thinking of this. Is there a way this can be documented for engineering so the intent is retained?
• https://vsateams.invisionapp.com/share/6MVTG94WNH5#/screens/405269598 has three levels of bordered content with banded gray and white edges. It feels like an optical illusion and is somewhat difficult to read. Could be a challenge for users with vestibular issues. Will want to test this carefully.
• https://vsateams.invisionapp.com/share/6MVTG94WNH5#/screens/406054376 and https://vsateams.invisionapp.com/share/6MVTG94WNH5#/screens/407889090 have an interesting hierarchy challenge. Would it make sense to remove the heading "Add batteries to your order" and just lead with the alert box "None of your devices are eligible for battery resupply" ?
• https://vsateams.invisionapp.com/share/6MVTG94WNH5#/screens/407683960 The third level of indented content could become difficult to read. I'm judging on a wider screen for a mobile view, so I'll mention it as a good thing to listen for during testing.
• Prefer the printed invoice with the icon ( https://vsateams.invisionapp.com/share/6MVTG94WNH5#/screens/403659914 ). It lends a level of confidence. Might consider moving the icon over to the left 5-10px. Circles need to hang over the implicit grid line a touch to feel balanced.

Definition of Done

• Feedback is acknowledged by the designer(s) in comment
• Designer(s) follow up with accessibility specialists if they have not heard about code patterns for radio/checkboxes styled as cards.
• Designer(s) acknowledge they have considered feedback relevant to user research.
• Designer(s) have communicated items relevant to the development team. These include focus management, and code snippets created by accessibility specialists.
• Accessibility specialist will close this ticket after meeting other definition of done criteria.

[rebeccawalsh]

VSA Feedback @jenstrickland

Design comments:

• Pg 1 - Since this is the first mention of DLC on this page, consider spelling out what DLC is an acronym for and putting DLC in parentheses afterwards. [cognition]
  • Reflected in design
• Pg 1 - Within the timeframe indicated by the tracking number? Is something missing?
  • Content updated to Peggy's specs
• Pg 7 - For email address, Was the possibility of confirming the email address with a second entry considered? There are some users who may enter the wrong email address and the order confirmation be sent to someone else. [cognition, mobility]
  • Reflected in design
• Pg 11 - If this checkbox is selected, the country locks as United States and the field is greyed.
  • Reflected in design
• Pg 18 - Consider not putting the "Why can't I order…" text in an additional info component, and rather have it on the page. Consider testing it with users with it all on the page. [cognition, mobility, keyboard, screen reader]
  • Had this guidance from every direction - we chose to address it after testing, as we suspect that we'll be getting feedback that will make this change moot.
• Pg 19 - Ensure headings order follows h1, h2, h3, etc.
  • Headings inside of the alert boxes are standardized, right? Is the correct treatment utility classes?

Research Plan

• Consider requesting a 50/50 mix of enlisted and officer service history
  • Added
• Consider specifically requesting at least one person of color
  • We had a healthy mix of racial and ethnic backgrounds during our last test without this stipulation, so we chose to not include it explicitly.
• For Veterans with a cochlear implant or the disability rating of 80% or higher, consider extending the time of the session to anticipate any troubleshooting.
  • The test will be given up to an hour and I'm not sure they can extend it further.

[rebeccawalsh]

VSP Feedback @1Copenut

Must

Implementation feedback that cannot be reflected in designs

Should

• https://vsateams.invisionapp.com/share/6MVTG94WNH5#/screens/407912464 Listen to how the social security number is read out with "dots". This might be better to only show the last four, if we're concerned with privacy.
  • We changed the label to be "Last 4 of Social Security number:" with only the last 4 digits listed after. I understand this data should include an aria-label so that it reads the digits rather than the total number, right?
• Global: The checked radio buttons do not read as checked to me. There's no center to the "bullseye" and despite the reversed color scheme, I'm not confident I've done everything right. Should be tested closely with users to ensure they understand this is the checked state.
  • Will pay attention during testing
• https://vsateams.invisionapp.com/share/6MVTG94WNH5#/screens/405269597 and https://vsateams.invisionapp.com/share/6MVTG94WNH5#/screens/405269598 should have the Left ear only and Both ears headings on both pages. It was confusing why those appeared in some views but not others.
  • Ear-specific headings were a remnant of an old feature we meant to remove - they have been removed entirely.

Consider

• Global: Removing the yellow focus halo on non-native focusable elements like headings. It's been VSP's guidance to only set the halo on native (links, buttons, form inputs) elements. So glad you're thinking of this. Is there a way this can be documented for engineering so the intent is retained?
  • No problem, removed. We will work with devs to specify focus management for same-page interactions.
• https://vsateams.invisionapp.com/share/6MVTG94WNH5#/screens/405269598 has three levels of bordered content with banded gray and white edges. It feels like an optical illusion and is somewhat difficult to read. Could be a challenge for users with vestibular issues. Will want to test this carefully.
  • We will be addressing the boxes-and-lines problem in the next iteration after testing, as we suspect we'll be getting more feedback that will make this problem moot.
• https://vsateams.invisionapp.com/share/6MVTG94WNH5#/screens/406054376 and https://vsateams.invisionapp.com/share/6MVTG94WNH5#/screens/407889090 have an interesting hierarchy challenge. Would it make sense to remove the heading "Add batteries to your order" and just lead with the alert box "None of your devices are eligible for battery resupply" ?
  • If this is the guidance, we can do it. It made sense in my mind to have the title of the page shown as it states the purpose of the page, even if they're not able to currently eligible to use it. Maybe @jenstrickland can also cast a vote if you're on the fence.
• https://vsateams.invisionapp.com/share/6MVTG94WNH5#/screens/407683960 The third level of indented content could become difficult to read. I'm judging on a wider screen for a mobile view, so I'll mention it as a good thing to listen for during testing.
  • Same as above - will be addressing this in the future pending more sweeping feedback on selection pages.
• Prefer the printed invoice with the icon ( https://vsateams.invisionapp.com/share/6MVTG94WNH5#/screens/403659914 ). It lends a level of confidence. Might consider moving the icon over to the left 5-10px. Circles need to hang over the implicit grid line a touch to feel balanced.
  • Noted

[jenstrickland]

Thanks so much for the detailed acknowledgement! I appreciate the collaborative conversation. 😄

• Headings inside of the alert boxes are standardized, right? Is the correct treatment utility classes?

Yes, utility classes would be the preferred approach.

https://vsateams.invisionapp.com/share/6MVTG94WNH5#/screens/406054376 and https://vsateams.invisionapp.com/share/6MVTG94WNH5#/screens/407889090 have an interesting hierarchy challenge. Would it make sense to remove the heading "Add batteries to your order" and just lead with the alert box "None of your devices are eligible for battery resupply" ? If this is the guidance, we can do it. It made sense in my mind to have the title of the page shown as it states the purpose of the page, even if they're not able to currently eligible to use it. Maybe @jenstrickland can also cast a vote if you're on the fence.

Yes, if it's possible, to streamline those headings so that they read:

1. Your devices aren't eligible for battery resupply — without the Add batteries to your order above it.
2. Your hearing aid accessories aren't eligible for reorder at this time — without the Add hearing aid accessories to your order above it.

[rebeccawalsh]

@jenstrickland @1Copenut Alrighty, made that last change and removed the titles!

[jenstrickland]

Thanks! Good luck with testing!