[Draft Technique] C31:Using percent for font sizes

[joshueoconnor]

C31: Using percent for font sizes
Important Information about Techniques
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.
Applicability
CSS
This technique relates to:
• Success Criterion 1.4.4 (Resize text)
o How to Meet 1.4.4 (Resize text)
o Understanding Success Criterion 1.4.4 (Resize text)
• Success Criterion 1.4.5 (Images of Text)
o How to Meet 1.4.5 (Images of Text)
o Understanding Success Criterion 1.4.5 (Images of Text)
• Success Criterion 1.4.8 (Visual Presentation)
o How to Meet 1.4.8 (Visual Presentation)
o Understanding Success Criterion 1.4.8 (Visual Presentation)
• Success Criterion 1.4.9 (Images of Text (No Exception))
o How to Meet 1.4.9 (Images of Text (No Exception))
o Understanding Success Criterion 1.4.9 (Images of Text (No Exception))
User Agent and Assistive Technology Support Notes
See User Agent Support Notes for C12.
Description
The objective of this technique is to specify text font size proportionally so that user agents can scale content effectively. Percent, named or em units can be used. If the size of the font is specified for the body element, all other elements inherit that value, unless overridden by a more specific selector.
This technique (C31) is the combination of three previous CSS techniques that addressed relative font sizes separately (C12, C13 and C14).
Examples
Example 1: Percent font sizes in CSS
This example defines the font size for the strong element so that its text will always be larger than the surrounding text, in whatever context it is used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text.
Example Code:

strong {font-size: 120%}

...

Letting the user control text size

Since only the user can know what size text works for him, it is very important to let him configure the text size. … Example 2: Named font sizes in CSS This example selects a larger font size for strong elements so that their text will always be larger than the surrounding text, in whatever context they are used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text. Example Code:

strong {font-size: larger}

...

Letting the user control text size

Since only the user can know what size text works for him, it is very important to let him configure the text size. … Example 3: Em font sizes in CSS This example defines the font size for strong element so that its text will always be larger than the surrounding text, in whatever context it is used. Assuming that headings and paragraphs use different font sizes, the strong words in this example will each be larger than their surrounding text. Example Code:

strong {font-size: 1.6em}

...

Letting the user control text size

Since only the user can know what size text works for him, it is very important to let him configure the text size.

…
Resources
Resources are for information purposes only, no endorsement implied.
• Cascading Style Sheets, Level 2 (CSS2), Fonts
• CSS 2 Font Size Property
Tests
Procedures

1. Check that the value of the CSS property that defines the font size is a percentage.
2. Check that the value of the CSS property that defines the font size is one of xx-small, xx-small, x-small, small, medium, large, x-large, xx-large, xsmaller, or larger.
3. Check that the value of the CSS property that defines the font size is expressed in em units.
   Expected Results
   • Check Text edit line 1837 remove quotation marks #1 or Check Test of commenting system #2 or Check WCAG Network Graph #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 cannot be used to claim conformance.

[joshueoconnor]

// This is draft technique by Mike Elledge in response to #70
Merging Techniques c12,c13 and 14

[joshueoconnor]

This technique is ready for survey for upcoming meeting.

[awkawk]

@WayneEDick is doing some investigation on this, will resurvey when ready

[joshueoconnor]

Josh to look at these again.

[awkawk]

Preparing to mark as deferred due to inactivity and group resource constraints (https://www.w3.org/WAI/GL/wiki/Handling_Issues).