<legend> tag is not read by Windows Narrator

Question

Windows Narrator doesn't read legend tag inside fieldset. At the same time legend is read by NVDA and JAWS properly. Markup is the following:

<fieldset>
    <legend>Description</legend>
    <label>
        <input id="option1"type="radio" value="1">
        Option 1
    </label>                     
    <label>
        <input id="option1" type="radio" value="2">
        Option 2
    </label>
</fieldset>

Is there a way to make Narrator read legend?

Answer 1

Screen reader support for <legend> has always been spotty, and it's very difficult if not impossible to target one piece of assistive technology (e.g. Narrator) while not affecting other applications (e.g. NVDA and JAWS).

However, you can attempt to more explicitly convey the context of the legend element by inserting visually hidden text inside the label elements. This will supplement additional information for non-sighted users that isn't visible. Techniques include positioning content off-screen or using CSS clip-path.

<fieldset>
    <legend>Billing Address:</legend>
    <div>
        <label for="billing_name">
            <span class="visuallyhidden">Billing </span>Name:
        </label><br>
        <input type="text" name="billing_name" id="billing_name">
    </div>
    <div>
        <label for="billing_street">Street:</label><br>
        <input type="text" name="billing_street" id="billing_street">
    </div>
    […]
</fieldset>

Also note that different screen readers behave in sometimes incongruous ways. It's not impossible to get them to behave all the same, so we have to "split the difference" and attempt to make a reasonable accommodation for all, even if it's not perfect in every instance.

Depending on the configuration, some screen readers read out the legend either with every form element, once, or, rarely, not at all. To accommodate this consider the following:

• Make the legend as short as possible for situations in which it is read together with the label each time.
• Make the individual labels sufficiently self-explanatory for situations in which legends are not read aloud, without repeating the legend in every label.

https://www.w3.org/WAI/tutorials/forms/grouping/

Answer 2

1. voice over on
2. select radio-button
3. press (for mac) CONTROL + OPTION + SHIFT + arrow up.