508-defect-3 [SCREENREADER]: VAOS CC Provider Select - Selected provider should be a heading and receive keyboard focus

[1Copenut]

508-defect-3

Feedback framework

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

Definition of done

1. Review and acknowledge feedback.
2. Fix and/or document decisions made.
3. Accessibility specialist will close ticket after reviewing documented decisions / validating fix.

Point of Contact

VFS Point of Contact: Trevor

User Story or Problem Statement

As a screen reader user, I would like to hear my selected provider announced once I had finished the task of picking. Some assistive technology doesn't announce focus when it is set on a container instead of a text node.

Details

The VA 508 office has flagged bold text as a heading on a recent VAOS project, so I've been looking at the selected provider and seeing an opportunity to refactor HTML. This will accomplish a couple key things:

1. Add another heading to the page
2. Set focus on the heading for consistent screen reader announcement Screenshot and code snippet attached below.

Acceptance Criteria

• [ ] Heading is added to the markup, nested properly
• [ ] Heading receives focus instead of the container
• [ ] Zero axe-core defects

Environment

• https://staging.va.gov/health-care/schedule-view-va-appointments/appointments/new-appointment/community-care-preferences
• Test user Judy

Proposed Solution (if known)

- <section
+ <div
- aria-label="Selected provider"
  id="selectedProvider"
- tabindex="-1"
>
- <span class="vads-u-display--block vads-u-font-weight--bold">DUBOSE, JOSEPH</span>
+ <h3 class="vads-u-display--block vads-u-font-weight--bold" tabindex="-1">DUBOSE, JOSEPH</h3>
  <span class="vads-u-display--block">11355 Pembrooke Sq Ste 108</span>
  <span class="vads-u-display--block">Waldorf, MD 20603</span>
  <span class="vads-u-display--block vads-u-font-size--sm vads-u-font-weight--bold">1.1 miles</span>
  <div class="vads-u-display--flex">
    <button
      class="vaos-appts__cancel-btn va-button-link vads-u-margin--0 vads-u-flex--0 vads-u-margin-right--2"
      type="button"
    >
      Change provider
    </button>
    <button
      aria-label="Remove DUBOSE, JOSEPH"
      class="vaos-appts__cancel-btn va-button-link vads-u-margin--0 vads-u-flex--0 vads-u-margin-right--2"
      type="button"
    >
      Remove
    </button>
  </div>
- </section>
+ </div>

WCAG or Vendor Guidance (optional)

• Info and Relationships: Understanding SC 1.3.1

Screenshots or Trace Logs

[jbalboni]

@1Copenut I struggled with this one some, because of that guidance we got from the 508 office about bold text and headings. I ended up deciding not to make it a heading because the provider name seems like a bad heading. It doesn't tell you anything about the page or the content, or why that name is on the page. The only other heading on the page is the main title, which doesn't really tell you much about why a name is the next sub heading. It feels like the design intent of the bold text is mainly about emphasis the important data in that content, rather than it being a description or categorization of content. I tried to get around this issue by making a section and labeling it with what I think a reasonable heading would be (Selected provider). If it's not consistent enough to focus on the container, could we have a hidden heading that is focused?

[noahgelman]

@jbalboni Hidden focused elements are not ideal since their outline/border that typically displays when focused is not visible. Users can lose track of where focus is and get confused. Is your change available for me or Trevor to check out?

[jbalboni]

@noahgelman The most current version is up on staging, I haven't made any changes since Trevor opened the issue.

Maybe we should put some actual header text in the card itself, @outerpress. Something like "Selected provider." It just feels like if you're navigating through headings, hearing "heading level 1, Tell us your community care preferences, heading level 2, Smith, John" is confusing.

Or maybe we could mark it up like:

<h2 id="providerName">
  <span class="sr-only">Selected community care provider</span> Smith, John
</h2>

And focus on #providerName.

[outerpress]

@jbalboni that totally makes sense. I like the suggested header language - mockup below. A couple of notes:

• This should only show if a provider has been selected
• Display size is h3 - basically should have the same look/spacing as the "Choose a provider" heading earlier in the workflow
• I removed the bolding from provider name and distance. On revisiting this, I can see these are helpful distinguishing multiple providers, not really for a single provider.

I don't think any other states are affected, but let me know if I missed any.

[jbalboni]

Looks good to me. We can focus on the header after adding the provider.

@LanceGundersen This should be ready for you to work on now.

[1Copenut]

Just getting back around on this issue and a few others. I like this approach a lot. It'll help balance what the VA 508 office asking for semantically, and bump the scannability for visual users. 👍

Let us know when you're ready to test.