Accessibility standard review for v29.southbucksrda.org

Hello ciwas world.

I've been lurking a little while and thought it about time I should post.

The web site http://v29.southbucksrda.org is a work-in-progress site for
a local (to me) group of a disabled charity (there is a live site at the
www. address). I'm trying to make the site a model for standards
compliance and accessibility. I've got so far, but I'd like a few
opinions (and I guess peer validation).

(I've been running the site through Watchfire Bobby 5.0 and CSE HTML
Validator Pro V6.0. Testing with Moz 1.5, IE6, IE5, Lynx, K-Meleon 0.7
and IBM Home Page Reader 3.0)

Specific questions (though I'd welcome any other comments) are :

? The navigation structure.

The content of the site is organised in a typical "tree". A the top
level are the documents Welcome, Contact and Diary. Further documents
are available inside folders for Helping, News etc. I'm using visual
cues to indicate that Helping is a Folder, but Diary is a document. I'm
not certain whether I should include this indication within the link
itself. i.e. The News link is to a folder but it's still just a link,
also the title infers its a folder (or could state it more explicitly).

The plus side of navigational structure is consistency, however I wonder
whether a Wiki style Category organisation would not be more flexible.


? Description of images

When viewed in Lynx (or Moz with no pictures), there is no indication
that the alt text for a picture is actually the alt text for a picture,
which sort of means that the alt text should always start with some
delimiter then "A picture of...".

Is there a general view on this?


? Use of H1 as an invisible structure guide

I've used H1 to identify the structure between Header, Content and
Footer areas within the page. However, I set it to invisible because the
structure is visibly clear with the css. However, with no css, the
structure is still clear. None-the-less, I suspect this (invisible h1)
may be frowned upon.


? Link to Content at top of page

At the top of each page is a link to the content area. I basically
copied this from ibm.com - I was using IBM's home page reader and
noticed that they used this technique to jump over infrastructure
(navigation, small print etc) directly to content.

I wonder if there isn't a better way to do this.

It occurs to me that, the right way would be to have the real content
precede everything else on the page, and this would be the conclusive
reason why tables should not be used for layout.


? Whitespace used to separate links.

I've noticed a technique of using invisible divs to hold some separator,
and thought that this would be the thing to use, but it seems a bit
clanky - any other suggestions?


Some stuff that I don't need pointed out.

! The Contacts page is deliberately terse. This is for reasons to do
with (the charities) security.

! The URL gets a bit messy. I'm trying to clean it up.

! Use of height and width for images. I can't explain what makes me
uncomfortable about using these, so I'll keep shtum until I do (or not).


Thanks for taking the time to look/respond.

Regards

John Robin Devany
http://www.devany.com

John Robin Devany wrote:

? Description of images

When viewed in Lynx (or Moz with no pictures), there is no indication
that the alt text for a picture is actually the alt text for a
picture, which sort of means that the alt text should always start
with some delimiter then "A picture of...".

Is there a general view on this?

The alt-text is not a description of an image. And the use of the
alt-text is not to educate the reader that there was/ is an image.
(This can be one use of alt-text, yes.)
Mostly the alt-text should just replace the image with text (or
nothing) in ways that no relevant information is lost. If the image
contains crucial information you don't otherwise reference in your
text, you absolutely must include it in the alt-text... or simply
rewrite your text so that it contains the crucial data (that's what I
mostly do, since even though I can see an image with my browser, I
might want to go through an additional information text on it to get a
clearer idea).

If in doubt, better leave the alt empty (alt="") than writing something
like "Image of a logo", "Logo", etc.

In some cases it also makes sense to use alt="[bla]".

And don't forget about the title-attribute. If you're going all the
way, you might even want to look into the longdesc attribute. But my
opinion is that if the information is that important it should sit
there on the page within some <p> or something.

? Use of H1 as an invisible structure guide

I've used H1 to identify the structure between Header, Content and
Footer areas within the page. However, I set it to invisible because
the structure is visibly clear with the css. However, with no css,
the structure is still clear. None-the-less, I suspect this
(invisible h1) may be frowned upon.

Invisible h1? H1 is one of the most important things to have, making it
invisible might even get you banned in Search engines. I don't exactly
understand why you do it but unless you have a great reason, why not
just make it look less important via CSS...?

? Link to Content at top of page



It occurs to me that, the right way would be to have the real content
precede everything else on the page, and this would be the conclusive
reason why tables should not be used for layout.

Exactly. You position the navigation to the left, top, or wherever you
feel like... but you only actually write it at the end of the HTML.
That's what CSS is good for. You will then end up with..

<head>...
<h1>...
<h2>...
<p>content...
<p>content..
<div class="navigation">...


--
Google Blogoscoped
http://blog.outer-court.com

http://v29.southbucksrda.org
--------------------------------------

In message <bo8hrt$1anr8v$1 (AT) ID-203055 (DOT) news.uni-berlin.de>, Philipp
Lenssen <info (AT) outer-court (DOT) com> writes

John Robin Devany wrote:

[snip]

? Use of H1 as an invisible structure guide

I've used H1 to identify the structure between Header, Content and
Footer areas within the page. However, I set it to invisible because
the structure is visibly clear with the css. However, with no css,
the structure is still clear. None-the-less, I suspect this
(invisible h1) may be frowned upon.


Invisible h1? H1 is one of the most important things to have, making it
invisible might even get you banned in Search engines. I don't exactly
understand why you do it but unless you have a great reason, why not
just make it look less important via CSS...?


It's only invisible in the sense that it has no size, i.e. 'invisible'

to the eye, but not to a HTML reader.

(Glad to see that you know that display:none won't work in most
screen-readers/voice-browsers)

The idea works OK in practice, but I think I'd prefer to see real
headers in their place. I also like to think of the organisation of the
page as a tree structure -- which means only one <H1>.


[snip]

--
Jake

Sometime around Tue, 4 Nov 2003 13:39:07 +0000 (UTC), John Robin Devany is
reported to have stated:

Hello ciwas world.

G'day.

http://v29.southbucksrda.org

(I've been running the site through Watchfire Bobby 5.0 and CSE HTML
Validator Pro V6.0. Testing with Moz 1.5, IE6, IE5, Lynx, K-Meleon 0.7
and IBM Home Page Reader 3.0)

Don't believe what they try and tell you - CSE is a linter, not a
validator. That's not to say you shouldn't use it at all, but you should
use a validator as well.

http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

Your site doesn't validate. ;-)

Bobby can be a useful tool, but make sure you really understand what you
are doing; don't just take Bobby's word as gospel.

In addition to the above, I'd recommend you also test (if you can) on at
least one version of Opera, IE for the Mac, and one browser based on the
KHTML engine (e.g. Konqueror, Safari).

? The navigation structure.

The "Map" link should probably be "Site Map" or similar - I assumed it was
a map of your geographical location. :-)

? Description of images

When viewed in Lynx (or Moz with no pictures), there is no indication
that the alt text for a picture is actually the alt text for a picture,
which sort of means that the alt text should always start with some
delimiter then "A picture of...".

Is there a general view on this?

As Philip said, alt text is not a description of the image, it is a textual
_alternative_ to the image. If the page still makes just as much sense
without the image, use alt="".

? Use of H1 as an invisible structure guide

I've used H1 to identify the structure between Header, Content and
Footer areas within the page.

Why? What is the purpose of that? If it is for your own usage in coding, it
would be better in HTML comments.

However, I set it to invisible because the
structure is visibly clear with the css. However, with no css, the
structure is still clear. None-the-less, I suspect this (invisible h1)
may be frowned upon.

Again, as Philip said, search engines may frown on it, thinking it is spam.
And IMO it isn't logical.

? Link to Content at top of page

It occurs to me that, the right way would be to have the real content
precede everything else on the page, and this would be the conclusive
reason why tables should not be used for layout.

One of them, yes. :-)

? Whitespace used to separate links.

I've noticed a technique of using invisible divs to hold some separator,
and thought that this would be the thing to use, but it seems a bit
clanky - any other suggestions?

Padding and/or margin in your CSS.

! Use of height and width for images. I can't explain what makes me
uncomfortable about using these, so I'll keep shtum until I do (or not).

I can't think what you don't like about it either (except maybe having to
change it if you happen to change the picture). I like it when they are
specified because it means the page doesn't jump around while they load.

--
Mark Parnell
http://www.clarkecomputers.com.au

Mark Parnell wrote:

snip

http://v29.southbucksrda.org

(I've been running the site through Watchfire Bobby 5.0 and CSE HTML
Validator Pro V6.0. Testing with Moz 1.5, IE6, IE5, Lynx, K-Meleon 0.7
and IBM Home Page Reader 3.0)


Don't believe what they try and tell you - CSE is a linter, not a
validator. That's not to say you shouldn't use it at all, but you should
use a validator as well.

http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

Your site doesn't validate. ;-)

Ge%ar%!"%g*h!... does now.

Bobby can be a useful tool, but make sure you really understand what you
are doing; don't just take Bobby's word as gospel.

In addition to the above, I'd recommend you also test (if you can) on at
least one version of Opera, IE for the Mac, and one browser based on the
KHTML engine (e.g. Konqueror, Safari).


? The navigation structure.



The "Map" link should probably be "Site Map" or similar - I assumed it was
a map of your geographical location. :-)

Good point. ('specially seeing as the charity don't put a geographical
map on the site for security reasons.)

more snipping

? Whitespace used to separate links.

I've noticed a technique of using invisible divs to hold some separator,
and thought that this would be the thing to use, but it seems a bit
clanky - any other suggestions?


Padding and/or margin in your CSS.

But that would still be whitespace and the recommendation is to have
some non-whitespace characters:

http://www.w3.org/TR/1999/WAI-WEBCON...h-divide-links


Many thanks for your comments.

--

John Robin Devany
http://www.devany.com

jake wrote:

http://v29.southbucksrda.org
--------------------------------------

snip

? Use of H1 as an invisible structure guide

I've used H1 to identify the structure between Header, Content and
Footer areas within the page. However, I set it to invisible because
the structure is visibly clear with the css. However, with no css,
the structure is still clear. None-the-less, I suspect this
(invisible h1) may be frowned upon.


Invisible h1? H1 is one of the most important things to have, making it
invisible might even get you banned in Search engines. I don't exactly
understand why you do it but unless you have a great reason, why not
just make it look less important via CSS...?


It's only invisible in the sense that it has no size, i.e. 'invisible'
to the eye, but not to a HTML reader.

(Glad to see that you know that display:none won't work in most
screen-readers/voice-browsers)

The idea works OK in practice, but I think I'd prefer to see real
headers in their place. I also like to think of the organisation of the
page as a tree structure -- which means only one <H1>.

I'm not sure what you mean by "real headers". Do you mean have them
visible to the eye, or at h2, h3 level?

Thanks for looking.
--

John Robin Devany
http://www.devany.com

Philipp Lenssen wrote:

John Robin Devany wrote:


? Description of images

When viewed in Lynx (or Moz with no pictures), there is no indication
that the alt text for a picture is actually the alt text for a
picture, which sort of means that the alt text should always start
with some delimiter then "A picture of...".

Is there a general view on this?

The alt-text is not a description of an image. And the use of the
alt-text is not to educate the reader that there was/ is an image.
(This can be one use of alt-text, yes.)
Mostly the alt-text should just replace the image with text (or
nothing) in ways that no relevant information is lost. If the image
contains crucial information you don't otherwise reference in your
text, you absolutely must include it in the alt-text... or simply
rewrite your text so that it contains the crucial data (that's what I
mostly do, since even though I can see an image with my browser, I
might want to go through an additional information text on it to get a
clearer idea).

If in doubt, better leave the alt empty (alt="") than writing something
like "Image of a logo", "Logo", etc.

In some cases it also makes sense to use alt="[bla]".

And don't forget about the title-attribute. If you're going all the
way, you might even want to look into the longdesc attribute. But my
opinion is that if the information is that important it should sit
there on the page within some <p> or something.

I think my question is a bit simpler.

Lynx gives no indication that the source of text it renders. So the
paragraph text can run-in with the alt text. Aha, given that I'm using
the alt text to describe the pictures I should [bla] them, but this
would not always be the case.

Thanks

--

John Robin Devany
http://www.devany.com

Sometime around Tue, 11 Nov 2003 11:52:46 +0000 (UTC), John Robin Devany is
reported to have stated:

? Whitespace used to separate links.

I've noticed a technique of using invisible divs to hold some separator,
and thought that this would be the thing to use, but it seems a bit
clanky - any other suggestions?

I think I misread this the first time around - I understand where you are
coming from now. :-) Looking at it in Lynx, there is just a single space
between each link in your menu, same as between any 2 words. Something else
between each link, styled display:none; would be the best bet,
unfortunately (I'd suggest <span>s rather than <div>s). Yes, it seems a bit
of a kludge, but I don't know of any better way to do it.

--
Mark Parnell
http://www.clarkecomputers.com.au

On Wed, 12 Nov 2003, Mark Parnell wrote:

I think I misread this the first time around - I understand where you are
coming from now. :-) Looking at it in Lynx, there is just a single space
between each link in your menu, same as between any 2 words. Something else
between each link, styled display:none; would be the best bet,
unfortunately (I'd suggest <span>s rather than <div>s). Yes, it seems a bit
of a kludge, but I don't know of any better way to do it.

I know a _different_ way, though whether it's any _better_ is
debatable. I find neither of them entirely appealing, but what I
actually used between two menu-ish links is like:

[..] </a><img src="/1.gif" height=1 width=1 alt="|"><a title= [..]

This is in fact the only use I've found for the notorious "1px
transparent gif". All the other uses promoted by others seem to me to
be better suited to CSS ;-)

In article Alan J. Flavell wrote:

On Wed, 12 Nov 2003, Mark Parnell wrote:

I think I misread this the first time around - I understand where you are
coming from now. :-) Looking at it in Lynx, there is just a single space
between each link in your menu, same as between any 2 words. Something else
between each link, styled display:none; would be the best bet,
unfortunately (I'd suggest <span>s rather than <div>s). Yes, it seems a bit
of a kludge, but I don't know of any better way to do it.

I know a _different_ way, though whether it's any _better_ is
debatable. I find neither of them entirely appealing, but what I
actually used between two menu-ish links is like:

One more different that I haven't seen elsewhere:

I'm using <div><a href>foo</a> | <a href></a></div>

with

div {color:white;background:white;}
a {border:2px solid}
a:link {color:blue;background:white}
a:link {colorurple /*or something*/;background:white}

(live at http://www.student.oulu.fi/~egea/timetable.html)

This requires pretty little CSS understanding from browsers, and could
propably be bent to work NN4 and maybe even IE3.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.