Summary

Avoid the use of fixed layouts when content has to be broadly accessible.

Explanation

A fixed-layout publication is one where each page has a fixed size (height and width) and the content is precisely laid out at specific locations. Fixed layouts are commonly created using images, but can also be achieved in HTML through the use of absolute positioning with CSS. They are typically used to create comics, manga, children's story books, cookooks and textbooks, but can be found in any material trying to reproduce pixel-precise layouts.

The use of fixed layouts presents a number of challenges for accessibility. The use of images, for example, typically limits access to the text. Similarly, changes to the default fonts and zooming of a page can lead to excessive scrolling or text to be cut off entirely. Content spread across two pages can lose all meaning when only half the information is available at any given time.

This document does not attempt to provide solutions to these problems, as many of them can only be solved by designing content to reflow. It instead intends to serve as a reference to the various issues that arise from fixed layouts as they pertain to meeting WCAG conformance requirements.

The following table identifies some of the most common level A and AA success criteria that fail due to the use of fixed layouts.


Success Criterion Problems
1.1.1 Non-text Content (A)

Image-based fixed layouts, such as comics and manga, typically fail this requirement as alternative text and descriptions cannot capture all of the story conveyed through the imagery. A separate serialization of the story is often required.

1.3.1 Info and Relationships (A)

Generic elements, like span and div are often used to position text statically within a page, leaving the user with few structural aids to navigate the content (e.g., no headings, no tables).

1.3.2 Meaningful Sequence (A)

Because content elements can be visually placed wherever needed, care is not always taken to ensure that a logical sequence is maintained in the markup. When an assistive technology reads such a work, information and dialogue are rendered out of sequence.

In the case where content is laid out over two pages, the logical sequence may require a visual reader to move back and forth from page to page. This type of sequece cannot be represented in the markup.

1.3.4 Orientation (AA)

Fixed-layout pages are usually designed to be rendered in a specific orientation, and authors may indicate that reading systems should only render the content in that orientation.

1.4.4 Resize Text (AA)

Users are typically prevented by reading systems from changing the fonts of fixed-layout publications to ensure the content is rendered how the author designed it.

1.4.5 Images of Text (AA)

Images of text are often used to prevent users from changing the font and altering the design of fixed-layout pages.

1.4.10 Reflow (AA)

Due to the fixed dimensions of a fixed-layout page, the zoom requirement of this success criterion typically results in the user having to scroll both axes to read the content.

1.4.12 Text Spacing (AA)

Even if users are allowed to change the appearance, adding spacing can force text to exceed the boundaries of its container element and/or page. In this case, the overflow text is often hidden from sight.

References