WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Re: Sample Sites

for

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

From: Timothy J. Luoma
Date: Thu, Aug 29 2002 8:17PM
Subject: Re: Sample Sites
No previous message | Next message →


Patricia Chadwick wrote:
> Hi,
>
> I'm looking for examples of accessible sites that use CSS that work
> reasonably well across browsers. I'm particularly interested in sites
> for non-profit organizations, as I'm looking to re-design a site for a
> non-profit and need some ideas and would like to see what does and
> doesn't work.

Well I think http://1stpc.org works "reasonably well" cross browsers.
It works really well in current browsers and has some "safe" CSS for NN4
although it isn't identical.

The site is XHTML 1.0 Strict, fully CSS, tableless, as well as 508 and
AAA compliant.

TjL


--
30 Days to becoming an Opera Lover
http://www.tntluoma.com/opera/lover/
Day Five: As You Like It (customizing Opera)
http://www.tntluoma.com/opera/lover/day05-customize/



----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/


From: Steve Vosloo
Date: Fri, Aug 30 2002 10:00AM
Subject: RE: Sample Sites
← Previous message | Next message →

The site is great. I viewed it without style sheets and noticed that
when linearized the page content comes first and then the left hand
links. Is this intentional -- I normally do it the other way around.

Steve



> -----Original Message-----
> From: Timothy J. Luoma [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: 30 August 2002 05:05 AM
> To: WebAIM Forum
> Subject: Re: Sample Sites
>
>
>
> Patricia Chadwick wrote:
> > Hi,
> >
> > I'm looking for examples of accessible sites that use CSS
> that work > reasonably well across browsers. I'm
> particularly interested in sites > for non-profit
> organizations, as I'm looking to re-design a site for a >
> non-profit and need some ideas and would like to see what
> does and > doesn't work.
>
> Well I think http://1stpc.org works "reasonably well" cross browsers.
> It works really well in current browsers and has some "safe"
> CSS for NN4
> although it isn't identical.
>
> The site is XHTML 1.0 Strict, fully CSS, tableless, as well
> as 508 and
> AAA compliant.
>
> TjL
>
>
> --
> 30 Days to becoming an Opera Lover
> http://www.tntluoma.com/opera/lover/
> Day Five: As You Like It (customizing Opera)
> http://www.tntluoma.com/opera/lover/day05-customize/
>
>
>
> ----
> To subscribe, unsubscribe, or view list archives,
> visit http://www.webaim.org/discussion/
>


----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/


From: Timothy J. Luoma
Date: Fri, Aug 30 2002 11:33AM
Subject: Re: Sample Sites
← Previous message | Next message →

Steve Vosloo wrote:
> The site is great. I viewed it without style sheets and noticed that
> when linearized the page content comes first and then the left hand
> links. Is this intentional -- I normally do it the other way around.

Absolutely.

Two reasons, one intentional, one not:
1) lynx and screen readers: If you have used lynx a lot (and I have, it
was my primary browser for some time) you know how awful it is trying to
get to the 'meat' of a page because there's usually so much fluff before
it -- OR you get the same navigation menus over and over again on each
page, which gets annoying fast

2) Google loves me. I'm not sure why, I haven't done anything special
at all to appeal to them, but my site (www.tntluoma.com) is near the top
of a number of keyword searches. I wish I knew the secret to why it
was, because all I have done is written for the standards and used CSS
extensively. My guess is that the proper use of HTML (headers, link
text beyond 'click here') has a lot to do with it, and the use of CSS
has greatly limited the page weight. I don't have a lot of sites
linking to me, so it's not a Google bomb or anything like that. It's
all about the code.

My guess is that if we (folks who care about accessibility and
standards) could show others (who don't know or don't care) how much
improvement they would have in search engine placement by following
standards, they'd probably listen more.


For more on linearized design and its importance for accessibility, see

http://diveintoaccessibility.org/day_10_presenting_your_main_content_first.html
http://diveintoaccessibility.org/day_11_skipping_over_navigation_links.html


--
30 Days to becoming an Opera Lover
http://www.tntluoma.com/opera/lover/
Day Five: As You Like It (customizing Opera)
http://www.tntluoma.com/opera/lover/day05-customize/



----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/


From: Tom Gilder
Date: Fri, Aug 30 2002 12:33PM
Subject: Re: Sample Sites
← Previous message | Next message →

On Friday, August 30, 2002, 7:26:08 PM, you wrote:
> > > http://1stpc.org
> > The site is great. I viewed it without style sheets and noticed that
> > when linearized the page content comes first and then the left hand
> > links. Is this intentional -- I normally do it the other way around.
>
> 1) lynx and screen readers: If you have used lynx a lot (and I have, it
> was my primary browser for some time) you know how awful it is trying to
> get to the 'meat' of a page because there's usually so much fluff before
> it -- OR you get the same navigation menus over and over again on each
> page, which gets annoying fast

However, what if you *want* to get to the navigation quickly using a
screenreader? In that case, you have to listen to the entire page
content beforehand.

In my opinion it makes more sense (visually, at least) to have
navigation before content - and then provide a "skip navigation"
link. You could also solve this problem with a "jump to navigation"
link near the start of the document.

This is a bit of an accessibility hack, and I feel future versions of
XHTML need to allow authors a standard way to label what is content
and what is navigation, to allow screenreader users to quickly
navigate between the two (I put some thoughts on that issue up at
<http://tom.me.uk/2002/8/dividing-pages.html>;).

> 2) Google loves me. I'm not sure why, I haven't done anything
> special at all to appeal to them, but my site (www.tntluoma.com) is
> near the top of a number of keyword searches.

Google tends to rate pages higher if the content is nearer the
beginning of the document. It also pays attention to headers (I do
hope this won't lead to <body><h1>...</h1></body> to try and get
better search engine ranking though).

> My guess is that if we (folks who care about accessibility and
> standards) could show others (who don't know or don't care) how much
> improvement they would have in search engine placement by following
> standards, they'd probably listen more.

When I have tried to explain to people in the past why something like
<h1><img src="logo.png" alt="My Company" /></h1> makes sense, they
often haven't cared much until I've gone "oh, and it might well
increase your Google ranking too".

If you can come up with a benefit of accessibility that marketing
people speak, then they are far more likely to listen :)


Cheers
--
Tom Gilder
http://tom.me.uk/


----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/


From: Timothy J. Luoma
Date: Fri, Aug 30 2002 1:00PM
Subject: Re: Sample Sites
← Previous message | Next message →

Tom Gilder wrote:

> However, what if you *want* to get to the navigation quickly using a
> screenreader? In that case, you have to listen to the entire page
> content beforehand.

I have usually[*] done the 'jump to navigation' version.

I assume if someone came to a page they want to read what is on it. If
they don't, then I'll give them the option to jump to navigation. That
way if they are reading several pages linked together, they don't have
to jump over 15 navigation links.

[1] I had not done it for 1stpc.org... there, done... I love working
with PHP I also added an accesskey for navigation

Much better

TjL


--
30 Days to becoming an Opera Lover
http://www.tntluoma.com/opera/lover/
Day Five: As You Like It (customizing Opera)
http://www.tntluoma.com/opera/lover/day05-customize/



----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/


From: Steve Vosloo
Date: Sun, Sep 01 2002 11:54PM
Subject: <h> around images
← Previous message | Next message →

Tom, I'm changing the thread to ask you about <h1><img src="logo.png"
alt="My Company" /></h1> ...

Is it alright to do this? A client of mine has a site where every page
title is a GIF ... I told them to rather change it to HTML text using an
<h1> header. Could I have told them to simply put <h1> tags around the
image?

Because of the resizing of text factor I think HTML text is a better
long term solution ... But on a tight budget it'd be better for them to
use <h1>'s around an image than ignore the problem completely.

Thanks
Steve



> -----Original Message-----
> From: Tom Gilder [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: 30 August 2002 09:26 PM
> To: = EMAIL ADDRESS REMOVED =
> Subject: Re: Sample Sites
>
>
> On Friday, August 30, 2002, 7:26:08 PM, you wrote:
> > > > http://1stpc.org
> > > The site is great. I viewed it without style sheets and
> noticed that
> > > when linearized the page content comes first and then the
> left hand
> > > links. Is this intentional -- I normally do it the other
> way around.
> >
> > 1) lynx and screen readers: If you have used lynx a lot
> (and I have,
> > it was my primary browser for some time) you know how awful it is
> > trying to get to the 'meat' of a page because there's
> usually so much
> > fluff before it -- OR you get the same navigation menus
> over and over
> > again on each page, which gets annoying fast
>
> However, what if you *want* to get to the navigation quickly
> using a screenreader? In that case, you have to listen to the
> entire page content beforehand.
>
> In my opinion it makes more sense (visually, at least) to
> have navigation before content - and then provide a "skip
> navigation" link. You could also solve this problem with a
> "jump to navigation" link near the start of the document.
>
> This is a bit of an accessibility hack, and I feel future
> versions of XHTML need to allow authors a standard way to
> label what is content and what is navigation, to allow
> screenreader users to quickly navigate between the two (I put some
thoughts on that issue up at > <http://tom.me.uk/2002/8/dividing->;
pages.html>).
>
> > 2) Google
> loves me. I'm not sure why, I
> haven't done anything special
> > at all to appeal to them, but my site (www.tntluoma.com) is
> near the
> > top of a number of keyword searches.
>
> Google tends to rate pages higher if the content is nearer
> the beginning of the document. It also pays attention to
> headers (I do hope this won't lead to
> <body><h1>...</h1></body> to try and get better search engine
> ranking though).
>
> > My guess is that if we (folks who care about accessibility and
> > standards) could show others (who don't know or don't care)
> how much
> > improvement they would have in search engine placement by following
> > standards, they'd probably listen more.
>
> When I have tried to explain to people in the past why
> something like <h1><img src="logo.png" alt="My Company"
> /></h1> makes sense, they often haven't cared much until I've
> gone "oh, and it might well increase your Google ranking too".
>
> If you can come up with a benefit of accessibility that
> marketing people speak, then they are far more likely to listen :)
>
>
> Cheers
> --
> Tom Gilder
> http://tom.me.uk/
>
>
> ----
> To subscribe, unsubscribe, or view list archives,
> visit http://www.webaim.org/discussion/
>


----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/

From: John Foliot - bytown internet
Date: Mon, Sep 02 2002 11:13AM
Subject: RE: <h> around images
← Previous message | Next message →

Steve:

<h1 title="Our Officiants"><a name="content" tabindex="9"><img
src="images/officiants.gif" width="450" height="66" border="0" alt="Our
Officiants"></a></h1>
(www.ottawaweddings.ca/officiants.shtml)

Works great in both the big 3 (IE, NN, Opera) as well as Lynx, IBM HPR, etc.
and validates to HTML 4.01 Trans. Sometimes it's not just a cost factor...
in this case the client was adamant about styling... it is the real world
after all. This delivers both.

JF

> -----Original Message-----
> From: Steve Vosloo [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: September 2, 2002 2:44 AM
> To: = EMAIL ADDRESS REMOVED =
> Subject: <h> around images
>
>
> Tom, I'm changing the thread to ask you about <h1><img src="logo.png"
> alt="My Company" /></h1> ...
>
> Is it alright to do this? A client of mine has a site where every page
> title is a GIF ... I told them to rather change it to HTML text using an
> <h1> header. Could I have told them to simply put <h1> tags around the
> image?
>
> Because of the resizing of text factor I think HTML text is a better
> long term solution ... But on a tight budget it'd be better for them to
> use <h1>'s around an image than ignore the problem completely.
>
> Thanks
> Steve
>
>
>
> > -----Original Message-----
> > From: Tom Gilder [mailto: = EMAIL ADDRESS REMOVED = ]
> > Sent: 30 August 2002 09:26 PM
> > To: = EMAIL ADDRESS REMOVED =
> > Subject: Re: Sample Sites
> >
> >
> > On Friday, August 30, 2002, 7:26:08 PM, you wrote:
> > > > > http://1stpc.org
> > > > The site is great. I viewed it without style sheets and
> > noticed that
> > > > when linearized the page content comes first and then the
> > left hand
> > > > links. Is this intentional -- I normally do it the other
> > way around.
> > >
> > > 1) lynx and screen readers: If you have used lynx a lot
> > (and I have,
> > > it was my primary browser for some time) you know how awful it is
> > > trying to get to the 'meat' of a page because there's
> > usually so much
> > > fluff before it -- OR you get the same navigation menus
> > over and over
> > > again on each page, which gets annoying fast
> >
> > However, what if you *want* to get to the navigation quickly
> > using a screenreader? In that case, you have to listen to the
> > entire page content beforehand.
> >
> > In my opinion it makes more sense (visually, at least) to
> > have navigation before content - and then provide a "skip
> > navigation" link. You could also solve this problem with a
> > "jump to navigation" link near the start of the document.
> >
> > This is a bit of an accessibility hack, and I feel future
> > versions of XHTML need to allow authors a standard way to
> > label what is content and what is navigation, to allow
> > screenreader users to quickly navigate between the two (I put some
> thoughts on that issue up at > <http://tom.me.uk/2002/8/dividing->;
> pages.html>).
> >
> > > 2) Google
> > loves me. I'm not sure why, I
> > haven't done anything special
> > > at all to appeal to them, but my site (www.tntluoma.com) is
> > near the
> > > top of a number of keyword searches.
> >
> > Google tends to rate pages higher if the content is nearer
> > the beginning of the document. It also pays attention to
> > headers (I do hope this won't lead to
> > <body><h1>...</h1></body> to try and get better search engine
> > ranking though).
> >
> > > My guess is that if we (folks who care about accessibility and
> > > standards) could show others (who don't know or don't care)
> > how much
> > > improvement they would have in search engine placement by following
> > > standards, they'd probably listen more.
> >
> > When I have tried to explain to people in the past why
> > something like <h1><img src="logo.png" alt="My Company"
> > /></h1> makes sense, they often haven't cared much until I've
> > gone "oh, and it might well increase your Google ranking too".
> >
> > If you can come up with a benefit of accessibility that
> > marketing people speak, then they are far more likely to listen :)
> >
> >
> > Cheers
> > --
> > Tom Gilder
> > http://tom.me.uk/
> >
> >
> > ----
> > To subscribe, unsubscribe, or view list archives,
> > visit http://www.webaim.org/discussion/
> >
>
>
> ----
> To subscribe, unsubscribe, or view list archives,
> visit http://www.webaim.org/discussion/
>


----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/

From: Kynn Bartlett
Date: Tue, Sep 03 2002 3:44AM
Subject: Re: <h> around images
← Previous message | Next message →

At 8:44 AM +0200 9/2/02, Steve Vosloo wrote:
>Tom, I'm changing the thread to ask you about <h1><img src="logo.png"
>alt="My Company" /></h1> ...
>
>Is it alright to do this?

I'm not Tom, but -- yeah, this is fine. If you need to change the
styling you can use CSS to tweak margins, etc.

--Kynn

--
Kynn Bartlett < = EMAIL ADDRESS REMOVED = > http://kynn.com
Chief Technologist, Idyll Mountain http://idyllmtn.com
Next Book: Teach Yourself CSS in 24 http://cssin24hours.com
Kynn on Web Accessibility ->> http://kynn.com/+sitepoint


----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/


From: Kynn Bartlett
Date: Tue, Sep 03 2002 3:44AM
Subject: Re: Sample Sites
← Previous message | Next message →

At 8:26 PM +0100 8/30/02, Tom Gilder wrote:
>This is a bit of an accessibility hack, and I feel future versions of
>XHTML need to allow authors a standard way to label what is content
>and what is navigation, to allow screenreader users to quickly
>navigate between the two (I put some thoughts on that issue up at
><http://tom.me.uk/2002/8/dividing-pages.html>;).

I agree. I would rather have a <nav> element in XHTML2 than what you
suggest (an attribute), but other than that we are on the same track
here. Have you proposed this to the XHTML2 working group?

--Kynn

--
Kynn Bartlett < = EMAIL ADDRESS REMOVED = > http://kynn.com
Chief Technologist, Idyll Mountain http://idyllmtn.com
Next Book: Teach Yourself CSS in 24 http://cssin24hours.com
Kynn on Web Accessibility ->> http://kynn.com/+sitepoint


----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/


From: Tom Gilder
Date: Tue, Sep 03 2002 4:58AM
Subject: Re: Sample Sites
← Previous message | Next message →

On Tuesday, September 3, 2002, 11:32:56 AM, you wrote:
> > I feel future versions of XHTML need to allow authors a standard
> > way to label what is content and what is navigation
>
> Have you proposed this to the XHTML2 working group?

I mentioned it on www-html, but nobody picked up on it. I'll wait for
the next draft to be published, and then try again :)

It really would improve the accessibility of pages in my opinion. It
would remove the "where should I place the navigation?" question, as
it would always be accessible no matter where it was located.


Cheers
--
Tom Gilder
http://tom.me.uk/


----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/


From: Tom Gilder
Date: Tue, Sep 03 2002 5:01AM
Subject: Re: <h> around images
← Previous message | Next message →

On Tuesday, September 3, 2002, 11:28:56 AM, you wrote:
> > Tom, I'm changing the thread to ask you about <h1><img src="logo.png"
> > alt="My Company" /></h1> ...
> >
> >Is it alright to do this?
>
> I'm not Tom, but -- yeah, this is fine. If you need to change the
> styling you can use CSS to tweak margins, etc.

Also, watch out for whitespace below the image. The same rules that
for <td> that http://devedge.netscape.com/viewsource/2002/img-table/
speaks about also apply to heading tags.


Cheers
--
Tom Gilder
http://tom.me.uk/


----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/


From: Kynn Bartlett
Date: Tue, Sep 03 2002 5:22AM
Subject: Re: Sample Sites
← Previous message | Next message →

At 12:51 PM +0100 9/3/02, Tom Gilder wrote:
>It really would improve the accessibility of pages in my opinion. It
>would remove the "where should I place the navigation?" question, as
>it would always be accessible no matter where it was located.

I agree. Plus, the title of the <nav> (or <section>) could be used
by a smart browser to automatically make "skip" links if requested.

<nav title="Primary Navigation">
...
</nav>
<section title="Main Content">
..
</section>

Display as:

Skip Primary Navigation
...
Skip Main Content
...

etc.

--Kynn

--
Kynn Bartlett < = EMAIL ADDRESS REMOVED = > http://kynn.com
Chief Technologist, Idyll Mountain http://idyllmtn.com
Next Book: Teach Yourself CSS in 24 http://cssin24hours.com
Kynn on Web Accessibility ->> http://kynn.com/+sitepoint


----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/


From: Leo Smith
Date: Tue, Sep 03 2002 10:22AM
Subject: Re: Sample Sites
← Previous message | No next message

One of the advantages, and potentially serious pitfalls, of using
<div>'s for layout is that you can present the page one way
visually, but in a different order for text only browsers and screen
readers, who linearize the content based on the order that it
appears in the source code.

If one is not not aware of this, and uses Dreamweaver, say, to
layout <div>'s without looking at the source code that is generated,
you can create a page that makes sense visually but is
nonsensical when linearized.

*However* one can use the independence of CSS code layout from
visual layout to the advantage of your user, navigation being the
thing that comes to mind. I agree that _visually_ it can make sense
for the page's navigation to appear before the content (although I
am beginnning to use more and more right column navigation).
Since the user is accessing the information on the page visually,
they can easily skip such navigation if the point where the main
page content begins is clear visually.

Of course visual scanning is not available to people using screen
readers, and is perhaps more difficult for those using text-only
browsers since the visual cues are not there, other than ordering.
The question is then, which is better: having the navigation first with
a skip to main page content, or the content first with a skip to
navigation.

I think the former is more appropriate for a home page, but I like the
idea of the latter better (skip to navigation) for internal pages. Either
implementation would seem to work for a screen reader user in
essentially the same way, but for text browser users, not having to
scan through all of those links before reaching the main content
might be of benefit, especially when continuous content spans
more than one Web page. In this scenario, the user should still be
able to use any "skip to main content" link, however.

Leo.

On 30 Aug 2002, at 20:26, Tom Gilder wrote:

> On Friday, August 30, 2002, 7:26:08 PM, you wrote:
> > > > http://1stpc.org
> > > The site is great. I viewed it without style sheets and noticed
> > > that when linearized the page content comes first and then the
> > > left hand links. Is this intentional -- I normally do it the other
> > > way around.
> >
> > 1) lynx and screen readers: If you have used lynx a lot (and I have,
> > it was my primary browser for some time) you know how awful it is
> > trying to get to the 'meat' of a page because there's usually so
> > much fluff before it -- OR you get the same navigation menus over
> > and over again on each page, which gets annoying fast
>
> However, what if you *want* to get to the navigation quickly using a
> screenreader? In that case, you have to listen to the entire page
> content beforehand.
>
> In my opinion it makes more sense (visually, at least) to have
> navigation before content - and then provide a "skip navigation"
> link. You could also solve this problem with a "jump to navigation"
> link near the start of the document.
>
>

Leo Smith
Web Designer/Developer
USM Office of Publications and Marketing
University of Southern Maine
207-780-4774


----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/