Alt text for images

No, because "some tool tip" does not identify what the image is.

 

This is what I have on a "welcome list" which was on the old site and I guess still has to be on the new site (translated):
<li><a href="http://blahblahblah.nl"><img src="guisy.gif" alt="Link to BlahBlahBlah products page" /></a> Get a quote at BlahBlahBlah products page at <a href="http://blahblahblah.nl">Blah</a>.</li> Every list item has a little sentence after it which repeats the link as well.

No title, though I could stick it in there. Since in this case, the image could be of Bob's Butt, I used the alt text to say what it WAS--- a link you could click to a page. I can't actually think where in the list the image would matter-- for travel insurance, someone took some stock photo of a beach. For bike insurance, someone found a photo of a bike. In this case, the images aren't background, so they need ALT, but what the picture is means nothing. So, this is how I used alt text. If there were a tool tip, it would repeat the alt text: "Link to Blah page."

 

Adding "link" to the alt text is redundant. Screen readers et al clearly indicate links. If you're using an image to replace text, the proper alt text is the replaced text.

Re tooltips in Opera: You have a choice, all or nothing. Go to preferences, advanced, browsing. Check or uncheck "show tooltips". If it's checked, you get tooltips for links and titles. Unchecked, and you get squat. Not even titles.

Every browser has annoyances, that's one of Opera's.

cheers,

gary

 

Lynx simply changes the colour-- maroon on grey, ick. I'd rather say "Link to the Blah products page" than "http://www.blahblahblah.nl" since I might as well say where that link is going to (what page). Esp since this is the main page and the "welcome list" is a list to the sister sites, each with basically one purpose AND my colleague makes many of the links stuff like php?page=bunchofstuffandsybolsandmorestuffnotveryhumanreadable.php
The image is NOT replacing text-- it's the equivilant of Bob's Butt, and there only are images because the old list had them-- I wouldn't have wasted bytes with those little hard-to-see things. It's like,
[picture of a beach] go here for travel insurance. [beach] could be train, airplane, bus, island... and who knows what they'll replace it with anyway. If it weren't in a list, it would've been a background image-- no alt text there anyway. It's not a link to the beach, or beach travels, or sand for sale... just, insurance.

 

Then why not put it in the background and pad the text off of it?

 

I remember trying that a while back and because the images were large compared to the text (80px high or so), I ended up keeping them in the list with vertical alignment... but yes, that's what I want to do. I should give it another go.

Hmmm... I wonder if I can get away with makeing them all one large image...

*Edit, done... I only lost the ability to click on the image too, which I think I can shoehorn in with absolute positioning and a second <a> with display:block and same sizes as the images...

 

omg omg omg and now that I've given IE6 different CSS commands, I can use FIRST CHILD!!!!!!!!!!!!! and make the background images clickable too thanks, crusty old guys who know stuff, this is better than what I had.

 

WHAT? Can you post the code you used here?

 

ooooh I so happy BUT I used the body[id=something] trick so IE6 gets a different stylesheet and thus it doesn't work for IE6 but 7 understands first-child...

<ul id="welkomlijst">
            <li class="gppolink"><a href="http://skipblah.nl" title="Guis Privé Pakket pagina"> </a> Bereken uw premie en sluit nu uw Guis Privé Pakket online af via het <a href="http://skipblah.nl">GPPO</a>.</li>
            <li class="scooterlink"><a href="http://skipblah.com" title="Scooterverzekeren"> </a> Laat u verrassen door onze lage <a href="http://www.skipblah.com">bromfietspremie</a>.</li>
...etc...</ul>

Code (markup):

I sure hope there isn't really a page called skipblah.com...

body[id=guis] #welkomlijst {
  color: #fff;
}
#welkomlijst li {
  display: block;
  height: 90px; 
  position: relative;
  padding: 10px 0 0 95px;
  background-position: left top;
  background-repeat: no-repeat;
}
#welkomlijst li a:first-child {
  display: block;
  height: 55px;
  width: 90px;
  position: absolute;
  left: 0;
  top: 0;
}
	li.gppolink {
	  background-image: url(guisy.gif);
	}
	li.scooterlink {
	  background-image: url(welkom_nieuws_bromfiets.jpg);
	}
	li.sloeplink {
	  background-image: url(welkom_nieuws_sloep.jpg);
	}
	li.ziektelink {
	  background-image: url(welkom_nieuws_ziektekosten.jpg);
	}
	li.uitvaartlink {
	  background-image: url(welkom_nieuws_uitvaart.jpg);
	}
	li.rijwiellink {
	  background-image: url(welkom_nieuws_fiets.jpg);
	}
	li.eurolink {
	  background-image: url(welkom_nieuws_vakantie.jpg);
	}

Code (markup):

There's prolly a cleaner way to do the different backgrounds per li, and I need to figure out what I'm going to do with IE6 since the same list is there too... first-child is only replacing a class, since every list item has TWO <a>s, and I didn't want more classes. But anyway, now you can click on the background images : )

*Edit damn yeah I either need to add classes to those first a's OR not have the images also clickable (which the old site has and I'm only copying it).

 

This is true, only use and an <img> if the img in actual content, blind people don't need to know you have a logo called 'My logo' it's not going to help them.

I use cms so I use PHP to display alt and title like

For wp.

 

In the case of the logo, it IS content since it identifies what the site is, which is why I use the name of the Web site preceded by the word "Logo".

 

The Yellowpipe Lynx viewer is a useful utility that displays web pages in text only mode and approximates Search Engine spidering.

James

 

Maybe, but they would know what site they were at. I use typography over image logos most of the time anyway, so that's a little different.

Ok, people don't need to know that you have a nav bar fill?

 

Several years ago I was the Senior Technical Advisor (volunteer) for Access World Design and Development, Inc. -- a non-profit organization dedicated to the training and employment of the disabled in accessible web design. Most members were severely disabled (Deafblind or with respirator dependent Duchenne Muscular Dystrophy) who we trained to become independently proficient Web authors. It was a most rewarding experience and I remain committed to Web Content Acessibility to this day.

It was fashionable at that time to enclose alt text in [square brackets] so that it would be readily discernable in Lynx and screen readers. I still identify my alt text this way.

James

 

Not everyone will, Valve-Hosting. Especially those who associate images with logos anyway. And besides, semantically, it's the best we've got at the moment. (Unless you're Anne van Kesteren that is.)

 

huh, I don't get it.... on hubby's machine, don't have all my tools, but what the hell's on that site? what's with that href??? To the Googles!

 

Just get Firefox or Opera.

 

He will go all weird in pushing the envelope.

cheers,

gary

 

We have a rule in this house, Dan, it's called No Microsoft Products Allowed... penguins everywhere, that whole thing... so I was seeing it in Firefox but wtf??? So he's sending his meta tag info via real HTTPheaders... that href thing.... that's hex, wtf?... he's styling his head... WTF... is this being served as xml?? Real actual xml? Oh man if Internet's back up at work tomorrow I'm totally checking that out in IE. What the... hell...

Christ almight I think I want this. Oh, and today we've bought a house. So now I'm dizzy and going for a walk.

 

Congratulations on buying the house!