Skip to main content
Inspiring
July 16, 2018
Answered

Images updated for mobile, but now lost my alt tags

  • July 16, 2018
  • 3 replies
  • 1002 views

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?

This topic has been closed for replies.
Correct answer Jon Fritz

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.

3 replies

pziecina
Legend
July 16, 2018

This is just a continuation of a post last week -

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

Nancy OShea
Community Expert
Community Expert
July 16, 2018

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.

Nancy O'Shea— Product User & Community Expert
Jon Fritz
Community Expert
Community Expert
July 16, 2018

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...

larry45Author
Inspiring
July 16, 2018

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
Community Expert
Jon FritzCommunity ExpertCorrect answer
Community Expert
July 16, 2018

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.