YouSearched

[francis]

Touting itself as the first accessible search engine, YouSearched (http://www.yousearched.com/) lauched recently. Have a look at their press release (http://www.searchengineguide.com/articles/2004/0520_rc1.html) and their accessibility statement (http://www.yousearched.com/accessibility.html).

Getting over the visual design (not pleasent, but then I'm not severely visually impaired), the main thing that irks is the use of Bobby as a standard. Hang around the W3C's WAI mailing list (http://www.w3.org/WAI/IG/) for a while, and you'll soon see that anyone with an interest in the subject doesn't rate Bobby at all. The search results seem okay, but for some reason they don't include a "found XXXX number of documents" indicator.

[David]

Visually pleasing it ain't. Is there a direct correlation between the accesibility of a site and poor aesthetics?

Also, and this is strange for such a site. Hover your mouse over the images...

What? No ALT tag? I took a peek at the code:

<img src='/icon/150c_humanities2.gif' alt='' width='150' height='150' />

Surely not an oversight.

[Tom]

Assuming they have not a built a server farm in Nevada, where do they get their results from? Open Directory Project is the obvious candidate but I did not see then mentioned.

[francis]

Originally posted by David@Jun 11 2004, 5:51 pm
What? No ALT tag? I took a peek at the code:

<img src='/icon/150c_humanities2.gif' alt='' width='150' height='150' />

Surely not an oversight.
Nope, not an oversight, mearly following HTML standard for alt text (http://www.w3.org/TR/html401/struct/objects.html#adef-alt).

The alt attribute must be specified for the IMG and AREA elements. It is optional for the INPUT and APPLET elements.

While alternate text may be very helpful, it must be handled with care. Authors should observe the following guidelines:

* Do not specify irrelevant alternate text when including images intended to format a page, for instance, alt="red ball" would be inappropriate for an image that adds a red ball for decorating a heading or paragraph. In such cases, the alternate text should be the empty string (""). Authors are in any case advised to avoid using images to format pages; style sheets should be used instead.
* Do not specify meaningless alternate text (e.g., "dummy text"). Not only will this frustrate users, it will slow down user agents that must convert text to speech or braille output.


If you look at this page using Chris Pederick's Web Developer extension for Moz and Firefox (http://www.chrispederick.com/work/firefox/webdeveloper/) and turn off images without alt text, you get a nice, readable page:

http://www.websitearchitecture.co.uk/storr/forumimgs/yousearchednoimgs.gif

The images are purely for decoration - if you view the page as normal and hover over one of the images you'll see that the link text above is activated. If there was alt text, a screen reader would say (for example):

"Arts, business and finance, by location, arts, business and finance, by location" (assuming the alt text was the same as the link text). The person using the screenreader would end up confused as they'd be hearing everything twice.

As far as the actual images are concerned, the few sites that I've seen specifically targeted at a disabled audience (as opposed to those that are designed for "us" but are accessible) tend to have large, simple images that, to me at least, don't look pleasant. But if the shapes are large and simple, I guess it must be easier for those with poor vision to pick them, and details within them, out.

[David]

Thank you Francis for that excellent explanation.

The important bit is that the image and text link were both within the same anchor tag and that a screen reader would use the link text and therefore no need for alt text. I just didn't look closely enough at the code.

I must admit that I wasn't aware of the recommendation to include an empty alt string where no text is required. That seems a little wasteful - do you know the reason for this?

[francis]

I don't know the specific reason why there must be an alt tag, other than that's part of the spec and X/HTML won't validate correctly without it. Blame the W3C!

In the past year there have been a few attempts at importing images into Web pages using CSS. Firstly there was the Fahrner Image Replacement idea, but that turned out to be bad (http://www.alistapart.com/articles/fir/). Now there's a better one, based on the same principles. Here's the theory (which works nicely)

X/HTML

<h2>My important heading</h2>

CSS

h2{
text-indent:-9999px; /* moves the text off the screen but is still visible to screen readers and text-only browsers */
height:100px; /* or whatever the height is of your image */
width:50px; /* or whatever the width is of your image */
background:url(path/to/yourimage.gif) no-repeat 0 0; /* bring in background image make sure it doesn't repeat and position it */
}

This works - CSS enabled browsers get the image and throw the text off the page. Screen readers and text-only browsers don't see the image but do read the text ("My important heading"). And there's no nastly IE tooltip.

Here's a worked example (http://www.websitearchitecture.co.uk/storr/forumimgs/header-replace/header-replace.html). Again, if you've got the Web developer extension or a CSS toggle favelet, try that page without CSS.

[David]

Ah, that's very neat. I must give it a go. Thanks Francis.

[francis]

Alternative image replacement method (http://www.kryogenix.org/code/browser/lir/). Plays nice with IE5 and works well in other browsers.