WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Best CSS Layout for Accessibility

for

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

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