Checkbox et liens HTML : comportements bizarre

**sliderman** · 03/12/2008, 20h17

Bonjour @ tous,

Je suis actuellemnt sur une page HTML et je me rends compte d'un comportement bizarre.

Voila, je suis en HTML transitionnel

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

J'ai fais un petit formulaire qui contient une simple case à cocher et un label (pour cette case. Ce label contient un lien. EN voici le code (du <form>) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<form method="POST" action="maj_acceptation.php">
                    <div class="underlineTitle2" style="margin-bottom:20px;">
                        <b>Profil public</b>
                    </div>
                            <p style="font-size:11px;font-family:Arial,Helvetica,sans-serif;">
                                <input name="acceptation" id="acceptation" type="checkbox" checked="checked"/>
                                <label for="acceptation">Oui<a href="./validation.php"  target="_blank">, je souhaite revoir des infos partenaires</label>
                        </p>
                    <div style="position: relative; left: 530px; width: 150px;margin-top:10px;">
                        <input type="submit" style="font-weight: bolder;" class="bigBlackButton" value="Valider" />
                    </div>
                </form>

Et dès que je clique sur le lien, ce qui mouvre un nouvel onglet dans firefox, ma checkbox se déselectione (sur la page du formulaire).
Est ce normal ?

**RomainVALERI** · 03/12/2008, 23h02

C'est absolument normal.

Ce label fonctionne vraisemblablement très bien, étant donné qu'il remplit sa fonction essentielle : passer le focus à son champ attaché par la propriété "for" dès qu'il le reçoit lui-même... ^^
Quand tu cliques sur le lien, il commence par appliquer l'événement à l'élément le plus "intérieur", ici le lien lui-même, puis bouillonne vers l'extérieur, s'appliquant à son conteneur, puis au conteneur de son conteneur, etc, jusqu'à document, la racine de l'arbre DOM.
C'est pourquoi, juste après s'être déclenché au niveau de ta balise <a>, il est passé au label, donc à la checkbox qui par transitivité se retrouve cochée.

La solution qui, à vue de nez (il est tard je viens de mettre les ptiotes au lit donc j'espère ne pas raconter trop d'aneries

), me semble être le meilleur choix en termes d'accessibilité et de correction sémantique... mais aussi la solution la plus simple) est la suivante :

---> sors donc ce lien de ton label ^^

(et aussi tant qu'on y est : tant qu'à utiliser un label, met-lui une petite propriété "accesskey", ça contribuera à respecter 10% des internautes que sont les mal-voyants à naviguer correctement sur ton site

)
edit après lecture du post d'erwan31 : oops... merci pour ces précisions

**Erwan31** · 04/12/2008, 01h20

En effet un lien sur un label n'a aucun sens.

Envoyé par RomainVALERI

(et aussi tant qu'on y est : tant qu'à utiliser un label, met-lui une petite propriété "accesskey", ça contribuera à respecter 10% des internautes que sont les mal-voyants à naviguer correctement sur ton site

)

Non ce type d'implémentation est risquée et ne devrait concerner que les éléments importants et standardisés (accueil, aide, FAQ, moteur de recherche, etc) sauf si leur usage est répétitif et expliqué dans une page d'aide/accessibilité.
Mais les implémentation actuelles des raccourcis clavier par les agents utilisateurs (navigateurs, lecteurs d'écran...) n'étant pas harmonisées, leur présence est une source de conflit non négligeable, des utilisateurs de lecteurs d'écran en ont déjà témoigné.
D'autre part il faut savoir que l'implémentation des accesskeys ne représente que le niveau de priorité AAA des WCAG 1.0.

Il est préférable pour améliorer l'accessibilité de ce formulaire de baliser le titre à l'aide de l'élément legend (sans oublier le fieldset qui englobe le tout):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<form method="POST" action="maj_acceptation.php">
	<fieldset>
	<legend>Profil public</legend>
	<p style="font-size:11px;font-family:Arial,Helvetica,sans-serif;">
		<input name="acceptation" id="acceptation" type="checkbox" checked="checked"/>
		<label for="acceptation">Oui, je souhaite revoir des infos partenaires</label>
	</p>
	<div style="position: relative; left: 530px; width: 150px;margin-top:10px;">
		<input type="submit" style="font-weight: bolder;" class="bigBlackButton" value="Valider" />
	</div>
	</fieldset>
</form>

**sliderman** · 04/12/2008, 09h49

Envoyé par Erwan31

En effet un lien sur un label n'a aucun sens.

Non ce type d'implémentation est risquée et ne devrait concerner que les éléments importants et standardisés (accueil, aide, FAQ, moteur de recherche, etc) sauf si leur usage est répétitif et expliqué dans une page d'aide/accessibilité.
Mais les implémentation actuelles des raccourcis clavier par les agents utilisateurs (navigateurs, lecteurs d'écran...) n'étant pas harmonisées, leur présence est une source de conflit non négligeable, des utilisateurs de lecteurs d'écran en ont déjà témoigné.
D'autre part il faut savoir que l'implémentation des accesskeys ne représente que le niveau de priorité AAA des WCAG 1.0.

Il est préférable pour améliorer l'accessibilité de ce formulaire de baliser le titre à l'aide de l'élément legend (sans oublier le fieldset qui englobe le tout):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<form method="POST" action="maj_acceptation.php">
	<fieldset>
	<legend>Profil public</legend>
	<p style="font-size:11px;font-family:Arial,Helvetica,sans-serif;">
		<input name="acceptation" id="acceptation" type="checkbox" checked="checked"/>
		<label for="acceptation">Oui, je souhaite revoir des infos partenaires</label>
	</p>
	<div style="position: relative; left: 530px; width: 150px;margin-top:10px;">
		<input type="submit" style="font-weight: bolder;" class="bigBlackButton" value="Valider" />
	</div>
	</fieldset>
</form>

je sais que les fieldset sont préférables, mais bon toutes les pages du site sont faites comme cela, je continue donc
le changement de forme HTML viendra ensuite (avec un respect des standard et un respect AAC et WDG). bon, merci du conseil ais on verra plus tard

en tout cas, merci à RomainVALERI pour son explication succinte mais rassurante (dans la mesure où je me doutais de ce type de réponse, mais j'osais esperer le contraire, certes ce qui aurait été moche et simple)

Checkbox et liens HTML : comportements bizarre

HTML

Discussions similaires

Partager

Partager