No Boundaries Logo

Web Accessibility Policy of the State of Maine

Back to Policy Table of Contents

Implementation Guidelines

17. Page Layout

17.1 - When using tables for layout, make sure that reading order is logical.

What:
Layout tables are HTML tables used to lay out a web page in multiple columns and sections (as opposed to tables that actually present data.) "Reading order" refers to the order in which a screen reader would read through the table. For example, the reading order for a simple table might be (1) row 1, cell 1, (2) row 1, cell 2, (3) row 2, cell 1, and (4) row 2, cell 2.

Why:
Screen readers read through tables in the order in which cells are defined in the table code, which can be very different from the order that someone reading visually would follow. It is essential that the reading order match the logical flow of the document so that a screen reader user would hear the document in the same order that a visual reader would read it.

How:
Check the reading order by following the order in which the table cells appear in the code. It may be possible to combine cells and/or nest tables to achieve an appropriate reading order. You may wish to use one of the available tools to view a linearized version of your page, such as the online Lynx simulator.

Ref: WCAG 5.3

17.2 - When using style sheets for layout, make sure that reading order is logical when style sheets are not supported.

What:
The positioning features of Cascading Style Sheets can be used to position elements visually almost anywhere on a web page.

Why:
As with layout tables, screen readers read through the elements on a web page in the order in which they appear in the page code, regardless of how they are positioned using style sheets. It is essential that the reading order match the logical flow of the document so that a screen reader user would hear the document in the same order that a visual reader would read it.

How:
Check the reading order by following the order in which elements appear in the page code. Reading order can usually be adjusted by rearranging the order in which elements are defined in the code.

Ref: WCAG 6.1; 508 d

17.3 - Minimize the need for horizontal scrolling.

What:
If a web page is wider than the window or screen in which it is viewed, most browsers will display a horizontal scroll bar and require the user to manually scroll to see the entire page.

Why:
When a screen magnifier enlarges a web page, it also reduces the field of view so that the user must pan (scroll) to see the entire page. When the web page being viewed also requires horizontal scrolling, the combination can be awkward or unusable. Keyboard users may also find repetitive scrolling fatiguing and inefficient.

How:
Design pages so that they can resize to fit the width of the user's browser. Use relative widths on tables and frames used for layout and make sure that horizontally adjacent images are less than a total of 600 pixels wide. If scrolling cannot be avoided, place the least important content in the rightmost part of the page.

Ref: WCAG 3.4