WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Best CSS Layout for Accessibility

for

From: Birkir R. Gunnarsson
Date: Dec 13, 2011 4:12PM

As a screen reader user, I prefer, generally speaking, navigation
first (or on top if you will), followed by main content (which has to
be clearly and consistently marked, with an h1 or a main aria
landmark) and banner information at the end.
One uses the navigation a lot more often than the banner info, which
leads me to believe it is most useful to put banner on the bottom (as
it is being viewed less than the rest of the content).
I have seen many pages with main content before navigation. I can't
exactly put my finger on why, but it has never felt natural to me (of
course you are just getting the views of one screen reader user here).
It is probably that it feels more natural to me to have my choices of
where to go first, rather than having to find my way through the main
content of the page before locating my choices (imagine I realized the
article I wanted to read turned out to be boring or irrelevant, and
full of its own links, it can take more time to jump over it than to
press ctrl-home to go to top of page and then navigate to a different
page). Of course proper use of headings and landmarks has really done
away with a lot of these design issues, because, when properly
implemented, they allow users to jump to virtually any part of the
page in no time.
Both myself and a lot of screen reader users I have taught, use the
"n" key, or jumping to the next element of different content,
extensively for navigation.
This also makes it easy to find the start of the main text in a
document, because it jumps over the series of navigation links at the
top of the page.

Like Jared said, making sure that screen reader navigation is at least
consistent with visual layout does help resolve issues and facilitate
understanding between screen reader users and sighted colleagues
(customer service reps, for instance, will clam up if I tell them I am
blind, when they tell me to click the red banner in the left column of
the page, so I try to deduct the layout from what they say and get it
done without further explanations).
I've always wanted more page layout information possibilities with my
screen reader. I generally have no idea whether the page I am useing
has two or three-column layout, and it does bother me there is no easy
and simple way for me to find out.
Thanks
-B

On 12/13/11, Bryan Garaventa < <EMAIL REMOVED> > wrote:
> 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
>>