Techniques for WCAG 2.0

On this page:

-

# F80: Failure of Success Criterion 1.4.4 when text-based form controls do not resize when visually rendered text is resized up to 200%

## Applicability

HTML, XHTML, and CSS

This failure relates to:

- Success Criterion 1.4.4 (Resize text)
  - How to Meet 1.4.4 (Resize text)
  - Understanding Success Criterion 1.4.4 (Resize text)

## Description

The objective of this failure condition is to describe a problem that occurs when changing the size of text does not cause the text-based form controls to resize accordingly. This means that the user may have difficulty entering text and being able to read what they have entered because the text is not displayed at the text size required by the user.

Text-based form controls include input boxes (text and textarea) as well as buttons.

## Examples

### Failure Example 1: A Contact Form

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. The heading, introductory text and form control labels have been implemented in a scalable way but the form controls themselves have not.

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 { font-size: 1em; }
     input {font-size: 12pt}

## Resources

No resources available for this technique.

## Related Techniques

(none currently listed)

## Tests

### Procedure

1. Enter some text into text-based form controls that receive user entered text.

2. Increase the text size of the content by 200%.

3. Check that the text in text-based form controls has increased by 200%.

### Expected Results

- If check #3 is false, then the failure condition applies and the content fails these Success Criteria.

- Top
- Contents
- Intro
- Previous: Failure F79
- Next: Failure F81