# HTML: RSPEC-1097 flags inputs wrapped in label elements

**URL:** <https://community.sonarsource.com/t/html-rspec-1097-flags-inputs-wrapped-in-label-elements/105298>\
**Category:** Report False-positive / False-negative...\
**Tags:** html, accessibility\
**Created:** [November 30, 2023, 4:46pm UTC](https://community.sonarsource.com/t/html-rspec-1097-flags-inputs-wrapped-in-label-elements/105298 "2023-11-30T16:46:51Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![ChristopheS](https://dub1.discourse-cdn.com/sonarsource/user_avatar/community.sonarsource.com/christophes/32/47998_2.png) [@ChristopheS](https://community.sonarsource.com/u/ChristopheS)\
**Post date:** [November 30, 2023, 4:46pm UTC](https://community.sonarsource.com/t/html-rspec-1097-flags-inputs-wrapped-in-label-elements/105298/1 "2023-11-30T16:46:51Z")

</div>

Based on [RSPEC-1097](https://rules.sonarsource.com/html/RSPEC-1097/) SonarLint in VS Code issues error messages for the `input` elements in the following code:

```auto
<form>
  <fieldset>
    <legend>Gender</legend>
    <p><label><input name="gender" type="radio" value="fe"> Feminine</label></p>
    <p><label><input name="gender" type="radio" value="ma"> Masculine</label></p>
    <p><label><input name="gender" type="radio" value="nb"> Non-binary</label></p>
  </fieldset>
  <p><button type="submit">Submit</button> <button type="reset">Reset</button></p>
</form>

```

The most common method of connecting an input with its label consists in using `for` and `id` attributes as in the following example:

```auto
<input name="gender" type="radio" value="fe" id="gender-fe"> <label for="gender-fe"> Feminine</label>

```

However, the method in the first code example is both valid and accessible. SonarLint should not produce the following error message:

> Provide an aria-label [aria-label=“”]

This error message is misleading for two reasons:

1. The code is valid and accessible, as mentioned above, so nothing needs to be done.
2. Adding an `aria-label` attribute when a native element (in this case the `label` element) can serve the same purpose is not a good practice. The error message sends developers in the wrong direction.

For an example of a `label` element that wraps around the input, see also WebAIM’s article [Creating Accessible Forms](https://webaim.org/techniques/forms/controls), which says:

> You can also create the association by placing the label text and the input within the `<label>` element (and not using `for` and `id`).
> 
> `<label>Name: <input type="text" autocomplete="name"></label>`

---

<div class="post-metadata">

**Author:** ![gab](https://dub1.discourse-cdn.com/sonarsource/user_avatar/community.sonarsource.com/gab/32/72206_2.png) [@gab](https://community.sonarsource.com/u/gab)\
**Post date:** [March 30, 2024, 9:48am UTC](https://community.sonarsource.com/t/html-rspec-1097-flags-inputs-wrapped-in-label-elements/105298/4 "2024-03-30T09:48:29Z")

</div>

Hi Christophe,

Thanks for bringing this up. I agree this is a false positive and Sonar should be able to know `input` inside `label` is audible and accessible already.

I created an issue to track this:  
[https://sonarsource.atlassian.net/issues/SONARHTML-222](https://sonarsource.atlassian.net/issues/SONARHTML-222)

Kind regards,