(X)HTML, CSS
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es sicherzustellen, dass sich text-basierte Formular-Steuerelemente in der Größe verändern, wenn die Textgröße im Benutzeragenten geändert wird. Dies erlaubt es Benutzern, Text einzugeben und zu lesen, was sie in Eingabefelder eingegeben haben, weil der Text in der vom Benutzer gewünschten Größe angezeigt wird.
Text-basierte Formular-Steuerelemente beinhalten sowohl Eingabefelder (Text und Textarea) als auch Buttons.
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. Der gesamte Text und alle Formular-Steuerelemente wurden auf skalierbare Art implementiert. Dies beinhaltet die Festlegung einer Schriftgröße für die Formular-Steuerelemente selber, da die Schriftgröße im Internet Explorer nicht geerbt wird.
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, input { font-size: 1em; }Hier ist ein funktionierendes Beispiel dieses Codes: Example of resizing input with CSS (Beispiel zur Änderung der Größe von Eingaben mit CSS).
Dieses Beispiel funktioniert in IE mit seiner Textgrößen-Funktion. Allerdings skaliert es nicht in Firefox 2.0.
Die XHTML-Komponente:
Code-Beispiel:
<input type="radio" name="r1" value="r1" id="r1" class="geomsize" />
<input type="checkbox" name="c1" id="c1" value="c1" class="geomsize" />Die CSS-Komponente :
Code-Beispiel:
input.geomsize {
width: 1.2em;
height: 1.2em;}Hier ist ein funktionierendes Beispiel dieses Codes: Example of resizing radio buttons and checkboxes with CSS (Beispiel zur Größenänderung von Radiobuttons und Kontrollkästchen mit CSS).
Geben Sie Text in text-basierte Formular-Steuerelemente, die vom Benutzer eingegebenen Text erhalten, ein.
Vergrößern Sie die Textgröße um 200%.
Prüfen Sie, ob sich der Text in den text-basierten Formular-Steuerelementen um 200% vergrößert hat.
#3 ist wahr.
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.