Summary
Ensure the content of a publication reflows to fit within the available screen space when zoomed up to 400%.
Techniques
-
Use CSS to adapt layouts [[WCAG-1.4.10]]
-
Use relative size units for container elements [[WCAG-1.4.10]]
-
Enable line breaking of long words [[WCAG-1.4.10]]
Explanation
WCAG's Reflow success criterion requires that content not require scrolling in two dimensions as it is zoomed to 400% on a standard desktop screen at 1080px wide and 1024px high resolution. For vertical scrolling pages, this requirement means that the user must not have to scroll horizontally to read the content (with some exceptions for content that cannot adapt without becoming unusable or unreadable); the content should adapt to fit within the screen area.
This sort of adaptation is known as responsive web design. Web site authors use CSS layouts together with media queries to reduce multi-column page layouts down to a single column as the available screen space is reduced.
Reflowable Publications
Unlike web sites, reflowable digital publications are not generally laid out in columns or grids. As a result, meeting the reflow requirement typically does not require a lot of additional work for most basic works like novels.
Authors only need to ensure that they have styled the content so that it can adapt as it is zoomed. Some common problems that can break the reflow requirement even in reflowable books include:
- Styling elements using absolute units like pixels — as the visible screen area is reduced, these units cannot adapt to the changes but stay fixed (i.e., forcing scrollbars).
- Using layout tables to place content in grids — tables can only be compressed so much, whereas using CSS styling allows authors to change from grid layouts to a single column as the zooming changes.
- Not allowing word wrapping of long words — Soft hyphens (­) and CSS word break handling rules can minimize scrolling caused by very long words or URLs.
Fixed Layouts
Caution
The problems of meeting this requirement for fixed layouts are currently under discussion in the W3C EPUB 3 Working Group. Additional guidance will be provided in future updates to this page.
Whether fixed layouts meet the reflow requirement depends on how they are constructed:
-
Image-based fixed layouts, where the two-dimensional presentation is essential to the content, are likely exempt from the requirement not to need scrolling as they are scaled. This category includes pages in comics and manga, pages in illustrated children's books (where the text is part of the illustration), maps, and graphics.
-
All other types of fixed layouts (i.e., where the positioning of the content has no meaning and is purely presentational) must meet the reflow requirement.
Although in theory it would be possible to use adaptive design techniques to make fixed layout content reflow as it is zoomed, the lack of reading system support in EPUB for rerendering fixed layout pages as they scale makes it impossible to author conforming content at this time.
EPUB reading systems typically only allow users to zoom fixed layout pages on mobile devices, but even here they scale the whole page. Consequently, such content cannot meet the WCAG requirement for accessibility support in user agents no matter what the author does to make their content accessible.
Moreover, there may not even be enough support for zooming on desktop reading systems for any fixed layout content to meet the requirement for being accessibility supported.
As a result, it is likely not possible to make a claim of WCAG AA support for fixed layout publications at this time.