Form elements do not have associated labels

Form elements do not have associated labels, erreure Lighthouse performance. Labeling Controls Labels ensure that form controls are announced properly by assistive technologies, like screen readers. .

Form elements do not have associated labels

Résoudre le problème  dans Lighthouse en masquant le Label.

Un Label est fourni pour identifier l'élément de formulaire dans le code, mais il est visuellement masqué pour éviter la redondance pour ceux qui n'en ont pas besoin.

EXTRAIT DE CODE:  Masquage de l'élément

 label for="search" class="visuallyhidden"> Recherche: </label
 input type="text" name="search" id="search" /
 button type="submit"> Recherche < /button

Utiliser aria-label

aria-label fournit l'étiquette à la technologie d'assistance.

EXTRAIT DE CODE:

input  type = "text"  name = "search"  id = "search"  aria-label = "Search" > 
button  type = "submit" > Search </button

Remarque sur le masquage des éléments

Les lecteurs d'écran et autres technologies d'assistance, comme les navigateurs Web, masquent les éléments à leurs utilisateurs lorsqu'ils sont stylisés à l'aide de display: none;et visibility: hidden;. Utilisez du CSS qui affichera les éléments tout en les rendant pratiquement invisibles pour les masquer visuellement mais en les gardant actifs pour les lecteurs d'écran et autres technologies d'assistance. Le code CSS utilisé dans les exemples précédents est fourni ci-dessous:

EXTRAIT DE CODE:

.visuallyhidden { border : 0 ; clip : rect ( 0 0 0 0 ); hauteur : 1px ; marge : -1px ; débordement : caché ; rembourrage : 0 ; position : absolue ; largeur : 1px ; }



Dans mon cas j'ai résolu le problème avec :

input type="text" name="keyword"  aria-label="keyword" class="form-control input-lg" placeholder="Domain or keyword" required/ 

https://domain.eurowebpage.com/