See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.0 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0.
(X)HTML, CSS
This technique relates to:
The objective of this technique is to ensure text-based form controls resize when text size is changed in the user agent. This will allow users to enter text and read what they have entered in input boxes because the text is displayed at the size required by the user.
Text-based form controls include input boxes (text and textarea) as well as buttons.
A Contact Us form has some introductory information and then form controls for users to enter their first name, last name, telephone number and email address. All of the text and form controls have been implemented in a scalable way. This includes specifying a font size for the form controls themselves because the font size is not inherited in Internet Explorer.
The XHTML component:
Example Code:
<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" />The CSS component:
Example Code:
h1 { font-size: 2em; }
p, label, input { font-size: 1em; }Working example of this code: Example of resizing input with CSS.
This example works in IE with its text size feature. However, it doesn't scale in Firefox 2.0.
The XHTML component:
Example Code:
<input type="radio" name="r1" value="r1" id="r1" class="geomsize" />
<input type="checkbox" name="c1" id="c1" value="c1" class="geomsize" />The CSS component:
Example Code:
input.geomsize {
width: 1.2em;
height: 1.2em;}Working example of this code: Example of resizing radio buttons and checkboxes with CSS.
Enter some text into text-based form controls that receive user entered text.
Increase the text size of the content by 200%.
Check that the text in text-based form controls has increased by 200%.
#3 is true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.