Techniques for WCAG 2.0

Skip to Content (Press Enter)

This document is a draft, and is designed to show changes from a previous version. It is presently showing added text,changed text,deleted text,[start]/[end] markers,and Issue Numbers.

Hide All Edits   |   Toggle Deletions  |   Toggle Issue Numbers   |   Toggle [start]/[end] Markers   |   Show All Edits

Changes are displayed as follows:

-

G146: Using liquid layout

Applicability

Applies to all technologies.

This technique relates to:

Description

The objective of this technique is to be able to present content without introducing horizontal scroll bars by using layout techniques that adapt to the available horizontal space. Liquid layouts define layout regions that both resize with text, and reflow as needed to display the region on the screen. Although the exact layout therefore varies, the relationship of elements and the reading order remains the same. This is an effective way to create designs that present well on different devices and for users with different font size preferences.

The basic principles of liquid layouts are to:

  1. Define the size of layout regions using units that will cause the region to scale relative to text, so they enlarge or shrink as text is enlarged or shrunk;

  2. Position the layout regions as a row of adjacent floating boxes, which wrap to new rows as needed in much the same way as words in a paragraph wrap.

Complex liquid layouts may be achieved by nesting layout regions, thus creating localized liquid layouts within a larger liquid layout. Even simple liquid layouts require design finesse to achieve good-looking results at a wide range of text sizes, but well-designed liquid layouts can be the most effective page design.

Examples

Example 1: Simple liquid layout in HTML and CSS

The following fairly simple example uses HTML and CSS to create a liquid layout. The three columns adjust their size as text size is adjusted. When the total horizontal width exceeds the available width of the columns, the last column wraps to be positioned below, rather than beside, the previous column. The font size can be increased without either clipping or introducing horizontal scrolling until the longest word no longer fits in a column. This particular example uses percent sizes for the columns and defines them as floating regions using the "float" property.

Example Code:


              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <meta http-equiv="content-type" content="text/html; charset=utf-8" />
                <title>Example of Basic Liquid Layout</title>
                <style type="text/css">
                .column
                {
                border-left: 1px solid green;
                padding-left:1%;
                float: left;
                width: 32%;
                }
                #footer
                {
                border-top: 1px solid green;
                clear: both;
                }
                </style>
                </head>
                <body>
                <h1>WCAG Example</h1>
                <h2>Text in Three Columns</h2>
                <div title="column one" class="column">
                <h3>Block 1</h3>
                <p> The objective of this technique is to be able to present content 
                without introducing horizontal scroll bars by using layout 
                techniques that adapt to the available horizontal space.
                </p>
                </div>
                <div title="column two" class="column">
                <h3>Block 2</h3>
                <p> This is a very simple example of a page layout that adapts as the
                text size changes.
                </p>
                </div>
                <div title="column three" class="column">
                <h3>Block 3</h3>
                <p> For techniques that support more complex page layouts, see the
                Resources listed below.
                </p>
                </div>
                <p id="footer">Footer text</p>
                </body>
                </html>
            

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

  1. Display content in a user agent.

  2. Increase text size to 200%.

  3. Check whether all content and functionality is available with no horizontal scrolling.

Expected Results

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.