USWDS - Tooltip: Announce tooltip before it's content#6220
Conversation
amycole501
left a comment
There was a problem hiding this comment.
This sounds great in JAWS and NVDA. I hear "tooltip" before the tooltip wording is announced.
mahoneycm
left a comment
There was a problem hiding this comment.
Hey Mandy! I'm able to hear "Tooltip: ..." before the tooltip span is read! A couple implementation questions and suggestions but overall good job
Also a quick GitHub PR trick for the summary:
Polish: If you remove the link markdown from the related issue, it'll automatically link this PR and the related issue
- Closes #[5891](https://github.com/uswds/uswds/issues/5891)
+ Closes #5891 | const tooltipContent = tooltipTrigger.getAttribute("title"); | ||
| const wrapper = document.createElement("span"); | ||
| const tooltipBody = document.createElement("span"); | ||
| const ariaSpan = document.createElement("span"); |
There was a problem hiding this comment.
Question: Can we add tooltip: to the existing span instead of creating a new span element?
I notice while navigating by item that it identifies the new span as an empty group and can be confusing / verbose for SR users:
Kapture.2024-11-26.at.17.19.42.webm
This would also help us keep the output markup a bit leaner!
| tooltipBody.textContent = tooltipContent; | ||
|
|
||
| // insert aria span before text content to be read first | ||
| ariaSpan.setAttribute("aria-label", "Tooltip :"); |
There was a problem hiding this comment.
Question: Is there any benefit of the added colon in the tooltip aria-label? Could we remove?
I don’t hear colon but I don’t know that I would want to either
| ariaSpan.setAttribute("aria-label", "Tooltip :"); | |
| ariaSpan.setAttribute("aria-label", "Tooltip"); |
There was a problem hiding this comment.
iirc when @amycole501 and I chatted about the wording I think she said "colon" gets read out by jaws or nvda? I do not hear it either since I'm also on VO. I don't see an issue with removing but Amy might have input when she gets back.
There was a problem hiding this comment.
It's common for screen readers outside of JAWS to not announce the colon. I would be curious to hear what the tooltip sounds like without the colon, as the colon seems out of place with JAWS. With NVDA, it generates a pause between "tooltip" and the content. I think that interaction is ideal in this situation, as I do not think the user needs to hear "colon". It seems disrupt the flow of JAWS, since there is no pause. I fear that could be overwhelming to some users. Is there a way we could treat it like a period, and provide some sort of pause between the words "tooltip" and the associated content? @mlloydbixal
There was a problem hiding this comment.
@alex-hull I removed the colon and gave the text content it's own span so it starts on a new line. That should cause the screen reader to pause. Can you test with JAWS and NVDA? Thanks for the suggestion!
There was a problem hiding this comment.
Listening in both, now there is no pause for either NVDA or JAWS. It moves straight into the content. Deque is the only accessibility option that I see using a colon. MDN does not have a colon, so I am assuming it moves straight into the content as well. I still think removing the colon helps in clogging up what the screen reader is saying, but I think there should be a slight pause still. @mlloydbixal
There was a problem hiding this comment.
Listened to this one more time, and it still sounds like there is no pause. I say we continue to investigate it in the future, but just keep the colon out for now. Looking at a few more examples (A11y style guide, MDN), it does not look like the colon (or other punctuation) is commonly placed in the tooltip role. I thinking having it there would provide a not great experience for JAWS users. So proceed on! @mlloydbixal
Summary
Use an accessible aria label span to announce tooltip before it's content is read An added span with aria-label "Tooltip :" is read by the screen reader before reading the contents of the tooltip.
Tooltip elements must have discernible text that clearly describes the destination, purpose, function, or action for screen reader users. The previous combination of only
aria-labeledbyon the container pairedwith role="tooltip"on the tooltip was not satisfying that requirement.Breaking change
This is not a breaking change.
Related issue
Closes #5891
Preview link
Preview link: tooltip
Problem Statement
The tooltip component does not announce the word "tooltip" as a label, even when using a combination of
aria-labelledbyon the container element androle="tooltip"on the tooltip element. As a result, screen reader users cannot discern the purpose of elements withrole="tooltip"that lack an accessible name.Solution
To address this, we need to add an empty
<span>with an accessiblearia-labelto ensure the tooltip is announced to screen reader users before the tooltip contents are read.Testing and review