[html] Een link in een label

[geert1]

Een html-probleempje waar ik al vaker tegenaan ben gelopen, en waar via Google weinig over te vinden is: Stel je hebt onderaan een formulier een checkbox-veld voor het akkoord gaan met de voorwaarden.

HTML:

<div class="form-field">
  <input type="checkbox" id="check-voorwaarden" />
  <label for="check-voorwaarden">Ik ga akkoord met de <a href="/voorwaarden" target="_blank">algemene voorwaarden</a></label>
</div>

Nu zou ik graag de term "algemene voorwaarden" in dit label laten linken naar de voorwaarden-pagina. Het probleem is dan: Wanneer ik op de link in het label klik, wordt de checkbox automatisch aangevinkt terwijl de bezoeker de voorwaarden alleen maar wilde lezen. Ik heb geprobeerd de klik-event te blokkeren met stopPropagation in jQuery, maar dit mocht niet baten.

Ik was benieuwd naar jullie meningen over dit probleempje en mogelijke oplossingen. Uiteraard kan ik de link buiten de label plaatsen of deze er bovenop positioneren o.i.d. Maar misschien is er een simpele oplossing voor of zijn er andere ideeën.

[RobIII]

Simpelste oplossing IMHO: Geen label gebruiken.

Hoewel ik 't gebruik van labels (en zeker bij checkboxes) toejuich is 't in dit geval onzin om er allerlei creatieve workarounds voor te gaan maken; het is de CSS of evt. extra markup of whatever de oplossing zal worden gewoon niet waard. Evenals de tijd die je er in steekt. Daarbij forceer je de gebruiker in dit geval heel erg expliciet een vinkje te zetten; dat maakt 't IMHO nog "duidelijker" dat 'ie moet opletten waar 'ie mee akkoord gaat etc.

[ Voor 14% gewijzigd door RobIII op 20-04-2011 11:48 ]

[Aganim]

Wanneer ik op de link in het label klik, wordt de checkbox automatisch aangevinkt

Daar dit nu juist één van de basisfuncties van een label is, zou ik het dan ook niet in een label doen. Ik sluit me aan bij RobIII.

[Bosmonster]

Ipv het hele label weglaten, wat uit accessibility-oogpunt niet zo'n goed idee is, kun je er ook voor kiezen om de link uit de label te halen. Bijvoorbeeld "(lees Algemene Voorwaarden)" eronder oid.

Persoonlijk zou ik me niet zo druk maken over je probleem eerlijk gezegd. Ze moeten de voorwaarden toch accepteren om verder te gaan, dus of het dan aangevinkt wordt is niet zo heel boeiend lijkt me.

[Saeverix]

Ik snap ook niet waarom je beslist die link in je label wil hebben.

Ik zou het dan gewoon zo doen:
Ik ga akkoord met de algemene voorwaarden. (Voorwaarden lezen)
Of:
Ik ga akkoord met de algemene voorwaarden.

Waarbij je de link buiten je label plaatst.

[ Voor 65% gewijzigd door Saeverix op 20-04-2011 12:04 ]

[Diigii]

Ik denk dat het nog niet handig is als iemand een vinkje kan zetten of niet, ik denk dat je ook een optie wil hebben dat als je niet wordt aangevinkt dat hij niet verder gaat? En dat je een messagebox krijgt dat er niets is aangevinkt?

@edit Bij mij werkt het gewoon wel? Als ik op de link klik komt er geen vinkje in het vierkantje.

[ Voor 17% gewijzigd door Diigii op 20-04-2011 12:07 ]

[Bosmonster]

Saeverix schreef op woensdag 20 april 2011 @ 12:00:
Ik ga akkoord met de algemene voorwaarden.

Waarbij je de link buiten je label plaatst.

Dit is dan ook wel weer redelijk zinloos, kun je net zo goed geen label gebruiken

Een label "Ik ga akkoord met de" heeft een blinde ook niet zoveel aan

[geert1]

De insteek van RobIII en Aganim om maar geen label te gebruiken heb ik ook overwogen, maar zoals Bosmonster zegt is dat qua accessibility niet geweldig. Ik zal inderdaad de link er maar gewoon onder zetten als los element (p) denk ik.

@diigii: Dat het bij jou wel werkt komt waarschijnlijk omdat de label niet gelinkt is aan de input via het id en het for-attribuut op de label. Iets dat wel gewenst is voor de accessibility en wat op heel veel (grote) websites nog wel eens wordt vergeten.

Maar: van jou, Bosmonster, had ik eigenlijk een über-geweldige oplossing verwacht die de accessibility combineert met wat ik hier voor ogen had

[MueR]

geert1 schreef op woensdag 20 april 2011 @ 12:35:
Maar: van jou, Bosmonster, had ik eigenlijk een über-geweldige oplossing verwacht die de accessibility combineert met wat ik hier voor ogen had

Dan stuurt ie een factuur hoor

Je kan je AV natuurlijk ook gewoon in een textbox of divje dumpen, zodat mensen hem direct kunnen lezen. Gebruik dan alleen niet van die irritante "je moet helemaal naar beneden scrollen om op OK te klikken" meuk.

[Verwijderd]

geert1 schreef op woensdag 20 april 2011 @ 12:35:
@diigii: Dat het bij jou wel werkt komt waarschijnlijk omdat de label niet gelinkt is aan de input via het id en het for-attribuut op de label. Iets dat wel gewenst is voor de accessibility en wat op heel veel (grote) websites nog wel eens wordt vergeten.

Hoewel ik het met je eens ben dat een label 1-op-1 gekoppeld moet zijn aan een input veld, en dan voornamelijk in combinatie met radio- en checkboxes, ben ik het in dit geval niet helemaal met je eens.

Het accepteren van de voorwaarden moet, in mijn ogen, geen automatisme zijn. Het is juist de bedoeling dat mensen het ook daadwerkelijk lezen voordat ze deze accepteren en niet zonder blikken of blozen het vinkje aanzetten...

Door het for-attribuut weg te halen voorkom je dus ook dat mensen er (te) snel op klikken.


Een oplossing, om ook de minder slechtziende te ondersteunen, zou het volgende kunnen zijn:

HTML:

<div class="form-field"> 
  <input type="checkbox" id="check-voorwaarden" />
  <label for="check-voorwaarden" class="hidden">Ik ga akkoord met de algemene voorwaarden</label>
  <span class="label">Ik ga akkoord met de <a href="/voorwaarden" target="_blank">algemene voorwaarden</a></span> 
</div

[Bosmonster]

Mag ik wel hopen dat je voor je class="hidden" geen display:none gebruikt. Dat is een van de meest gemaakte fouten mbt zogenaamde accessibility.

geert1 schreef op woensdag 20 april 2011 @ 12:35:

Maar: van jou, Bosmonster, had ik eigenlijk een über-geweldige oplossing verwacht die de accessibility combineert met wat ik hier voor ogen had

Nou nou Mijn oplossingen waren eenvoudig overigens. Probleem negeren (ik vind het persoonlijk niet zo'n issue) of de link buiten je label herhalen (zie ook Saeverix in "[html] Een link in een label")

Maar mijn voorkeur gaat meestal wel uit naar het meest eenvoudige ipv trucjes.

[ Voor 68% gewijzigd door Bosmonster op 20-04-2011 13:11 ]

[OkkE]

Verwijderd schreef op woensdag 20 april 2011 @ 13:01:
Het accepteren van de voorwaarden moet, in mijn ogen, geen automatisme zijn. Het is juist de bedoeling dat mensen het ook daadwerkelijk lezen voordat ze deze accepteren en niet zonder blikken of blozen het vinkje aanzetten...

Aan de ene kant ben ik het met je eens, aan de andere kant is het de verantwoordelijkheid van gebruikers. Je kan het aanvinken zo ingewikkeld maken als je wil, maar kijk naar software EULA's (waar je naar de onderkant moet scrollen); hoeveel mensen lezen die daadwerkelijk? De mensen die willen lezen doen dat toch wel, de rest vinkt zonder lezen, ongeacht hoe lastig je het maakt.

[StephanVierkant]

HTML:

<div class="form-field"> 
  <input type="checkbox" id="check-voorwaarden" /> 
  <label for="check-voorwaarden">Ik ga akkoord met de</label> <a href="/voorwaarden" target="_blank">algemene voorwaarden</a>
</div>

[MueR]

Stephan4kant schreef op woensdag 20 april 2011 @ 13:48:
.. code ..

Dus eigenlijk wat Diigii in "[html] Een link in een label" zegt en Bosmonster in "[html] Een link in een label" afraadt?

[geert1]

Bedankt voor alle goede raad! Ik ga uiteindelijk voor het plaatsen van de link buiten de label, er vlak onder. In de label wel gewoon een volledige zin, zonder link dus.

Het weglaten van de label vind ik niks, het weglaten van het for-attribuut ook niet (beide verslechtering van accessibility), een halve zin in de label plaatsen en dan de link er buiten ook niet, en de label verbergen en vervangen met een fake-label werkt uiteindelijk nog minder dan het gewoon weglaten van de label.

Ik zat zelf meer te hopen op een manier om ervoor te zorgen dat de checkbox wel wordt aangevinkt bij het klikken op de label, maar niet bij het klikken op de link in de label. Ik vreesde al dat hier geen oplossing voor bestaat (niet zonder de genoemde opofferingen), en dit topic wijst wel uit dat dat klopt.

[Saeverix]

Bosmonster schreef op woensdag 20 april 2011 @ 12:16:
[...]


Dit is dan ook wel weer redelijk zinloos, kun je net zo goed geen label gebruiken

Een label "Ik ga akkoord met de" heeft een blinde ook niet zoveel aan

Bij die oplossing had ik inderdaad niet aan blinden gedacht. Die oplossing valt dus af

[Aganim]

wat me opvalt in een simpele test-case met de code uit je TS, is dat (bij mij in ieder geval) recente versies van Opera, IE9 (ook met IE7+8 render mode) en Chrome dit gedrag allen niet vertonen. Ik kan het alleen bij Firefox 3.6 reproduceren.
Ik baseer mijn volgende antwoord dan ook even op dit gegeven, daar ik momenteel geen beschikking heb over een natieve IE7/8 en Safari.

Ik vraag me af of het nu echt zo'n groot probleem is in dit specifieke geval. De gebruiker krijgt in principe het scherm met de voorwaarden meteen voor zijn neus, leest het (of niet ) en klikt het weg. Vervolgens komt hij terug op de pagina en kan 2 dingen besluiten:

- Akkoord gaan, in welk geval dat al ingevulde vinkje geen drama is.
- Niet akkoord gaan, in welk geval de gebruiker doorgaans zijn browser sluit of naar een andere pagina/site gaat. Hoewel het eigenlijk niet gewenst is dat het vakje automatisch aangevinkt wordt, maakt het ook dan uiteindelijk weinig verschil uit.

In ieder geval vraag ik me af of het zoveel moeite waard is, als dit probleem zich inderdaad maar bij een enkele browser voor doet.

edit:
speficieke..

[geert1]

@Aganim: Er zit wel iets in wat je zegt: Als het vinkje automatisch wordt gezet bij het klikken op de link is dat op zich niet het einde van de wereld, maar ik vind het gewoon niet netjes. Het akkoord gaan moet een bewuste, opzettelijke actie van de gebruiker zijn. En dat het "de moeite" niet waard is: Het is niet meer moeite met de oplossing die ik nu heb gekozen, de link staat gewoon onder de label los vermeld.

Daarnaast heb ik het idee dat het klikken van de link in de label in meer browsers wel het gedrag vertoont waar ik op doelde. Heb je in je testcase de label en de input wel met elkaar verbonden d.m.v. het for-attribuut op de label en het id op de input? Hoe dan ook, als het voor enkele browsers een probleem is, is dat voor mij reden genoeg om te kiezen voor de oplossing die ik nu heb gekozen.

[Aganim]

Heb je in je testcase de label en de input wel met elkaar verbonden d.m.v. het for-attribuut op de label en het id op de input?

Zoals ik al zei: ik heb jouw code gebruikt, uiteraard ook even netjes in een form gezet. En daarmee kan ik het probleem maar bij 1 browser reproduceren.

Een (naar mijn mening vrij ranzige) oplossing zou nog kunnen zijn om een tweede link buiten het label op te nemen (wellicht beiden in een div die als container dient ivm positionering) en die over de link in de label te plaatsen, met een background en hogere zIndex. Maar dat lijkt wat op de false label die je zelf al aandraagt, dus waarschijnlijk niet wat je zoekt. In ieder geval zal een text-to-speech reader in zo'n geval niet afgekapt worden bij je link én kunnen gebruikers zonder het vinkje te zetten toch de voorwaarden lezen.

Edit: een andere 'creatief-met-kurk' oplossing is spelen met een onclick event die je aan de link koppelt en tegelijktijdig je checkbox ontvinkt (indien nodig na een bepaalde interval, zodat je geen race krijgt tussen vinken en ontvinken) en de voorwaarden laat zien. Eventueel met Ajax in een mooi popup divje, dan blijven de meeste popupblockers ook weer tevreden.

[ Voor 18% gewijzigd door Aganim op 21-04-2011 13:30 ]

[Boelie-Boelie]

Oplossing zonder scripting of css-trickery, wel link in label, niet automatisch akkoord na aanklikken van link:

HTML:

<fieldset>
<legend>Algemene voorwaarden</legend>
  <input type="radio" id="check-voorwaarden-nee" name="av" />
  <label for="check-voorwaarden-nee">Ik ga <strong>niet</strong> akkoord met de <a href="/voorwaarden" target="_blank">algemene voorwaarden</a></label>
  <input type="radio" id="check-voorwaarden-ja" name="av" />
  <label for="check-voorwaarden-ja">Ik ga <strong>wel</strong> akkoord met de algemene voorwaarden</label>
</fieldset>

Is dat misschien wat?

[Aganim]

Lijkt mij een prima oplossing.

[Borizz]

Volgens mij is dit redelijk simpel op te lossen met een stukje javascript en de originele code:

HTML:

<div class="form-field">
  <input type="checkbox" id="check-voorwaarden" />
  <label for="check-voorwaarden">Ik ga akkoord met de <a href="/voorwaarden" target="_blank">algemene voorwaarden</a></label>
</div>

Door de event propagation / bubbling te stoppen na het klikken op de link, wordt de link nog wel gevolgd, maar wordt het click event niet getriggerd op het label.

Met hulp van jQuery, kan het er dan zo uitzien:

JavaScript:

$('label a').click(function(e) {
    e.stopPropagation();
});

Je hebt dan geen CSS trucks o.i.d. nodig en het blijft toegankelijk voor iedereen.