aria-labelledby element gets read twice #10512

JasonYeMSFT · 2019-11-20T00:07:56Z

Steps to reproduce:

Create an empty html file
Write the following contents to it

<html>
    <body>
        <input type="button" title="btnTitle" value="btn"/>
        <h3 id="header">Header</h3>
        <div>
            <input type="checkbox" aria-labelledby="header" aria-describedby="description"/>
            <span id="description">description text</span>
        </div>
    </body>
</html>

(see example.txt, rename it to example.html)

Open the html in Chrome or in Electron as the index page
Tab over the elements on the page to see what NVDA reads

Actual behavior:

When the focus gets to the checkbox, it reads the header twice and then reads the description once.

Expected behavior:

When the focus gets to the checkbox, it reads the header and the description once.

Additional info

It seems like the problem only occurs when the previous element is an <input> element (observation from my experiments).

System configuration

NVDA installed/portable/running from source:

installed

NVDA version:

2019.1.1

Windows version:

1903

Name and version of other software in use when reproducing the issue:

Chrome 78.0.3904.97 Or Chromimum 78.0.3904.99 + Electron 7.1.1

The text was updated successfully, but these errors were encountered:

Adriani90 · 2020-05-28T19:50:29Z

In firefox this works as expected. So it seem this is related to Chrome.

cc: @aleventhal

Adriani90 · 2020-05-28T19:52:31Z

This occurs only when pressing tab in browse mode. In focus mode NVDA read the header only once.

The same behavior is visible in Microsoft Edge Chromium.

ObjectInSpace · 2020-05-29T22:56:53Z

Filed https://crbug.com/1088101 on the Chrome side.

davidsilva · 2020-06-02T17:37:42Z

I might have a similar issue, where with Firefox NVDA announces the aria-labelledby text twice when the user clicks "Check Answer" (the announcement is, e.g., "option two orange incorrect orange"). Here's some code:

<html>
    <head>
        <meta charset="utf-8">
        <title>Accessibility Test</title>
        <style>
            button {
                padding: 1em;
            }
            .item {
                border: 1px solid blue;
                min-width: 100px;
                min-height: 100px;
            }
            .input-label-container {
                display: inline-block;
            }
            .input-rationale, .input-evaluation {
                display: none;
            }
            .sr-only {
                position: absolute;
                left: -10000px;
                top: auto;
                width: 1px;
                height: 1px;
                overflow: hidden;
            }
            ul {
                 list-style: none;
            }
        </style>
    </head>
    <body>
        <h1>ACME-3914: Radio Buttons and Checkboxes</h1>
        <h2>Radio Buttons</h2>
        <p id="prompts">
            Which fruit is in the genus <em>Malus</em>?
        </p>
        <ul class="items" role="group" aria-labelledby="prompts">
            <li class="item" aria-atomic="true" aria-live="polite">
                <span class="sr-only">Option 1</span>
                <input type="radio" value="a" name="fruits" aria-labelledby="radio-1" data-option="1" />
                <div class="input-evaluation-container">
                    <div class="input-evaluation"></div>
                </div>
                <div class="input-label-container" id="radio-1">
                    <div class="input-label">
                        Apple
                    </div>
                    <div class="input-rationale">
                        Apple is in the genus <em>Malus</em>.
                    </div>
                </div>
            </li>
            <li class="item" aria-atomic="true" aria-live="polite">
                <span class="sr-only">Option 2</span>
                <input type="radio" value="o" name="fruits" aria-labelledby="radio-2" data-option="2" />
                <div class="input-evaluation-container">
                    <div class="input-evaluation"></div>
                </div>
                <div class="input-label-container" id="radio-2">
                    <div class="input-label">
                        Orange
                    </div>
                    <div class="input-rationale">
                        Orange is in the genus <em>Citrus</em>.
                    </div>
                </div>
            </li>
        </ul>
        <button class="js-evaluate">Check Answer</button>
        <button class="js-reset">Reset</button>

        <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
        <script>
            var correctAnswers = {
                "1": true,
                "2": false
            };

            $('body').on('click', '.js-evaluate', function(e) {
                var $options = $('.item');
                $options.each(function() {
                    var $input = $(this).find('input');
                    var $evaluation = $(this).find('.input-evaluation');
                    checkAnswer($input, $evaluation);
                });
            });

            $('body').on('click', '.js-reset', function(e) {
                $('input[type="radio"]').prop('checked', false);
                $('.input-evaluation')
                    .text('')
                    .hide();
            });

            function checkAnswer($input, $evaluation) {
                $evaluation.text('');

                if (!$input.is(':checked')) {
                    return;
                }

                if (correctAnswers[$input.attr('data-option')]) {
                    $evaluation.text('correct');
                }
                else {
                    $evaluation.text('incorrect');
                }

                $evaluation.show();
            }
        </script>
    </body>
</html>

Note that I'm using aria-labelledby rather than a <label> element because in our use case we aren't limited to phrasing content.

Adriani90 · 2023-04-15T23:12:03Z

A further example of this is as follows, reproducible in Firefox, Chrome and Edge 112 with NVDA Version: alpha-28089,9fe52071 (2023.2.0.28089):

STR

Paste this code in a html file

<h1>hello</h1>
<section aria-labelledby="description"><h2 id="description"><a href="#description">I like the world</a></h2></section>

Open the HTML file in your browser.
With NVDA turned on, focus the first heading "hello"
In browse mode Use h or 2 to navigate to the heading level 2, or alternatively d to navigate to the next landmark
In Browse mode or focus mode, use tab to navigate the page

Actual: apart from arrow keys in browse mode, no matter which navigation you use, NVDA repeats the heading "I love the world" twice due to the aria-labelledby set on the section.

Expected: NVDA should generally ignore aria-labelledby when the IDs of child elements match exactly the text of aria-labelledby put on parent elements.

cc: @jcsteh, @michaelDCurran

Websites where this repetition happens in the wild are fore example
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/directory_role
or
https://support.microsoft.com/en-us/windows/update-windows-3c5ae7fc-9fb6-9af1-1984-b5e0412c556a
or
https://support.microsoft.com/en-au/office/set-up-email-in-the-mail-app-7ff79e8b-439b-4b47-8ff9-3f9a33166c60

and many many more.

Adriani90 · 2023-04-16T12:31:19Z

Further testing. This seems inconsistent between screen readers. Jaws only reads the section aria-labelledby only when using tab or shift+tab, narator does not report it at all.
Given this w3c articel
https://www.w3.org/WAI/GL/wiki/Using_HTML5_section_element
It seems aria-labelledby is part of HTML5 but I don't get what kind of additional information a screen reader takes from this apart from a lot of noisy repetitions when surfing in internet. Actually a properly labeled section or div would rather look like this:

<h1>hello</h1>

<section aria-label="[Description]">
<h2 id="Description">
<a href="#">I like the world</a>
</h2>
</section>

In this case NVDA would understand that the link has another label than the landmark. With aria-labelledby it seems NVDA reports the link and assumes the same text should be reported for the section aria-labelledby text as well. This occurs also in Jaws.

Are there any examples out there where aria-labelledby gives the user additional important information which is not covered by aria-label?
Otherwise I would suggest to drop support for aria-labelledby all together for regions, sections and divs. This would solve probably alot of cases where NVDA just repeats the label of child elements.

cc: @stevefaulkner

JasonYeMSFT mentioned this issue Nov 20, 2019

A11y_AzureToolsStorageExplorer_Application_ScreenReader: NVDA announces check box(Use credentials, Logout on exit, Use device code flow sign-in(preview)) names twice. microsoft/AzureStorageExplorer#1924

Closed

Adriani90 mentioned this issue Nov 20, 2019

Meta issue: NVDA often reads web element status, atributes or descriptions twice in all browsers #10140

Closed

Adriani90 added app/chrome z app/edge (archived) use app/edge/anaheim app/edge/anaheim MS browser, chromium based, replaces Spartan in 2019 by Anaheim. NVDA access via IA2. labels May 28, 2020

feerrenrut added the issue-tracking/crbug This issue is also tracked by another issue tracker: 'crbug' label Jun 11, 2020

Adriani90 added the bug/double-speaking label Jun 27, 2020

seanbudd removed the z app/edge (archived) use app/edge/anaheim label Apr 11, 2023

This was referenced Apr 16, 2023

aria-labelledby attribute, pointing to an element inside same container leads to double reading #13236

Closed

Landmark label ignored if aria-labelledby refers a child element #11357

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

aria-labelledby element gets read twice #10512

aria-labelledby element gets read twice #10512

JasonYeMSFT commented Nov 20, 2019 •

edited

Loading

Adriani90 commented May 28, 2020

Adriani90 commented May 28, 2020

ObjectInSpace commented May 29, 2020

davidsilva commented Jun 2, 2020 •

edited

Loading

Adriani90 commented Apr 15, 2023 •

edited

Loading

Adriani90 commented Apr 16, 2023

aria-labelledby element gets read twice #10512

aria-labelledby element gets read twice #10512

Comments

JasonYeMSFT commented Nov 20, 2019 • edited Loading

Steps to reproduce:

Actual behavior:

Expected behavior:

Additional info

System configuration

NVDA installed/portable/running from source:

NVDA version:

Windows version:

Name and version of other software in use when reproducing the issue:

Adriani90 commented May 28, 2020

Adriani90 commented May 28, 2020

ObjectInSpace commented May 29, 2020

davidsilva commented Jun 2, 2020 • edited Loading

Adriani90 commented Apr 15, 2023 • edited Loading

Adriani90 commented Apr 16, 2023

JasonYeMSFT commented Nov 20, 2019 •

edited

Loading

davidsilva commented Jun 2, 2020 •

edited

Loading

Adriani90 commented Apr 15, 2023 •

edited

Loading