Advice for tooltip inside a fieldset

[bozdoz]

I want to put a tooltip beside our fieldset legend to better explain the form inputs, but I noticed that my screenreader will read out the legend text when the first focusable element (i.e. the tooltip trigger button) is focused.

This means that it won't read out the legend text when the first input field is focused (only seems to announce the legend text when entering the fieldset).

Is this a problem? Could the markup be better to help explain the fieldset?

Here's a screenshot of an example screenreader text:

Here's a codepen demo:

https://codepen.io/bozdoz/pen/ZEwXbXE?editors=1000

And some of the markup:

<fieldset>
    <legend>
      <span>What kind of apples do you like?</span>
      <span role="button" tabindex="0" aria-expanded="false" aria-describedby="tip-0">
          <span aria-hidden="true">i</span>
      </span>
      <span tabindex="-1">
        <span id="tip-0" role="tooltip">
          The type of apples you like correspond to your personality type.
        </span>
      </span>
    </legend>

    // ...etc

</fieldset>

[JAWS-test]

Most screen readers only output the group label (legend) when entering the group (fieldset), but not for each element inside the group, as this would be superfluous. In this respect, I don't see a problem. It could be annoying that the tooltip is already output in the closed state. For the button role, the expectation would be that the button only has a short label (e.g. "Info" or "Help") and that the tooltip is only output by the screen reader after activation

[bozdoz]

I believe the tooltip reads out the message due to the aria-describedby, correct? I also see in the w3 patterns for Tooltip:

The element that serves as the tooltip container has role tooltip.
The element that triggers the tooltip references the tooltip element with aria-describedby.

https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/

So I'm not sure how to change this based on your response

[JAWS-test]

The ARIA example assumes that the tooltip is displayed automatically and not after activating a button. Imagine you have an input field with a tooltip. The tooltip is displayed when the keyboard focus is placed in the input field or when you move the mouse over the input field. It is then important that the tooltip is output via aria-describedby. In your case, you have a button which, when activated with the mouse, displays the tooltip. My expectation here would be that the tooltip is only output when it is visible.
For keyboard users, the behavior is different: It is already displayed when the focus is at the button. But why do I need a button if activating it has no effect?

In addition, your button has no labeling, which is a violation of WCAG SC 4.1.2. That's why I suggest labeling the button with "Info" or "Help".
However, if the button is labeled, it is also part of the legend and thus part of the group labeling, which would not be good. Therefore, the button should be outside the legend or the legend should be explicitly labeled. The tooltip should only be displayed after the button has been activated. aria-describedby can then be removed. However, the tooltip must be marked up so that the text content is automatically output by the screen reader after activation.

If the tooltip is displayed automatically, you don't actually need the button role - which one then? I have no idea. In any case, it is important that you also fulfill WCAG SC 1.4.13, which is currently not the case for you.

Please note that there is a reason why there is no ARIA pattern for tooltips yet, because the correct implementation is considered complicated and there is no consensus on the best solution. See: https://whatsock.com/Templates/Tooltips/Internal/ and w3c/aria-practices#128 + w3c/aria-practices#127