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>

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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