Closed 1Copenut closed 3 years ago
@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?
@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?
@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
.
@jbalboni that totally makes sense. I like the suggested header language - mockup below. A couple of notes:
I don't think any other states are affected, but let me know if I missed any.
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.
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.
508-defect-3
Feedback framework
Definition of done
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:
Acceptance Criteria
Environment
Proposed Solution (if known)
WCAG or Vendor Guidance (optional)
Screenshots or Trace Logs