Accessibility Feedback - Usability Test Prep - GI Bill Comparison Tool redesign

[1Copenut]

VFS acceptance criteria

• [ ] Let VSP know when the Must feedback has been incorporated
• [ ] Leave any comments for feedback you decide not to take
• [ ] VFS team closes the ticket

First Task: Radius from Location - Mobile

https://bahdigital.invisionapp.com/share/2MIAFYF83FT#/screens/296055352

Must

• The Near UI that has dual functions for setting distance radius and searching for a school with a typeahead must present the two controls as independent UI, visually and semantically. I'm thinking a button + input, something like

  <div>
  <button>All Locations</button>
  <label for="school-locations">Near</label>
  <input id="school-locations" type="text" ...additionalAttributes />
  </div>

• The suggested items like Daytona Beach must be right after the input where users type. If a keyboard user pressed TAB from the input, they would be in the Distance Radius radio group ( https://bahdigital.invisionapp.com/share/2MIAFYF83FT#/screens/296055361 ), which could be confusing. There will be a balancing act here with the combined UI. It's strongly recommended not to have both interfaces available at the same time. It pushes content further down the page and creates a UI 1 - UI 2 - UI 1 dependent pattern.

Should

• https://bahdigital.invisionapp.com/share/2MIAFYF83FT#/screens/296055344 the "here" button to activate the modal should be styled like a button. Or could the housing question be rolled into the same Refine search flow as the other questions? Is there a reason it's separated?

Consider

• What happens if users have Location Services turned off or opt not to give their location. Does that affect the Distance Radius search?
• Are the tabs meant to swipe / scroll left and right? There appears to be a third option for Searching On the Job ? off to the right. This UI will need to account for mobile users who might be using a screen reader and swiping right / left to navigate by text node. Would that third option come into focus on screen?
• https://bahdigital.invisionapp.com/share/2MIAFYF83FT#/screens/296055365 The search results are off the screen on an iPhone 8 after I complete a search. Is there a way to shorten the information about the search or make it available on demand?

Second Task: Degree / Program Search - Mobile

https://bahdigital.invisionapp.com/share/2MIAFYF83FT#/screens/296055383

Must

• The Refine Search must be connected to the search results. I had to use the arrow keys to navigate to screen 42 so I could search for Ethical Hacking as a major.

Third Task: Compare Schools - Mobile

https://bahdigital.invisionapp.com/share/2MIAFYF83FT#/screens/296055388

Questions

• How do the Clear All and Compare tabs work on https://bahdigital.invisionapp.com/share/2MIAFYF83FT#/screens/296055392 ? The Clear All feels like a button function, and Compare feels like a linked action that goes to a new view.

Should

• I'm anticipating the gray dots are how users wil switch from one school to another. They must have text or something that shows interactivity. Would the < Previous | Next > links work better here?
• https://bahdigital.invisionapp.com/share/2MIAFYF83FT#/screens/296055400 Woud it be possible to change the college name to reflect the schools (Daytona and Bethune) that were selected in the previous flow step?

First Task: Radius from Location - Desktop

https://bahdigital.invisionapp.com/share/2MIAFYF83FT#/screens/296055355

Must

• Please see first two must comments for mobile. I have concerns about this All Locations and typeahead combination UI.
• School results being populated must be announced to screen readers. It would be best to announce something like "N results for your search" and set focus on that element, rather than read out each card of data.

Should

• There's a search and a set of filters, doing different things, but grouped very closely. It might be a good thing to have sub-headings for each, and a short 1-sentence explainer for the differences in UI behavior. It's a subtle difference, but an important distinction. I put this in as a Should over a Consider because I don't have good context for what these controls do. Discovery will show me, but also takes 2-3 runs before I've figured out the interaction paradigms.

Consider

• A shortcut way to remove filters and "Clear all" or reset. Users sometimes like to have a recap of what they've applied and a way to quickly eliminate filtering one at a time if they come up with a 0 result list.

Second Task: Degree / Program Search - Desktop

https://bahdigital.invisionapp.com/share/2MIAFYF83FT#/screens/296055379

Must

• Apply buttons must have an accessible label. I'd recommend an aria-label that says something like "Apply Institutional Preferences filter" or "Apply Degrees and Majors filter"

Should

• Cancel buttons should be the ghost button style. The gray text doesn't read as interactive.

Consider

• Using a global typeahead component if it's completed before your product launches (or soon after as an enhancement). This has been proposed with thte Design System team here: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/364

Third Task: Compare Schools - Desktop

https://bahdigital.invisionapp.com/share/2MIAFYF83FT#/screens/296055387

Must

• The Compare toggle to open and close the tray ( https://bahdigital.invisionapp.com/share/2MIAFYF83FT#/screens/296055387 ) and the primary call to action "Compare" must not have the same text. It could cause confusion for screen readers and users with cognitive impairments.
• Define where focus is set when users add a school to the comparison. Is focus removed from the checkbox, or does it stay in the checkbox?
• Tables must have valid <thead> rows with descriptive column headers. Screen readers may treat them as layout tables and/or not read out the cell data correctly without.

Should

• The tray of schools to be compared should have a heading, probably an H2.
• The tray should be a landmark region with a proper aria-labelledby that references the H2's id attribute. This named landmark should be experimented with inside and outside the <main> element to see which has a more natural feel for screen readers. VSP a11y specialists can help with this effort.

Consider

• If focus stays in the checkbox after users have selected a school for comparison, I've previously created a focus-only skip link that becomes visible when users press TAB that allows them to skip to the "tray" quickly.
• Consider making the gray "sub-head" rows in the table have colspan="3" attributes and remove the black vertical column bars. When coupled with proper table headers, these sub-heads will add a nice level of meaning for screen readers. I highly recommend this article from W3C about tables with irregular headers: https://www.w3.org/WAI/tutorials/tables/irregular/

[amyknox]

@1Copenut

RE: your "Must" input (Near UI that has dual functions for setting distance radius and searching for a school with a typeahead must present the two controls as independent UI, visually and semantically.)

Wanted to confirm you're anticipating 2 UIs: 1 for the location searching and 1 for scoping the radius and not 3 UIs (1 for current / near me location, 1 for search and 1 for radius scoping).

[1Copenut]

@amyknox Hello, apologies for being a couple days late in responding.

I've been thinking about this feedback and UI a fair bit. The big thing to me is how will these UI be grouped. It feels like the "Use my location" and distance radio group feel like related UI, and the typeahead search and suggestions feel like related UI.

I'll be interested to hear how testing goes, and encourage your team to test live code as soon as possible, ideally before a formal staging review. Even a mocked version of this UI in Codepen or other sandbox will be helpful for screen reader / keyboard /interaction testing.

[amyknox]

Thanks for the input, Trevor. We're working on a solution to group the functionality similar to how you're describing it. Something like; Search schools / Filter results / Update estimates.

Definitely with you on testing live code asap. We should have a pretty solid idea of what works after this testing session so hope to be able to sandbox some functionality for the next round of testing.

[amyknox]

Per your question: How do the Clear All and Compare tabs work on https://bahdigital.invisionapp.com/share/2MIAFYF83FT#/screens/296055392 ?

We'll be updating those so they look less like tabs. Clear all is a button and we're updating that; Compare (now labeled "Compare schools") will be a link to the comparison view.