Techniken für WCAG 2.0

Zum Inhalt

-

F80: Fehler bei Erfolgskriterium 1.4.4, wenn textbasierte Formular-Steuerelemente sich nicht in der Größe verändern, wenn visuell gerenderter Text bis zu 200 Prozent in der Größe verändert wird

Anwendbarkeit

HTML, XHTML und CSS

Dieser Fehler bezieht sich auf:

Beschreibung

Das Ziel dieser Fehlersituation ist es, ein Problem zu beschreiben, das auftritt, wenn das Ändern der Textgröße nicht dazu führt, dass text-basierte Formular-Steuerelemente entsprechend in der Größe geändert werden. Dies bedeutet, dass der Benutzer Schwierigkeiten dabei haben könnte, Text einzugeben und zu lesen, was er eingegeben hat, weil der Text nicht in der vom Benutzer benötigten Textgröße angezeigt wird.

Text-basierte Formular-Steuerelemente beinhalten sowohl Eingabefelder (Text und Textarea) als auch Schaltflächen.

Beispiele

Fehlerbeispiel 1: Ein Kontakt-Formular

Ein Nehmen-Sie-Kontakt-mit-uns-auf-Formular hat einige einleitende Informationen und dann Formular-Steuerelemente, damit Benutzer ihren Vornamen, Nachnamen, Telefonnummer und E-Mail-Adresse eingeben können. Die Überschrift, der einleitende Text und die Beschriftungen der Formular-Steuerelemente wurden auf skalierbare Art implementiert, die Formular-Steuerelemente selber aber nicht.

Die XHTML-Komponente:

Code-Beispiel:

				 <h1>Contact Us</h1>
 <p>Please provide us with your details and we will contact you as soon as we can. Note that all of the form fields are required.</p>
 <label for="fname">First Name</label><input type="text" name="fname" id="fname" /><br />
 <label for="lname">Last Name</label><input type="text" name="lname" id="lname" /><br />
 <label for="phone">Telephone</label><input type="text" name="phone" id="phone" /><br />
 <label for="email">Email</label><input type="text" name="email" id="email" /><br />
 <input type="submit" name="Submit" value="Submit" id="Submit" />

Die CSS-Komponente :

Code-Beispiel:

				 h1 { font-size: 2em; }
 p, label { font-size: 1em; }
 input {font-size: 12pt}

Ressourcen

Es gibt für diese Technik keine Ressourcen.

(derzeit keine aufgelistet)

Tests

Vorgehensweise

  1. Geben Sie Text in text-basierte Formular-Steuerelemente, die vom Benutzer eingegebenen Text erhalten, ein.

  2. Vergrößern Sie die Textgröße um 200%.

  3. Prüfen Sie, ob sich der Text in den text-basierten Formular-Steuerelementen um 200% vergrößert hat.

Erwartete Ergebnisse