Methods for displaying gallery images with titles

HTML & CSS
1

Okay, another question… when I was checking my main page:
https://moskovita-photography.com/]
again with validator.w3_org it was good:

Document checking completed. No errors or warnings to show.

But when it was talking about the images, I don’t fully understand what it meant by:
The following images have textual alternatives. Please review that the textual alternatives make sense considering the purpose of the image in the context of the page and that phrases like “Image of …” are avoided.

Note that iconic images that are redundant with text next to them or purely decorative should have alt="" instead.

What it’s referring to is: (all of them)
-img src=“2017-MtAdams_TahklakhLake_sky-975px.jpg” alt=“Takhlakh Lake - Mt Adams” title=“Sunrise at Takhlakh Lake under Mt Adams”-

Do I have the"alt" and “title” description backwards?

Image_Naming-Q
Image_Naming-Q1431×750 173 KB

1 Like
2

You need to remember that this is an automated checking tool, and can only check that you have alt text in place as required for accessibility: it can’t check whether that text makes sense or is correct. So it’s just reminding you to check that for yourself.

While you must have alt text for any image which is not purely decorative, you don’t need to have a title; that’s up to you.

You might find this article on alt text helpful.

https://webaim.org/techniques/alttext/

4 Likes
3

And no, there’s no ordering necessary between alt and title.

1 Like
4

Looks to me like I’ve done my [Alt text and titles] done properly.

6

Not really, if you read the Webaim link @TechnoBear posted.

IMHO, in the first topic, the “Seattle” alt text is not a helpful description of any of those images. :wink:

7

Actually I’m not done with this page yet (my 3rd gallery) I haven’t filled the “title” tags yet which explains the photos like I did on my first two galleries. Check my home page source and see what you think… or do I need to change that too?
https://moskovita-photography.com/

8

The title tag attribute is really not meant for images but for links to get extra info about the target.

If you like, you could implement CSS tool-tips to show the alt text on hover. The CSS tool-tip is instant compared with the title attribut that is delayed and often not show because the mouse have moved elsewhere.

You can style the tool tip as you like, even look like the title does. What you can’t do is hinder the title to show too (but delayed) if the title attribute is not empty.

2 Likes
9

I’ll have to try this… it will take awhile as I have 315 photos in those three galleries I have so far. Where to I get the CSS tool-tips? On this forum?

Does this mean I can eliminate the title attribute ? Wouldn’t that hurt google rankings?

10

For a start: How can I make this tooltip appear on hover - #11 by Erik_J

This example I think is too complicated for your case, but you can see what you can achieve without Javasdript. :wink:

Yes!

I think not, on the contrary I think the alt text would, if made more informative, better serve Google’s image search.

1 Like
11

No. Google recommends writing good alt text.

https://support.google.com/webmasters/answer/7451184?hl=en&ref_topic=9268559 - look for the section on “Optimise your images”.

1 Like
12

The question was two folded. I think you only answered the second part. :wink:

2 Likes
13

OK, let me rephrase that. smile

Yes.

No.

smile

3 Likes
14

Boy, I have my work cut out for me and I thought I was almost done. LOL
Now I’ll have to go delete all 315 title attributes and add to the Alt text I’ve got.
So I can take my descriptions in the title attributes and place them in the “Alt” instead?

Whew! Give me a week, as I have a lot going on with new house I bought.
I appreciate all the help and advice I’ve gotten here!

15

Just to get you started, here’s the minimum code to show the alt text on hover:

img:focus:before,
img:hover:before{
	position:absolute;
	content:attr(alt);
}
<img src="RainierWildflowers4-975.jpg" alt="Wild Blooms at Paradise, Mt Rainier">

The position and style and font and box can be costumized as you want it to appear. :sweat_smile:

1 Like
16

Like all great artists, you never are. :rofl:

Or do a fast dirty fix:

Search and replace with a comma and a space all instances of: " title="

3 Likes
17

Ah… I forgot about that… I’ve used that to change a lot of things in the past.
Thanks for the heads up on that and the code you gave me.

18

Where do I place this? In header or body next to photo?

19

Or do I replace the "hover’ that’s used for the “title attribute” in header?
If so, which ones? I can’t seem to find any with "title attributes for hovering?

}

.photo ul.topic li:hover a {
  color: #fff;
  background: #aaa;
}

}

.photo ul.topic li:hover ul {
  display: block;
  position: absolute;
  left: 0;
  top: 31px;
  background: #ddd;
  padding: 10px 15px 15px;
  border: 15px solid #aaa;
  z-index: 10;
}

}

.photo ul.topic li:hover ul li a:hover {
  white-space: normal;
  position: relative;
  z-index: 100;
}

.photo ul.topic li:hover ul li a:hover img {
  position: absolute;
  left: -50px;
  top: -32px;
  width: 200px;
  height: 150px;
  border-color: #eee;
}
20

You simply add the new CSS rules to the “slides” section of your CSS in the head of your page.

img:focus:before,
img:hover:before{
	position:absolute;
	content:attr(alt);
}

(I’m sure someone will already have mentioned the advantages of having your CSS in a separate file.)

21

That won’t work Erik as generated content is not defined (doesn’t work) for replaced elements like images. It would only work if the link was broken and the replaced content was unavailable and then it would show the pseudo content (but that would be pointless because the alt attribute text is already shown when the image is missing). :slight_smile:

You won’t be able to have the hover on the image unless you have a tightly wrapping parent (such as an anchor) and use the title text from the anchor as the hover text.

3 Likes