Skip to content

JAWS doesn't announce link text or role when the link is nested inside a checkbox or radio button's label #960

Description

@dabramsOS

When navigating through a form in Google Chrome, if a text link is nested inside the <label> element for a checkbox or radio button, the link's semantics seem to be completely ignored by JAWS.

  • Using down arrow to navigate through the page, the label text is skipped completely.
  • Using tab to move between interactive elements, the link is focused, but the role and name of the previously focused form element is announced instead (if that form element was a checkbox or radio button).

Reproducible on this CodePen (also pasted below just in case).

In Firefox, this issue does not occur. Though the link's information seems to be announced twice for some reason when focused.

<h1>Testing links nested inside field labels</h1>
<button>Tab stop</button>

<h2>Text input</h2>
<label for="input-1">Favorite food <a href="#">test</a>:</label>
<input type="text" id="input-1">

<h2>Checkbox</h2>
<input type="checkbox" id="input-2">
<label for="input-2">I consent <a href="#">test</a>.</label>

<h2>Radio button</h2>
<input type="radio" name="onoff" id="input-3">
<label for="input-3">On <a href="#">test</a></label>
<input type="radio" name="onoff" id="input-4">
<label for="input-4">Off <a href="#">test</a></label>

<h2>Textarea</h2>
<label for="input-5">Tell me a story <a href="#">Test</a></label>
<textarea id="input-5"></textarea>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions