2.6 Use relative rather than absolute units

WAI Checkpoint 3.4

Full WAI text: "Use relative rather than absolute units in mark-up language attribute values and style sheet property values."

Mark-up languages are languages like HTML which are used to define web pages. The HTML mark-up for elements such as text, headings and hyperlinks may specify presentation attributes such as the fonts, sizes and colours to be used. Style sheets can also be used to specify the presentation attributes of elements.

These attributes may be specified in either absolute or relative units. Absolute units are fixed values, such as a 12 point font size or an 800 pixel column width. Relative units define size in measurements like ems (a unit of width relative to a font size), or percentages of the total width of the browser window.

Whether controlled by mark-up or style sheets, sizes should be defined in relative units rather than absolute units.

Screen grab of web page showing some fixed and some resizable elements

Use HTML text and ensure that it is resizable

Browsers allow users to resize text that is specified in relative values. In this example the user cannot increase the size of the main navigation because tab graphics are used instead of HTML text. The sub navigation is scaleable because resizable HTML text is used.

Rationale

Designing for fixed sizes, such as for one "optimum" browser window size may look like a good idea on paper, as you may feel that you are controlling the presentation of the interface but in reality, it is a wasted effort. If an interface is designed with one "fixed" browser window size in mind, at best, it will not work well or will be completely unusable if the user does not work with that size window, as key features will disappear off the edge of the screen.

This affects users with smaller monitors, or users who like to enlarge the text size. 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.

If the font size is fixed, the user can't scale it up to make it easy to read. They might want to do this if they were viewing content on a small screen, such as a mobile device or laptop, or if they have poor eyesight.Also, you will incur additional costs every time you decide to make your service available on another access device or platform, due to the effort required to "fit" the interface design in the new window size. Relative sizing not only means that the web site can be used on a wider variety of access devices, with the minimum design effort but you will also provide users with the flexibility to scale key elements to a size that suits their needs.

Directions and Techniques

Refer to the WAI recommended techniques for this guideline

See the WAI recommended techniques for using relative units of measurement

How you could check for this:

Try to change the size of text in the browser window

If you cannot re-size the text in the browser window by using the controls provided in the browser menu, this means that the font size has been defined with absolute sizes.

Test the site on various browser window sizes and monitor sizes

If you cannot see all of the content without scrolling horizontally, this means that the width of the window, or the tables on the page have been defined with absolute sizes. Note that images are an exception to this. Images cannot be re-scaled so they will not flow into a smaller window size in the same way that text will.

- View WAI Checkpoint 3.4