W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > July to September 2001

RE: Alt tags

From: Fitzgerald, Jimmie <Jimmie.Fitzgerald@jbosc.ksc.nasa.gov>
Date: Thu, 6 Sep 2001 08:27:10 -0400
Message-Id: <1900360D153D6D46AB204387F541116E976963@kscmbs43.ksc.nasa.gov>
To: w3c-wai-ig@w3.org
Charles, very nice evaluation.  There are some other issues too...

If you look at the source code for the page you no doubt will notic that
Dreamweaver was used to create it.  That is a good indication that the
author doesn't know html or scripting or css.

Also, there is a script embedded in a table which performs a document.write
inside the table.  Netscape has serious issues with that and normally one
would need to document.write the entire table in order for it to work or
display the dynamic content appropriately.

There are cells with nothing but a nbsp; in them.  How are these handled in
a screen reader?  Should be fixed with colspan and styles to eliminate the
nbsp;'s.

Did you notice that the a form tag exists immediately after the body tag and
that its closing tag is immediately prior to the /body tag.  Basically the
entire page is inside the form tags.  I wonder how jaws or lynx deals with
that.  Probably doesn't matter but it would certainly make insertion of
subsequent forms more challenging.

Lots of nbsp's lurk in this page.  Again, this is from use of dreamweavers
wysiwyg feature as the author drags things around on the screen to
'develop'.

How does a browser handle a page which has set both a body bgcolor and a
body background image if images are turned off?  Does the bgcolor 'kick in'
to fill in for the image that can't be displayed?

There is no dtd either.  Just noticed that one.

The style sheet references elements which don't exist in the document.  I
checked for the P, H1 and UL tags which were all defined in the style sheet.
None exist in the document.  Didn't bother to check the rest since I was
batting a thousand already.

Another point; the last embedded table (width of 427) has the first cell in
each row defined with a width of 1 and then it has a nbsp; in the cell.
There is no way a nbsp; could be displayed in 1 pixel and that is seen on
the page when you 'select all'.  That columns width is over 1 pixel wide.
In that same table, the next cell has a colspan=2 in it but there is never a
row containing the mysterious third cell.  So, the colspan's could all go
away and the initial first cell should be defined with a rowspan of 6 and
styles to control its width or, better yet, dispense with the first row
alltogether and define a style with padding-left: 1px to push that content
over.  But, it really isn't necessary to have that first cell anyway since
the content isn't near anything else and the border is set to 0.

No title attribute used on the links.  While version of netscape prior to 6
don't understand it, that doesn't mean that a screen reader wouldn't.

How would a screen reader interpret "Semi - Finalist" which is near the
bottom of the page.  I imagine it would say "Semi space dash space finalist"
or something like that.

If you look at the source (near bottom) you will see a font tag setting the
font color immediately followed by the closing font tag.

I'm running out of time so lastly I will point out that the FONT tag has
been deprecated.

All of these reasons are an argument for hand coding.  Not only is it faster
in the long run, but, assuming the author actually knows the languages
required, it produces a better formatted document that will load faster and
render faster and is easier for someone else to edit when needed.

I think Charles hit the nail on the head when he said learn the languages
and use them properly.  No wysiwyg tool will ever create a well coded
document.

Wow, thought I was done.  The adobe acrobat image has no associated alt
attribute.

Okay, that is all.

Jim Fitzgerald

-----Original Message-----
From: Charles F. Munat [mailto:chas@munat.com]
Sent: Thursday, September 06, 2001 5:51 AM
To: Sharon Dennison; w3c-wai-ig@w3.org
Subject: RE: Alt tags


OK, here goes:

1. There is no "alt tag." There is an alt attribute which can be used in a
variety of elements, but is mostly associated with the img element. It is
not a tag, despite being called one by many. To me, sloppy use of
terminology results in sloppy understanding (which then produces sloppy
code).

2. The alt attribute does not "appear on a navigation item." What appears is
a pop-up label, called a "Tool Tip" in Internet Explorer. The Tool Tip may
take the value of the alt attribute as its content, but it may also use the
title attribute. This is a browser-specific behavior and is not in the HTML
Recommendation.

3. The purpose of the alt attribute is to provide information to be used
when the image is not present or can't be seen. The value of the alt
attribute (the "alt text") is meant to substitute for the image. *The alt
attribute is NOT intended to provide a pop-up label.* Sometimes the pop-up
effect can improve usability, but this should be secondary to the intended
use of alt text as a substitute for the meaning of the image.

4. There is nothing (as far as I know) in HTML or CSS to permit control of
the Tool Tip box. There may be some Microsoft specific way to control it --
if so, I've never heard of it. Maybe someone else knows better.

5. The Tool Tip covering the next link down is not a problem: As soon as you
move the mouse, the Tool Tip disappears.

6. On http://www.aahc.com.au/ you have misused the alt attribute. The images
of a cow, sheep, etc. add no meaning or functionality to the page. If you
want to describe them, use the longdesc attribute to link to a description.
Frankly, they are so small that there isn't much to describe. But what you
don't want to do is to stick in "cow," "sheep," etc. in place of those
images. Of what use is this information? None. It only interferes with the
use of the page. All the animal images should have alt="" or alt=" ". Ditto
with the rotating image. And your logo's alt attribute should read "Animal
Health Australia" not "Animal Health Australia logo." It is meant to replace
the logo, not to tell us what it is. And why on Earth do your spacer images
all have alt = "Animal Health Australia"?

7. You have a *lot* of problems with the accessibility of this page, most of
them the result of trying to create a layout with pixel-by-pixel control.
HTML is not well-suited for this type of layout. Instead, you should try to
create pages which permit resizing by the user. As William Loughborough is
fond of saying, "author proposes, user disposes." Here are just a few of the
problems with the page:

    a. Font sizes are fixed. I can't adjust the font size to my preference
(and the sizes chosen are ridiculously small).

    b. Your pop-up descriptions of the main links work only on mouse over.
Users who are restricted to keyboard control will never see them.

    c. Your pop-up descriptions are in images instead of text, so users who
can't see images (or can't read the tiny font) will never see them either.

    d. Your pop-up descriptions are popped up using JavaScript, so users
without JavaScript or with JavaScript disabled will never see them.

    e. There is a problem with your JavaScript. In Netscape 3, the pop-up
text-in-image link descriptions juxtapose themselves (the previous image
does not disappear), making an unintelligible mess.

    f. If I'm using Netscape 3 (and probably others) and overriding all
colors to use my own, the result is white text on a white background. Not
good.

    g. Umm, have you looked at this page on WebTV? You might want to before
someone else does.

Here is what your page looks like in Lynx:

                                              Animal Health Australia -
Welcome

                        Animal Health Australia logo

                       About Animal Health Australia
                     Australia's Animal Health Status
                        Animal Disease Preparedness
                          Animal Health Programs
                           Communications Centre
                               Useful Links

      Animal Health Australia cow Animal Health Australia sheep Animal
                      Health Australia rotating images
                          Animal Health Australia
                [  Feedback  |  Site Map  |  Help  |  Legal  ]

                    Developed by eDIME Internet Agency

                             Search this Site:
                    _______________ Click to search site
                                    Help

     Animal Health Australia pig Animal Health Australia chicken Animal
                            Health Australia bee
                          Animal Health Australia
                                Hot Issues:

                         Mid Term Review of the NOJDP
                   Senate Committee report on OJD released
      Foot-and-mouth disease (FMD) outbreak in UK- information and links
          Bovine Spongiform Encephalopathy (BSE) - 'mad cow disease'
                           Information and Links
                               [getacrob.jpg]
               Semi - Finalist Australian Internet Awards 2000

Try reading this aloud to someone who isn't familiar with the page (you can
say "link to" before each link) and see what they think.

My recommendations:

1. Read the WCAG 1.0 from start to finish (including the techniques).

2. Convert to XHTML, strict if possible, and validate your page using the
W3C validator: http://validator.w3.org/

3. Use CSS for all your presentation (separate structure/content from
presentation). Use CSS to create your columns. Ditch the tables for layout.

4. Make sure your page degrades gracefully on older browsers (if you follow
the above recommendations, it probably will).

5. Design for flexibility. (Let the user choose font sizes, etc.)

6. Avoid JavaScript tricks (rotating images that can't be stopped, mouseover
tricks that require rasterized text (in images), pop-up descriptions, etc.).
Instead, reorganize your page to put the key information right where it is
needed without the user having to mouse over anything.

There are lots more things you can do, but the above will be a good start.

Hope this helps.

Oh, and regarding the lack of alt text in some images when displayed: The
problem is that you've restricted your widths and heights in the table cells
too much. When you compress your images in this way, IE does not display the
alt text. (BTW, the input element does not have a height or width
attribute.)

Bad code creates problems. Here you are trying to do something that HTML was
never intended to do (and you are trying to do it on browsers that don't
support this sort of layout). This requires you to break the code. When you
break the code, you generally break the page in numerous browsers. So the
price you pay for making it work in one or two browsers is having it not
work in many others. Usually you create serious accessibility problems as
well.

Ditch the proprietary tags, use valid XHTML, switch to CSS for presentation,
use the HTML properly, and you will get a page that works in every browser,
is accessible to everyone, and might just look attractive, too. You just
have to learn which types of presentation will work and which won't.

Good luck.

Charles F. Munat
Seattle, Washington


> -----Original Message-----
> From: w3c-wai-ig-request@w3.org [mailto:w3c-wai-ig-request@w3.org]On
> Behalf Of Sharon Dennison
> Sent: Wednesday, September 05, 2001 9:45 PM
> To: 'w3c-wai-ig@w3.org'
> Subject: Alt tags
>
>
> Hello
>
> I have some questions relating to the use of 'alt'  tags which I hope
> someone may be able to help with.  See http://www.immi.gov.au/
>
> The problem we have is that when an alt tag appears on a
> navigation item, it
> obscures part of the secondary navigation.  Tags also 'appear' to take a
> while to disappear.
> (EG: hover over : Visiting Australia nav item)
>
> With accessibility in mind:
>
> 1. Is there any way to choose where to place an alt tag in relation to the
> image it is describing or does it always appear just below 'the hand'?
>
> 2. Can you control the length of time an 'alt' tag appears onscreen?
>
> 3. Does anyone have any alternative suggestions to the 'alt' tag
> for the nav
> items (which at this point must remain as images).
>
> 4. There have been instances when surfing that 'alt' tags have
> appeared, yet
> when images are turned off some do not get labelled with their alternative
> text.  Does anyone know why this occurs?  See http://www.aahc.com.au/
>
> Thanks in advance
>
> Sharon Dennison
>
>
>
>
>
Received on Thursday, 6 September 2001 08:30:08 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 19 July 2011 18:13:56 GMT