Design Intent - Accessibility Feedback - AE Profile - Enhanced Military Info

[briandeconinck]

VFS actions

• [ ] Assign this ticket to the team member(s) responsible for addressing feedback provided by Platform.
• [ ] Comment on this ticket:
  • [ ] If the Platform reviewer has any Thoughts/Questions that require responses.
  • [ ] When Must feedback has been incorporated. As appropriate, link to any other GitHub issues or PRs related to this feedback.
  • [ ] When Should/Consider feedback has been incorporated, or if any feedback will not be addressed. As appropriate, link to any other GitHub issues or PRs related to this feedback.
• [ ] Close the ticket when all feedback has been addressed.

Thoughts/questions

-

Feedback

Practice areas will document their feedback on the VFS-provided artifacts following the Must, Should, and Consider Framework. Platform Governance reviewers may also provide additional notes that don’t comment on the artifacts themselves but are important for implementation (eg. engineering/coding notes).

• Must: For Option A, the "+5 more ..." element should be a button rather than a link, since it reveals new content rather than navigating the browser. There's a screenshot in the design system of an older product with this pattern using a link, but that's something we want to correct people away from. The secondary button would be perfect here.
• Consider: In the meeting I thought out loud briefly about how the reveal-extra-stuff pattern might work once you start adding more than just the military occupational specialties. I'll suggest that you consider linking to a separate details page for each period of service, either at this point or as you start to add more stuff. It keeps this page from being too information-dense and may reduce cognitive load, especially for screen reader users. Not something you have to do, just something to explore.

• Should: Right now, there's some duplication of headings at the same heading level, something like: H2: United States Army H3: Active Duty H2: United States Air Force H3: Active Duty H2: United States Air Force H3: Inactive Reserves

  If possible, I'd like to see periods of service grouped together under the relevant branch, eg. H2: United States Army H3: Active Duty H2: United States Air Force H3: Active Duty H3: Inactive Reserves

  If that doesn't make sense or isn't technically feasible from your data source, then we'll need to do something to make the headings distinct from one another. Date makes the most sense to me, eg. "United States Air Force - Month Year to Month Year," but that's something to test with actual Veterans. If going this route, then visible text is best but it's also possible to associate the dates included beneath the heading with the heading via aria-describedby to make them more discoverable for screen reader users.

  Likewise, if there are multiple distinct periods of active and inactive service, those active/inactive headings will need to be made distinct as well. Same notes apply as above --- visible text is best, but aria-describedby is an option here too.

[andaleliz]

@briandeconinck thank you so much for this feedback. I have a question about the must item. If we switch to the secondary button, we'll need to use a less specific button label. Something like "Show 5 more military occupational specialties" would be so long!

IMO it's a bit problematic if the label says "Show more (5)", especially when we add another section for a period of service, such as countries. This is a quick-n-dirty mock-up, so please ignore the data, but should give you an idea of what I'm talking about.

Do you agree, that it's problematic?

Regarding the other feedback:

• The future definitely holds a separate page for each period of service, but the technical complexity of that isn't in scope for our MVP.
• I'm with you on the headings. Our next step will be some generative research where we learn how veterans chunk out the data themselves so we're going to rework the organizational structure of the page when we have that data to help us.

[briandeconinck]

Ugh yeah that's not ideal. I'd like to think there might be a content solution, like "Show 5 more specialities" and "Show 5 more locations," finding the right set of words to make it work and still be concise. But eventually you might run into one that can't be done cleanly like that. I don't think there's anything in the design system that precludes button text from wrapping to the next line, but I agree that "Show 5 more military occupational specialties" is going to be visually rough.

A good-enough-but-not-great solution is to use the button text in your mock-up and add an aria-label to each button to make them distinct for screen reader users. A make-Matt-upset solution would be to explore this as a place for a tertiary button style.

[andaleliz]

Thanks @briandeconinck, glad to know I'm not crazy thinking that is a pretty un-ideal label situation.

I'm hopeful there is a content solution that we can come up with post-research, once we hear how veterans talk about these specialties in their own words. There are so many unknowns! For now, I will use the button label we have in our mock-ups for research, and plan on a better content option emerging from that. I'll keep the aria-label solution in my pocket has an emergency plan, but I don't think it'll be needed.

Btw, I desperately wish I was the kind of designer that could come up with an accessible tertiary button option! This gap in the DS and my skillset has been haunting me since I joined the profile team 3 years ago 😭 😆 I did try using the tertiary button that the online scheduling team has proposed in this mock-up, but I know it's not really ready for teams to use it yet. I'm hoping all-caps won't be required once they do release it into the wild :)