WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Support for link Title tag?

for

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

From: Kelly Hokkanen
Date: Mon, Nov 01 2004 12:17PM
Subject: Support for link Title tag?
No previous message | Next message →

Hello,

We are working on an enterprise header to appear on all our pages, and
we have three tool icons as part of the header ("Email this page",
"Watch this page", and "Add this page to my links"). We would like to
present these using CSS instead of images with rollovers, in order to
streamline the code and not use Javascript. However, if they are not
images, we can't add ALT text. We do have a "title", but is that well
supported by screen readers? We are also considering adding text links
before each tool icon with "display:none" - would that work for screen
readers?

The test header can be viewed at
http://www.informe.org/showroom/Sliver/.

Please cc me directly in your response, since I get the Digest version.

Thanks,
Kelly

-----------------------------
Kelly Hokkanen
Director of Creative Services
InforME: Information Resource of Maine
(207)621-2600 x28
= EMAIL ADDRESS REMOVED =
www.maine.gov

From: Patrick H. Lauke
Date: Mon, Nov 01 2004 12:30PM
Subject: Re: Support for link Title tag?
← Previous message | Next message →

kelly wrote:
> We would like to
> present these using CSS instead of images with rollovers, in order to
> streamline the code and not use Javascript.

Sorry, but what happens to users without CSS support? And javascript
(which is, from what I can see, still needed to actually trigger these)?
Sorry, not accessible!

You may wish to consider image replacement techniques (having proper
links in the markup, but overlapping/hiding them with graphics).

Read http://www.mezzoblue.com/tests/revised-image-replacement/ and make
sure you pay particular attention to comments regarding to the
accessibility impact of the techniques.

But to be honest, my main question would be *why* not go with images?
There's nothing inherently wrong with them (despite the fact that they
don't resize when you simply bump text size up, unless you use something
like Opera which has a proper zoom function which affects everything).

Just having the graphic for the link, though, is a "nice" example of
"mystery meat navigation", and user with cognitive disabilities (hell,
even users without any disabilities - if that's a PC way to put it) may
have difficulty figuring out what they're for.

In short, bad move alltogether. My advice would be to simply go for
links, and possibly add the images next to them via CSS (leave enough
padding to the left, place the image in as a non-repeating background),
or just go with putting proper elements in there (although, as I
said, it's not optimal due to them not resizing and potentially being
confusing).

Patrick H. Lauke
_____________________________________________________
re

From: Austin, Darrel
Date: Mon, Nov 01 2004 12:36PM
Subject: Re: Support for link Title tag?
← Previous message | Next message →

> We are working on an enterprise header to appear on all our pages, and
> we have three tool icons as part of the header ("Email this page",
> "Watch this page", and "Add this page to my links"). We would like to
> present these using CSS instead of images with rollovers, in order to
> streamline the code and not use Javascript. However, if they are not
> images, we can't add ALT text.

These are links that serve a functional purpose. As such, they are content
and belong in the actual HTML of the page...not the CSS. So if you are only
displaying icons, then these should be IMG tags with alt and title
attributes.

> We do have a "title", but is that well
> supported by screen readers? We are also considering adding text links
> before each tool icon with "display:none" - would that work for screen
> readers?

AFAIK, Title attributes are only read by screen readers if the end-user
explicitely turns this option on.

As for display: none, no, that won't work. What you can do, though, is
position the text off screen:

text

..toolText {
display: block;
position: absolute;
top:0px;
left:-1000px;
}

However, all that said, in terms of usability, it probably makes sense to
leave the text on screen.

-Darrel

From: Andrew Kirkpatrick
Date: Mon, Nov 01 2004 1:14PM
Subject: Re: Support for link Title tag?
← Previous message | Next message →

> AFAIK, Title attributes are only read by screen readers if the end-user
> explicitely turns this option on.

This is true for the most common screen readers, most of the time. For
JAWS, W-E, and HPR, the title is available but not automatically - just like
you said. For ZoomText with speech the title is read preferentially.

If you make the anchor have a CSS generated background, but no content, then
the title is read by JAWS (4.0 to 5.1), Window-Eyes 4.5, HPR 3.0x, and
ZoomText (8.1+). Of course, then you have no content in the link itself
which would be a problem for users without CSS-browsers.

This would also be a problem for Mozilla (and Safari) users since Mozilla
doesn't display the background image to an empty link, rendering the whole
effort a waste. IE does display the image (or just a background color with
height and width defined). Both browsers will allow keyboard users to
access the link, although the focus is only visible for IE users since
Mozilla and Safari don't display a link.

This message solves nothing, but just in case anyone is interested in when
the title attribute is read...

AWK

--
Andrew Kirkpatrick
Project Manager, WGBH National Center for Accessible Media
125 Western Ave.
Boston, MA 02134

617-300-4420 (direct voice/FAX)
617-300-3400 (main NCAM)
617-300-2489 (TTY)

From: Kelly Hokkanen
Date: Tue, Nov 02 2004 1:51PM
Subject: Re: Support for link Title tag?
← Previous message | No next message

Thanks for your comments. I think we are going to go back to the
simplest option - images with ALT text. No javascript rollovers either.
We will use both ALT text and Title tag so most users should see a
"tooltip" or the ALT text, depending on browser. I understand the point
about "mystery meat" navigation, and ideally these would probably be
plain text links. However we have a limited amount of space to work with
in order to keep the header from wrapping at 800x600, and these 3 tools
just will not fit as text links. This is the only way to keep them in
the header, and since they are a bit different from the other
"informational" links (more like "tools"), I think it makes sense to
place them as icons. It does suggest more of a functional element rather
than an informational link, which is nice.

Thanks again for your feedback!
Kelly
-----------------------------
Kelly Hokkanen
Director of Creative Services
InforME: Information Resource of Maine
(207)621-2600 x28
= EMAIL ADDRESS REMOVED =
www.maine.gov