Making Accessible Websites for the United Nations

Page Design: Coding

Using Relative Units

WAI Definition (Checkpoint 3.4)

Use relative rather than absolute units in markup language attribute values and style sheet property values.

Explanation

Define the size of elements with relative units such as "em" and "%". Do not use absolute or fixed units such as "pixels" or "points".

Rationale

If the font size is fixed, the user can't scale the text in order to facilitate legibility. If the width of the page is designed to display well in a fixed browser window size and the user enlarges the text, it could become too large to display on screen. This affects users who are viewing content on a small screen, such as a mobile device or laptop, or users with poor eyesight. Relative sizing also means that the website can be used on a wider selection of devices.

Technique

Use CSS to format elements with relative units (em).

Examples

CSS, using "em" to set font sizes
h1 {font-size: 3em;}

rather than

h1 {font-size: 20px;}
CSS, using percentages to set width and margins
div#main {
  width: 75%;
  margin-left: 15%;
  margin-right: 10%;
}

Validation

Test

Using the Firefox Web Developer's Toolbar (plugin):
Go to CSS > View CSS.

Success Criteria

All sizes are set in "%" or "em".

Note

Margin and padding values can be set using absolute units ("px").

This requirement for relative units does not apply to print style sheets.