Skip Main Navigation

Accessible Web Structure

CSS Positioning, Reading Order, and Navigation

You can use CSS positioning to accomplish many of the layout tasks often handled with tables. As with layout tables, when you use CSS positioning you must remember that the order in which elements appear on the screen may not match the order in which people with screen-readers and talking browsers will hear them. But with CSS, reading order is not necessarily bound to the display order. Screen-readers and talking browsers base their reading order on the order in which they encounter elements in the source document. This means you can sequence elements in the source document to play well in readers, and then use CSS to create the visual arrangement that works best as well.

Example

CSS positioning of the page elements in the following example makes it possible to display the menu on the right, while still ensuring that a screen reader will read the menu first.

Page layout using CSS positioning

Same page without the stylesheet (reading order)

Links

glish CSS layout techniques
(http://www.glish.com/css)

up arrow back to top