WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Best CSS Layout for Accessibility

for

From: Bryan Garaventa
Date: Dec 13, 2011 3:42PM

It's also good to keep in mind that CSS can be used to arrange visual
columns that contradict the reading order like so.

rightColumn
middleColumn
leftColumn

Using float:right these can be arranged properly using CSS, however the
reading order and tab order will not match the visual layout for screen
reader and keyboard only users.


----- Original Message -----
From: "Jared Smith" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Tuesday, December 13, 2011 2:24 PM
Subject: Re: [WebAIM] Best CSS Layout for Accessibility


> 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
>