Images updated for mobile, but now lost my alt tags

[larry45]

I had an apprentice a year ago; update all my old html pages for mobile, they are now mobile friendly.

But I noticed something today. All the main image alt tags are gone.

Something between the css style sheet and the html file.. it does not seem the file has that image info on it anymore.

How does this work? I'm mostly ignorant of CSS.  The html file now points to an image in the assets folder, so the image (unlike before when I manually dragged image onto the html page), the alt tag is not there?

[Jon Fritz]

CSS doesn't have anything to do with alt attributes.

The alt attribute is part of the <img> tag in the html of your page. It sounds like your apprentice simply forgot to add them (hopefully they didn't turn all of your images into css background-images where alt attributes can't be added).

If you have actual <img> tags in your html, and you're just missing the alt attributes, you can add them yourself by clicking on a given image in Design View, then in the Properties Window, add the text you want to use to the Alt field...

[larry45]

Jon, "

(hopefully they didn't turn all of your images into css background-images where alt attributes can't be added).

"

Can you explain this I would not know what to look for here....

[Jon Fritz · Accepted solution]

An html image is written as...

     <img src="yourimagehere.jpg" alt="alternative text here">

...within your HTML.

Images can also be added to an html container via the css by using the background-image property and setting the value to one of your images. Doing that would look like this in your html...

     <div id="mydiv"> Text that would show over your image </div>

...but that container would be getting the image itself from the css, not from an <img> tag. The css could look something like this...

     #mydiv {
          background-image:url(yourimage.jpg);
     }

Since the css is writing an image into the background of really any container, there is no <img> tag, so there's nowhere to put a true Alt Attribute. There are hacks to get some alternative text that will work for some screen readers, but the Alt Attribute can't be used for images that don't have a true <img> container.

Because of that, it's fairly important to make sure you DO NOT use css background-images for items of any real importance on your site.

If you're not seeing any <img> tags when you inspect your site's code in a browser, it would mean the apprentice used a fairly poor method for making the images responsive and you'll likely have some work ahead of you.

[larry45]

Thanks Jon great answer, I now have a new apprentice, so we'll examine and see if it's case. probably is.

Funny, old apprentice -- put the code for a logo but not the main image.. ugh.

Now if this is the case how hard is it to undo?

At some point we may open each page one by one to upgrade text and metadata and boost up, so then we could fix at that point..

[Jon Fritz]

It's hard to say, working in hypotheticals, but for an experienced developer, it shouldn't be very difficult to get the images out of the css file and back into the html. It depends on the design of the site as to whether a novice would be able to handle it without breaking other aspects of the layout though.

[larry45]

Thanks Jon, but it's nice the have the image dynamic. Can the image be dynamic (ie, replaceable instantly for hundreds of pages), but also in which one can alter the image alt tag, page by page?

[Nancy OShea]

I have a live demo of an image gallery that is dynamically populated from a folder of images on the server.  As new images are added or old ones deleted, the page autmatically updates with new content. 

If you look closely at the code, you will see that each image gets its ALT attribute from the descriptive variable called title which is actually the filename.

Alt-Web Demo : Dynamic Photo Gallery with Bootstrap 4, PHP & Fancybox

<img class="img-fluid" alt="'.$title.'" src="'.$directory.'/'.$file.'"></a>

[larry45]

Thanks Nancy, I cannot follow over my CSS head right now!

[Nancy OShea]

Stylesheets have nothing to do with img ALT attributes.  The fact that somebody made your images "mobile-freidnly" and neglected to include ALT inside the HTML code are 2 separate things.

Assets are frequently stored in sub-folders  for better site management.

It's indeed possible your images are coming from a dynamic source.  To confirm, we would need to see the code.

[pziecina]

This is just a continuation of a post last week -

https://forums.adobe.com/thread/2511096