• Home
• org.sonarsource.html
• sonar-html-plugin
• 3.18.0.5605
• source code
• S6853.html

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

org.sonar.l10n.web.rules.Web.S6853.html Maven / Gradle / Ivy

A <label> element should wrap a control element or have an <htmlFor> attribute referencing a control and text
content.
Why is this an issue?
When a label element lacks a text label or an associated control, it can lead to several issues:

  
 Poor Accessibility: Screen readers rely on correctly associated labels to describe the function of the form control. If the
  label is not properly associated with a control, it can make the form difficult or impossible for visually impaired users to understand or interact
  with. 
  
 Confusing User Interface: Labels provide users with clear instructions about what information is required in a form control.
  Without a properly associated label, users might not understand what input is expected, leading to confusion and potential misuse of the form. 
  
 Code Maintainability: Properly structured and labeled code is easier to read, understand, and maintain. When labels are not
  correctly associated, it can make the code more difficult to navigate and debug, especially for new developers or those unfamiliar with the
  codebase. 

Control elements are: * <input> * <meter> * <output> * <progress> *
<select> * <textarea>
Exceptions
Custom components may contain control elements, therefore label elements containing custom elements do not raise issues.
How to fix it
If you have a pair of control and <label> elements, make sure that the <label> wraps the control element. If
you lack a control element, add one.
It is strongly recommended to avoid using generated ids since they must be deterministic.
Code examples
Noncompliant code example
<input type="text" />
<label>Favorite food</label>

Compliant solution
<label>
  <input type="text" />
  Favorite food
</label>

Resources
Documentation

  
 MDN web docs - The Label element 
  
 W3C - Info and Relationships 
  
 W3C - Labels or Instructions