standards-support icon indicating copy to clipboard operation
standards-support copied to clipboard

Anchor or button elements inside `<label>` improperly read.

Open kretajak opened this issue 6 years ago • 7 comments

Summary

Anchor or button elements inside <label> can't be invoked. By using tab these elements can be focused, but JAWS reads description for label instead.

Expected result

Tab to 'details' link. JAWS should read focused link instead of <label> itself.

Actual result

JAWS always read <label> description. OnClick action on link can't be invoked in JAWS.

Example

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Example</title>
    </head>

    <a href="">Test</a>

    <input type="checkbox" id="a" name="a">
    <label for="a">Click for more<a href="#" onclick="alert(10)">details</a></label>
</html>

Additional Information

This issue can be workaround by replacing <label> with <div> and adding aria-labelledby attribute to <input> that points to this new <div>.

<input type="checkbox" id="a" name="a" aria-labelledby="input-label">
<div id="input-label">Click for more<a href="#" onclick="alert(10)">details</a></div>

JAWS version and build number

18.0.2118

Operating System and version

Windows 10

Browser and version:

Firefox ESR 52.7.3 (32-bit)

kretajak avatar Apr 30 '18 11:04 kretajak

test case

stevefaulkner avatar Apr 30 '18 11:04 stevefaulkner

Can reproduce with Firefox 52 ESR and JAWS 2018. Works fine with JAWS and Chrome. Works fine with NVDA/Firefox

stevefaulkner avatar May 02 '18 11:05 stevefaulkner

@Kretajak as a side note the practice of including links in labels is not recommended for various reasons

The ability to click or press a label to trigger an event on a control provides usability and accessibility benefits by increasing the hit area of a control, making it easier for a user to operate. These benefits may be lost or reduced, if the label element contains an element with its own activation behavior, such as a link https://www.w3.org/TR/html/sec-forms.html#example-e42a3d4b

stevefaulkner avatar May 02 '18 11:05 stevefaulkner

This appears to still be an issue when testing with Firefox 65.0.2 and JAWS 2019

scottaohara avatar Mar 06 '19 18:03 scottaohara

can reproduce in JAWS 2023.2307.37 and Firefox 116.0b7 (64-bit)

note: only occurs in virtual cursor mode

stevefaulkner avatar Aug 08 '23 13:08 stevefaulkner

tested with Firefox 121.0.1 (64-bit) and JAWS 2024.2312.53 can reproduce.

stevefaulkner avatar Jan 20 '24 14:01 stevefaulkner

Imported into ADO as bug 79581

BrettLewisVispero avatar Apr 09 '24 21:04 BrettLewisVispero