E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: Best CSS Layout for Accessibility

Number of posts in this thread: 14 (In chronological order)

From: LSnider
Date: Tue, Dec 13 2011 2:36PM
Subject: Best CSS Layout for Accessibility
No previous message | Next message →

Hi Everyone,

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.

Cheers

Lisa

From: Ryan E. Benson
Date: Tue, Dec 13 2011 2:51PM
Subject: Re: Best CSS Layout for Accessibility
← Previous message | Next message →

Lisa,

I don't really have a suggestion about reading order. If you are
leaning towards the content (after header), check out the Holy Grail:
http://www.alistapart.com/articles/holygrail. It doesn't depend on
absolute positioning.

--
Ryan E. Benson

On Tue, Dec 13, 2011 at 4:34 PM, LSnider < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Everyone,
>
> 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.
>
> Cheers
>
> Lisa
>

From: Bryan Garaventa
Date: Tue, Dec 13 2011 3:00PM
Subject: Re: Best CSS Layout for Accessibility
← Previous message | Next message →

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 -----
From: "Ryan E. Benson" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Tuesday, December 13, 2011 1:49 PM
Subject: Re: [WebAIM] Best CSS Layout for Accessibility

> Lisa,
>
> I don't really have a suggestion about reading order. If you are
> leaning towards the content (after header), check out the Holy Grail:
> http://www.alistapart.com/articles/holygrail. It doesn't depend on
> absolute positioning.
>
> --
> Ryan E. Benson
>
>
>
> On Tue, Dec 13, 2011 at 4:34 PM, LSnider < = EMAIL ADDRESS REMOVED = > wrote:
>> Hi Everyone,
>>
>> 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.
>>
>> Cheers
>>
>> Lisa
>>

From: LSnider
Date: Tue, Dec 13 2011 3:06PM
Subject: Re: Best CSS Layout for Accessibility
← Previous message | Next message →

Hi Ryan,

Thanks. I love the Holy Grail!

Cheers

Lisa

On Tue, Dec 13, 2011 at 1:49 PM, Ryan E. Benson < = EMAIL ADDRESS REMOVED = >wrote:

> Lisa,
>
> I don't really have a suggestion about reading order. If you are
> leaning towards the content (after header), check out the Holy Grail:
> http://www.alistapart.com/articles/holygrail. It doesn't depend on
> absolute positioning.
>
> --
> Ryan E. Benson
>
>
>
> On Tue, Dec 13, 2011 at 4:34 PM, LSnider < = EMAIL ADDRESS REMOVED = > wrote:
> 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.
> >
> > Lisa
>
>

From: Bryan Garaventa
Date: Tue, Dec 13 2011 3:12PM
Subject: Re: Best CSS Layout for Accessibility
← Previous message | Next message →

True, yet screen readers process the reading order based on the source code
order of the page, not where elements are positioned using CSS.

----- Original Message -----
From: "Ryan E. Benson" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Tuesday, December 13, 2011 2:07 PM
Subject: Re: [WebAIM] Best CSS Layout for Accessibility

> Actually it does Bryan, via CSS the rendering could be done in such a
> way the source looks like Header, footer, body, sidebar. Why somebody
> would lay it out like that is beyond me, but can be done...
> --
> Ryan E. Benson
>
>
>
> On Tue, Dec 13, 2011 at 4:57 PM, Bryan Garaventa
> < = EMAIL ADDRESS 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 -----
>> From: "Ryan E. Benson" < = EMAIL ADDRESS REMOVED = >
>> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>> Sent: Tuesday, December 13, 2011 1:49 PM
>> Subject: Re: [WebAIM] Best CSS Layout for Accessibility
>>
>>
>>> Lisa,
>>>
>>> I don't really have a suggestion about reading order. If you are
>>> leaning towards the content (after header), check out the Holy Grail:
>>> http://www.alistapart.com/articles/holygrail. It doesn't depend on
>>> absolute positioning.
>>>
>>> --
>>> Ryan E. Benson
>>>
>>>
>>>
>>> On Tue, Dec 13, 2011 at 4:34 PM, LSnider < = EMAIL ADDRESS REMOVED = > wrote:
>>>> Hi Everyone,
>>>>
>>>> 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.
>>>>
>>>> Cheers
>>>>
>>>> Lisa
>>>>

From: Ryan E. Benson
Date: Tue, Dec 13 2011 3:18PM
Subject: Re: Best CSS Layout for Accessibility
← Previous message | Next message →

Actually it does Bryan, via CSS the rendering could be done in such a
way the source looks like Header, footer, body, sidebar. Why somebody
would lay it out like that is beyond me, but can be done...
--
Ryan E. Benson

On Tue, Dec 13, 2011 at 4:57 PM, Bryan Garaventa
< = EMAIL ADDRESS 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 -----
> From: "Ryan E. Benson" < = EMAIL ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
> Sent: Tuesday, December 13, 2011 1:49 PM
> Subject: Re: [WebAIM] Best CSS Layout for Accessibility
>
>
>> Lisa,
>>
>> I don't really have a suggestion about reading order. If you are
>> leaning towards the content (after header), check out the Holy Grail:
>> http://www.alistapart.com/articles/holygrail. It doesn't depend on
>> absolute positioning.
>>
>> --
>> Ryan E. Benson
>>
>>
>>
>> On Tue, Dec 13, 2011 at 4:34 PM, LSnider < = EMAIL ADDRESS REMOVED = > wrote:
>>> Hi Everyone,
>>>
>>> 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.
>>>
>>> Cheers
>>>
>>> Lisa
>>>

From: Jared Smith
Date: Tue, Dec 13 2011 3:24PM
Subject: Re: Best CSS Layout for Accessibility
← Previous message | Next message →

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

From: Barry Johnson
Date: Tue, Dec 13 2011 3:30PM
Subject: Re: Best CSS Layout for Accessibility
← Previous message | Next message →

Thank you Jared.

We often forget about how a screen magnifier user or keyboard users or sip-n-puffers or a Braille reader interacts with a site.
Developers/designers should remember that rearranging things on the page, just because they can isn't really the best idea.

Barry Johnson
*******************
Safety First - Everyone Goes Home

On Dec 13, 2011, at 5:24 PM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:

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

From: LSnider
Date: Tue, Dec 13 2011 3:36PM
Subject: Re: Best CSS Layout for Accessibility
← Previous message | Next message →

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

From: Bryan Garaventa
Date: Tue, Dec 13 2011 3:42PM
Subject: Re: Best CSS Layout for Accessibility
← Previous message | Next message →

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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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
>

From: Bryan Garaventa
Date: Tue, Dec 13 2011 3:48PM
Subject: Re: Best CSS Layout for Accessibility
← Previous message | Next message →

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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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.
>> >>
>>
>

From: Birkir R. Gunnarsson
Date: Tue, Dec 13 2011 4:12PM
Subject: Re: Best CSS Layout for Accessibility
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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
>>

From: Birkir R. Gunnarsson
Date: Tue, Dec 13 2011 4:30PM
Subject: Re: Best CSS Layout for Accessibility
← Previous message | Next message →

From: LSnider
Date: Wed, Dec 14 2011 3:27PM
Subject: Re: Best CSS Layout for Accessibility-Thanks
← Previous message | No next message

Hi Everyone,

Thanks so much for your feedback. When I started with css layouts I did it
like you saw on screen and then I changed because I was told that screen
readers liked a different thing. I like to make sites as accessible as
possible for everyone, so now I can make changes.

Thanks again, appreciate all the feedback!

Cheers

Lisa
On Tue, Dec 13, 2011 at 3:13 PM, Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote: