label for

[Linuchs]

Hallo,

die Augen und die Feinmotorik meiner Zielgruppe ist eine Herausforderung für barrierefreie Webseiten.

Da mir keine Tricks bekannt sind, die inputs type=checkbox und type=radio von Fliegenschiss-Größe auf ein sichtbares Format aufzublasen, nutze ich <label>, um einen Text anklicken zu können.

Doch hier versagt das:

<tr>  
  <td>Mail anzeigen?</td>  
  <td></td>  
  <td><label for="mail_nein"><input id="email_nein" type=radio name="mail_zeigen" value="0"> &nbsp; nein</label><br>  
  <label for="mail_ja"><input id="email_ja" type=radio name="mail_zeigen" value="1"> &nbsp; ja</label>  
  </td>  
</tr>  

Ich muss das Fliegenschiss-Kästchen direkt treffen. Was habe ich falsch gemacht?

Und kennt doch jemand einen Trick, checkboxen und radios in einer barrierefreien Größe darzustellen?

Linuchs

[Felix Riesterer]

Lieber Linuchs,

Dir ist bekannt, dass der Wert des for-Attributes mit dem Wert des ID-Attributes identisch sein muss?

<label for="mail_nein"><input id="email_nein" ...>

<label for="mail_ja"><input id="email_ja" ...>

  
Liebe Grüße,  
  
Felix Riesterer.

-- 
"Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)

[Linuchs]

... da suche ich eine halbe Stunde den Fehler und drei Minuten nach Absenden meiner Frage finde ich ihn:

<label for="email_nein"><input id="email_nein" ...

Bleibt die Frage, ob man die Winz-Kästchen vergrößern kann.

Linuchs

[Gunnar Bittersmann]

@@Linuchs:

nuqneH

Bleibt die Frage, ob man die Winz-Kästchen vergrößern kann.

Mit width und height kannst du die Box für Radiobutton/Checkbox (den clickbaren Bereich) vergrößern, ohne dass sich allerdings das Symbol selbst vergrößert.

Das kannst du mit transform: scale() erreichen; damit wird die browsereigene Pixel(!)grafik vergrößert, was insbesondere bei den runden Radiobuttons richtig blöd aussieht.

Bliebe nur, Radiobuttons/Checkboxen visuell zu verstecken und deren Zustand durch eigene Symbole in den Labels anzuzeigen:

[type=…] + label::before {content: …}  
[type=…]:checked + label::before {content: …}

Entweder Zeichen

⭕ U+2B55
◉ U+25C9

◻ U+25FB
☑ U+2611

oder Grafiken, vorzugsweise SVG.

Wenn da nicht der WebKit Adjacent/General Sibling & Pseudo Class Bug wäre …

Qapla'

[ChrisB]

Hi,

... da suche ich eine halbe Stunde den Fehler

Hättest du den Validator des W3C benutzt, hätte der dir das auch gleich sagen können – du hättest eine Meldung a la

Line x, Column y: The for attribute of the label element must refer to a form control.

bekommen.

MfG ChrisB

[Gunnar Bittersmann]

@@Linuchs:

nuqneH

Da mir keine Tricks bekannt sind, die inputs type=checkbox und type=radio von Fliegenschiss-Größe auf ein sichtbares Format aufzublasen, nutze ich <label>, um einen Text anklicken zu können.

Nicht nur deshalb. Auch, um den Zusammenhang zwischen Checkbox/Radiobutton/Eingabefeld und dem zugehörigem Label herzustellen. Die räumliche Nähe bleibt ja Menschen verborgen, die die Seite nicht visuell erfassen.

Qapla'