Billboard alt text not showing

[dajoturner]

Benjamin Read reported this issue (INC0204984). I verified that I can't get mouse-over text on any billboards. See: http://politics.ucsc.edu/

Ben said: The other thing is that before this recent update, the alternate text for a billboard image would be displayed on mouseover. This allowed us to explain what the images were about. I tried putting the same text in the "headline" and "teaser" fields but it didn't seem to work. Any ideas?

[knice]

It was actually the title attribute of the img tag, not the alt text. I used to include the alt text as a title.

It was originally intended as an accessibility feature. However, it turns out to be exactly the opposite of accessible, since screen readers will sometimes read both the title and the alt text, which is annoying and redundant.

So I removed the title from several places within the templates, except for photo galleries and home page galleries, because the title is what fancybox uses to display captions on image pop-overs.

Of course, it was a small change I figured no one (except poor screenreader users) would notice...

[knice]

One more thought on this. I can see in the HTML source on politics.ucsc.edu that they have essentially what amount to captions as the alternative text of the image. The alt text should not be used that way. It is supposed to be a text description of the image, not an accompanying caption.

I think it would be best to use the new headline and teaser feature to caption the image and limit the alt text to a simple, concise description of the image.

[dajoturner]

I agree. Good luck to us both on that.

So should I be able to see mouse-over alt text now on billboards? I republished a page, and I stlll can't. I can see the alt text in the code, but no mouse-over.

[knice]

You shouldn't be able to see it. Internet Explorer used to show alt text on mouseover, but I don't know if it still does.

The expected behavior is that alt text will not show up when mousing over a billboard image.

[dajoturner]

Hate to differ with you, but here is a screenshot of a billboard from politics-old with mouseover alt text showing in Chrome. Are you saying that was an error, and that now it's correct?

[knice]

Yes, but not that it was an error. What you are seeing is in the alt attribute and the title attribute of the image. Here's that exact img tag in the HTML from the old site:

<img 
width="780"
height="250"
src="images/billboard/eaton-2012-graduation-780x250.jpg"
alt="Professor Kent Eaton speaks to students and their families at the Politics graduation reception."
title="Professor Kent Eaton speaks to students and their families at the Politics graduation reception."
>

The alt and the title are the same because we used to put whatever the user entered as alt text into the title attribute as well. What you are seeing is the title attribute, displaying in a tooltip.

Here is the same image in the new template:

<img
width="780"
src="images/billboard/eaton-2012-graduation-1080x346-qual90-prog.jpg" 
alt="Professor Kent Eaton speaks to students and their families at the Politics graduation reception."
>

I've removed the redundant title attribute because it wasn't a proper use of the title attribute and because some screen reader software will read both out loud.

So, in the new templates, there will be no more tooltip displayed, regardless of whether the alt text field is filled out or not. The alt text is still printed in the HTML source, but there will be no tooltip displayed, because the title attribute is not present in the HTML anymore.

Hopefully that makes sense?

[dajoturner]

I guess it makes sense. It means that the standard (non-accessible tech) user will never see that text. That makes sense, but we have people who are used to that feature being there, so this is a change.

OK, so that means this can close. I'll let Ben know that it's how it should be now.

[dajoturner]

I'm reopening this just to be a pain in Rob's butt before he can go off for a vacation. I told Benjamin his options, and he responded with some excellent user feedback. So I'm forcing you to read it, before unceremoniously closing again.

Thank you once again. OK, so with Tool Tips / mouseover text deliberately disabled, our text options are now 1) Have no text at all associated with the image. 2) Have no text associated with the image but have the billboard link to another page that would explain it -- but we have no such pages and are not trying to get people to jump off our home page onto a dedicated page about each billboard, we just want to pique their interest and tell them what we're about. 3) Use the headline/teaser option ... but this produces text that is incredibly LARGE and LOUD and takes up ~40 percent of the image space (please see attachment.) 4) Stamp text on the image ourselves.

Anyway, I appreciate your explanations and your suggestion that we use the feedback form to plea for restoration of the previous functionality.

[dajoturner]

Setting this to Fix Later and closing. We'll evaluate options when Rob gets back from vacation.

[claucasf]

David, I believe this needs a response from Rob.

[dajoturner]

@knice Setting to Critical and assigning to Rob to comment. Rob, I think we can close this one, but please weigh in.

[dajoturner]

Nah, I know the answer. This is as designed. Ben will have to work within the tool as is. Closing.