Label avec contrôle inclus et interprétation par les navigateurs

Hello les people,

La page Utilisez l’élément label dans les formulaires dit ceci (que je connaissais déjà, c’est juste pour sourcer) :

fvsch a écrit :
Cette syntaxe est présentée dans la spécification HTML, mais elle présente un défaut majeur: comme elle n’utilise pas les attributs for et id, les navigateurs n’associent pas bien l’intitulé au champ de formulaire. Cela posera problème aux lecteurs d’écran notamment.

Je voulais savoir si c’est toujours d’actualité, si les navigateurs actuels et les lecteurs d’écran, présentent toujours cette faiblesse.

Je pose la question, parce que personnellement, je n’ai jamais compris l’utilité d’utiliser la liaison `for`/`id` quand le contrôle est inclus dans le `label`. Le truc, c’est que cette redondance est fastidieuse à maintenir à la main, et présente des risques d’erreurs (*) qui ne se présentent pas quand on se repose uniquement sur l’inclusion du contrôle dans le `label` (ce que je préfère).


(*) Par exemple un contrôle avec un `id` inclus dans un `label`, dont l’attribut `for` fait référence à un autre contrôle, ce qui peut se produire suite à des renommages à la pelle ou à d’autre refactorisations.
Modifié par hibou57 (14 Jan 2016 - 07:43)

Ca fait longtemps que je n'ai plus entendu parler de ça, il faudrait refaire un essai. Si tu as une page avec un formulaire de test , je veux bien vérifier ça rapidement avec :


Jaws 16 et NVDA avec IE11, Firefox et Chrome sous Windows 7
VoiceOver avec Safari sous iOS 9.2.

Prends un formulaire un minimum complexe, pour être sûr que le résultat ne dépende pas des euristiques d'association des lecteurs d'écran (ceux qui sont utilisés quand il n'y a pas de label pour déterminer une association probable).
Modifié par QuentinC (14 Jan 2016 - 14:11)

Merci

Par exemple ici : http://bulleforum.net/search.php

Le formulaire n’est pas très complexe, mais il est accessible sans être connecté. Un cas intéressant, et qu’une liste est incluse dans un label, pour changer des boutons et des inputs.

C’est un vieux forum phpBB que nettoie épisodiquement depuis longtemps, et ces derniers temps, je crois qu’il commence enfin à être assez prêt pour les smartphones. En revisitant certaines choses, j’ai revu ces labels sans attributs `for` mais avec un contrôle inclus, et je me suis reposé cette question d’accessibilité.
Modifié par hibou57 (14 Jan 2016 - 16:46)

En tout cas Jaws 16 et NVDA 2015.4 ne semble pas y voir d'inconvénient avec les trois navigateurs sous windows (IE11, Firefox 43, chrome)

Le seul problème qu'il reste avec ce formulaire est les boutons radio, qui n'ont pour étiquette que "Oui" ou "Non" par exemple. Quand on navigue dans le formulaire avec tab, on a "Oui" ou "Non" mais pas la question. Mais ce n'est pas lié aux label, voir du côté de <legend> pour une solution classique.

Je te redis pour Safari sous iOS 9.2 si ça t'intéresse.

Merci pour les réponses.

QuentinC a écrit :
Le seul problème qu'il reste avec ce formulaire est les boutons radio, qui n'ont pour étiquette que "Oui" ou "Non" par exemple. Quand on navigue dans le formulaire avec tab, on a "Oui" ou "Non" mais pas la question. Mais ce n'est pas lié aux label, voir du côté de &lt;legend&gt; pour une solution classique.

Tu as répondu d’avance à une autre question que j’allais poser. Effectivement, je me demandais si je devais dupliquer la question dans chaque label de bouton-radio, parce que les labels imbriqués, c’est interdits.

Alors c’est avec un élément `legend` que ça se fait. Je l’ai peut?être connu cet élément, puis oublié.

Je ferai cette modification plus tard.

QuentinC a écrit :
Je te redis pour Safari sous iOS 9.2 si ça t'intéresse.

Oui, ça m’intéresse.
Modifié par hibou57 (16 Jan 2016 - 10:16)

J’ai ajouté les `legend` dans des `fieldset`.