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.
CSS
This technique relates to:
Note: This technique must be combined with other techniques to meet SC 1.4.4. See Understanding SC 1.4.4 for details.
The objective of this technique is to specify the width and/or height of containers, that contain text or that will accept text input, in em units. This will allow user agents that support text resizing to resize the text containers in line with changes in text size settings.
The width and/or height of text containers that have been specified using other units risk text cropping because it falls outside the container boundaries when the text size has been increased.
The containers generally control the placement of text within the Web page and can include layout elements, structural elements and form controls.
In this example, a div element, with id value of "nav_menu", is used to position the navigation menu along the left-hand side of the main content area of the Web page. The navigation menu consists of a list of text links, with id value of "nav_list." The text size for the navigation links and the width of the container are specified in em units.
Example Code:
#nav_menu { width: 20em; height: 100em }
#nav_list { font-size: 100%; }
In this example, input elements that contain text or accept text input by the user have been given the class name "form1." CSS rules are used to define the font size in percent units and width for these elements in em units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped (because the width of the form control itself also resizes according to the font size).
Example Code:
input.form1 { font-size: 100%; width: 15em; }
In this example, select elements have been given the class name "pick." CSS rules are used to define the font size in percent units and width in em units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped.
Example Code:
input.pick { font-size: 100%; width: 10em; }
In this example, input elements that define checkboxes or radio buttons have been given the class name "choose." CSS rules are used to define the width and height for these elements in em units. This will allow the form control to resize in response to changes in text size settings.
Example Code:
input.choose { width: 1.2em; height: 1.2em; }
Identify containers that contain text or allow text input.
Check the container's width and/or height are specified in em units.
Check #2 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.