Issue Summary

Tooltip content appearing on hovering the "Operational" text is not accessible using keyboard and screen reader.

Steps to Reproduce

1. Open the Corporate Tax and Trade page.
2. Navigate to the "Operational" text present beside the "CoCounsel for Tax, Audit & Accounting" text in the main page.
3. Hover over the mentioned text using a mouse > observe that a tooltip appears.
4. Now, try to access this "Operational" text using a keyboard.
5. Observe that the tooltip element is not reachable.
6. Try to access the tooltip using a screen reader (e.g., NVDA, VoiceOver).
7. Observe that the element is not accessible for screen reader.

Actual Results

The "Groups take on the status of their most..." tooltip content which becomes visible upon hovering over "Operational" text which is present beside the "CoCounsel for Tax, Audit & Accounting" text is not accessible for both  keyboard and screen reader users.

Tooltip appears only on mouse hover, making it difficult for keyboard-only and screen reader users to access the content.

Expected Results

Make sure that the tooltip elements are accessible with all the assistive technologies across all the platforms. Hence, we would recommend you to refactor this component into a tooltip so that it can be accessed to read the additional information. To achieve this, apply the following changes:

• Whenever possible, use native HTML <button> element. Alternatively, use custom role=”button” and tabindex=”0” to make sure that tooltip elements have keyboard support and an interactive role.
• Provide an accessible name to this element using aria-label attribute. Make sure that the accessible name signposts the purpose or the functionality associated with the tooltip elements.
• Specify an id attribute on the tooltip containers. Use aria-describedby attribute to refer to these id values on the tooltip buttons.
• Use role=”tooltip" on the tooltip text container.
• The tooltip contents should be contained in separate element. This should not be nested within the buttons. Instead, it should be directly after the buttons. This creates an appropriate reading order. For example, this enables screen reader users to arrow down onto the content from the button elements.
• The tooltip container should be programmatically hidden and exposed when it receives keyboard focus. For example, when the tooltip is off-screen, you can use “hidden”, “display:none”, to make sure that it is programmatically hidden.

For more information on tooltips and toggletips, you can refer "Tooltips & Toggletips".

Code snippet

<button aria-label="Operational" aria-describedby="tooltip1" class="...">
...
</button>
<span role="tooltip" id="tooltip1" class="..." >Groups take on the status of their most...</span>

Note: This code example is intended only as a general illustration of how to address the violation and should not be considered a complete or production-ready solution. If you have any questions, please attach this ticket to a #help-accessibility request.

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available.

Environment

MacBook Pro (16-inch, 2021)
macOS - Tahoe 26.5.1
Windows - 11
Chrome - Version 151.0.7922.108 (Official Build) (arm64)
Safari - Version 26.2 (21623.1.14.11.9)
JAWS- Version 2026
NVDA- Version 2026.1.1
Voiceover - Version Latest