Techniques for WCAG 2.0

On this page:

-

# C26: Providing options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text

## Applicability

Pages that use CSS.

This technique relates to:

- Success Criterion 1.4.8 (Visual Presentation)
  - How to Meet 1.4.8 (Visual Presentation)
  - Understanding Success Criterion 1.4.8 (Visual Presentation)

## Description

There may be situations where an author needs to use a layout that requires horizontal scrolling. In that case, it is sufficient to provide options within the content that switch to a layout that does not require the user to scroll horizontally to read a line of text. This may be achieved using standard style switching technology.

It should be noted that it is also sufficient to lay out the content in such a way that horizontal scrolling is required to access content, but that it is not necessary to scroll horizontally in order to read a line of text.

For instance, a spreadsheet that requires horizontal scrolling is acceptable if no horizontal scrolling is necessary for each column individually. (i.e., scrolling is only necessary to see other columns, but not for the left or right edges of each individual column. I find it hard to formulate this in a completely unambiguous way.)

Note: This technique can be used in combination with a style switching technique to present a page that is a conforming alternate version for non-conforming content. Refer to C29: Using a style switcher to provide a conforming alternate version and Understanding Conforming Alternate Versions for more information.

## Examples

### Example 1

A real estate company has an online annual report that has an identical layout to that of their print version, and as such, requires horizontal scrolling to read a line of text. A control is on the page that switches the stylesheet and provides a layout that does not require horizontal scrolling.

### Example 2

A financial spreadsheet is online. It includes text explaining changes in the housing market in January. Off-screen to the right, there is a column with an explanation of changes to the market in September. The user can horizontally scroll to the September area and read each line of text without any further scrolling when the window size is maximized.

## Related Techniques

- C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized

## Tests

### Procedure

1. Open the content that requires horizontal scrolling on a full screen window.

2. Check that there is an option within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text.

3. Activate the option.

4. Check to make sure that horizontal scrolling is not required to read any line of text.

### Expected Results

- Checks #2 and #4 are true.

- Top
- Contents
- Intro
- Previous: Technique C25
- Next: Technique C27