W3CWeb Accessibility Initiative Home

font-size

On this page: Test 1 | References | About these tests

Nearby: More HTML 4.01 Tests | UAAG 1.0 Test Suite

UAAG 1.0 Requirement

Checkpoint 4.1 Configure text scale (Priority 1 )
Provision 1 : Allow global configuration of the scale of visually rendered text content. Preserve distinctions in the size of rendered text as the user increases or decreases the scale.
Provision 2 : As part of satisfying provision one of this checkpoint, provide a configuration option to override rendered text sizes specified by the author or user agent defaults.
Provision 3 : As part of satisfying provision one of this checkpoint, offer a range of text sizes to the user that includes at least: the range offered by the conventional utility available in the operating environment that allows users to choose the text size (e.g., the font size), or if no such utility is available, the range of text sizes supported by the conventional APIs of the operating environment for drawing text.

Test 1 :

Procedure

  1. Configure the user agent to render the following test text sizes both larger and smaller than their initial size.

Run test

XX-small size text

X-small size text

Small size text

Medium size text

Large size text

X-large size text

XX-large size text

14pt size text

14px size text

Medium size parent text

Smaller size child text

Medium size parent text

Larger size child text

Medium size parent text

150% size child text

Medium size parent text

75% size child text

Medium size parent text

1.5 em size child text

Medium size parent text

.75 em size child text

Expected results

  1. The user agent allows the user to make the text size larger and smaller.
  2. The user agent gives the user a range of both larger and smaller text sizes.
  3. The user agent preserves the difference in text sizes.

Source code

<p style="font-size: xx-small" style="font-size: x-small" style="font-size: small" style="font-size: medium" style="font-size: large" style="font-size: x-large" style="font-size: xx-large" style="font-size: 14pt" style="font-size: 14px" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
  <p style="font-size: smaller" style="font-size: larger" style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">Smaller size child text</p>
</p>
<p style="font-size: x-small" style="font-size: small" style="font-size: medium" style="font-size: large" style="font-size: x-large" style="font-size: xx-large" style="font-size: 14pt" style="font-size: 14px" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
  <p style="font-size: smaller" style="font-size: larger" style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">Smaller size child text</p>
</p>
<p style="font-size: small" style="font-size: medium" style="font-size: large" style="font-size: x-large" style="font-size: xx-large" style="font-size: 14pt" style="font-size: 14px" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
  <p style="font-size: smaller" style="font-size: larger" style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">Smaller size child text</p>
</p>
<p style="font-size: medium" style="font-size: large" style="font-size: x-large" style="font-size: xx-large" style="font-size: 14pt" style="font-size: 14px" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
  <p style="font-size: smaller" style="font-size: larger" style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">Smaller size child text</p>
</p>
<p style="font-size: large" style="font-size: x-large" style="font-size: xx-large" style="font-size: 14pt" style="font-size: 14px" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
  <p style="font-size: smaller" style="font-size: larger" style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">Smaller size child text</p>
</p>
<p style="font-size: x-large" style="font-size: xx-large" style="font-size: 14pt" style="font-size: 14px" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
  <p style="font-size: smaller" style="font-size: larger" style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">Smaller size child text</p>
</p>
<p style="font-size: xx-large" style="font-size: 14pt" style="font-size: 14px" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
  <p style="font-size: smaller" style="font-size: larger" style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">Smaller size child text</p>
</p>
<p style="font-size: 14pt" style="font-size: 14px" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
  <p style="font-size: smaller" style="font-size: larger" style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">Smaller size child text</p>
</p>
<p style="font-size: 14px" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
  <p style="font-size: smaller" style="font-size: larger" style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">Smaller size child text</p>
</p>
<p style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
  <p style="font-size: smaller" style="font-size: larger" style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">Smaller size child text</p>
</p>
<blockquote style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
  <p style="font-size: smaller" style="font-size: larger" style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">Smaller size child text</p>
</blockquote>
<p style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
  <p style="font-size: larger" style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">Larger size child text</p>
</p>
<blockquote style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
  <p style="font-size: larger" style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">Larger size child text</p>
</blockquote>
<p style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
  <p style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">150% size child text</p>
</p>
<blockquote style="font-size: medium" style="font-size: medium" style="font-size: medium">
  <p style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">150% size child text</p>
</blockquote>
<p style="font-size: medium" style="font-size: medium" style="font-size: medium">
  <p style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">75% size child text</p>
</p>
<blockquote style="font-size: medium" style="font-size: medium">
  <p style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">75% size child text</p>
</blockquote>
<p style="font-size: medium" style="font-size: medium">
  <p style="font-size: 1.5em" style="font-size: .75em">1.5 em size child text</p>
</p>
<blockquote style="font-size: medium">
  <p style="font-size: 1.5em" style="font-size: .75em">1.5 em size child text</p>
</blockquote>
<p style="font-size: medium">
  <p style="font-size: .75em">.75 em size child text</p>
</p>
<blockquote>
  <p style="font-size: .75em">.75 em size child text</p>
</blockquote>

References

  1. HTML 4.01 specification for STYLE
  2. CSS2 specification for font-size

About this test suite

This test is part of a test suite for the User Agent Accessibility Guidelines (UAAG) 1.0 . This work is conducted by the User Agent Accessibility Guidelines Working Group , which is part of W3C's Web Accessibility Initiative (WAI) . Please send comments on this test to w3c-wai-ua@w3.org ( public archive ).

Test created by:

Last modified: $Date: 2003/04/02 23:46:38 $ by $Author: jongund $

Copyright © 1999 - 2003 W3C® ( MIT , INRIA , Keio ), All Rights Reserved. W3C liability , trademark , document use and software licensing rules apply.