WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Best CSS Layout for Accessibility

for

From: Jared Smith
Date: Dec 13, 2011 3:24PM

The source code order should generally mirror the visual presentation
order - left to right, top to bottom. In other words, present it in
source code in about the same order as it would be viewed by sighted
users. This is usually header, left column (if present), main content,
right column (if present), footer.

With right side columns becoming very prevalent, I usually consider
whether it's relevant to the page itself (put it before the main
content) or if it's relevant to the content itself (put it after the
content). There's no "right" way to do this.

Not only does the source code order determine the screen reader
reading order, but also visual navigation order. A sighted keyboard
user will expect navigation to be left to right, top to bottom. If it
jumps around the page, the user can easily lose track of where they
are at in the page.

Jared