Markup

Radio-Buttons richtig auszeichnen

Manchmal ist es gut, immer wieder an Abläufe und Vorgehensweisen erinnert zu werden. Daher hier die Erinnerung an die richtige Auszeichnung von Radiobuttons.

Warum?

Weil dem Benutzer so Schwierigkeiten beim Ausfüllen eines Formulars erspart bleiben.

  1. Der Text sollte dem Element zugeordnet sein, v.a. für Screenreaderbenutzer.
  2. Der User klickt zur Auswahl oft auf den Text nicht auf den Radio-Button.

So sieht das für XHTML aus:

Über die ID wird der Text dem Button zugeordnet, das Attribut name ist bei mehrere Radio-Buttons gleich, z.B. für die Auswahl des Geschlechts: name="gender" id="male".

Natürlich kann man das Label vor oder hinter des Radio-Element schreiben:



Ich habe mich für das Einschließen des Buttons entschieden und zusätzlich vergeben, da es immer noch Browser wie den IE6 gibt, die die eindeutige Zuordnung durch das bloße Einschließen nicht beherrschen. So habe ich das Label nur dieser einen Schaltfläche zugeordnet.
Valide sind die anderen Varianten allemal. Mer dazu beim W3C: 17 Forms, 17.9.1 The LABEL element

Mehr

Natürlich kann man die Schaltflächen auch per CSS stylen, allerdings sollte man sich von einem gleichen Aussehen in allen Browsern verabschieden. Mehr dazu bei Roger Johansson: Styling even more form controls und die dazugehörige Demo Styled radio buttons.

Ein guter Artikel über die richtige Gestaltung von Formularen kommt von Luke Wroblewski:

Though these guidelines can help better position a form for your specific purpose, the combination of layout, visual elements, and content that’s right for you should still be verified through user testing or data analysis (completion rates, errors, etc.)

Quelle: Web Application Form Design

Kategorie: Markup

von

Hallo, ich bin Nadja und arbeite als freie Webdesignerin in Berlin. Seit den 2000er-Jahren ist das Internet mein berufliches Zuhause, hier im cne _LOG schreibe ich erst seit Anfang 2006 zu den Themen Webdesign, Webstandards und vor allem auch Wordpress.