WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Best CSS Layout for Accessibility

for

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

One thing that's nice about having nav first is that it allows keyboard only
users to access nav links at the beginning rather than at the end of the
page. Screen reader users have more options when it comes to quickly jumping
around, but non-screen reader keyboard only users should be taken into
account as well.
:)


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


> Hi Bryan,
>
> Thanks for your email. In the past, I have used two column layouts that
> put
> the main content first and then the navigation...but when I went to do
> this
> three column layout I saw the WebAim article and then wondered whether I
> should do that or not...I have always felt that the order I used was
> okay-it was banner, content and then navigation (the div order).
>
> I guess what I was musing about was...whether those who use screen readers
> prefer a certain order (content first or does it matter?), or whether they
> use the shortcuts in their screen readers and that makes the layout less
> important. I hope that makes sense, I have a whacking cold today!
>
> Those of you who use screen readers, do you prefer the content first and
> then the banner, navigation, etc.? Does it bother you if this order is
> different?
>
> Cheers
>
> Lisa
>
> On Tue, Dec 13, 2011 at 1:57 PM, Bryan Garaventa <
> <EMAIL REMOVED> > wrote:
>
>> CSS has no impact on reading order from an AT standpoint. The best way to
>> see how it will be viewed in ATs is to disable CSS and judge whether the
>> reading order is sensible. The tab order will follow the same principle.
>>
>> ----- Original Message -----
>> >> I need to produce an accessible website and was thinking about which
>> >> css
>> >> layout would be best for people who use screen readers. I want to do a
>> >> three column css layout and wondered, where do you put the main
>> >> content?
>> >> Is
>> >> it first, third, other? Webaim shows two examples of what I mean:
>> >>
>> >> http://webaim.org/techniques/css/advantage#layout
>> >>
>> >> I have been going back and forth on whether navigation or content
>> >> should
>> >> go
>> >> first...I usually use skip links to help as well.
>> >>
>>
>