Highlighted

Images updated for mobile, but now lost my alt tags

Enthusiast ,
Jul 16, 2018

Copy link to clipboard

Copied

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?

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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.

TOPICS
Dreamweaver | Mac OS issues, Learn Dreamweaver

Views

413

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Images updated for mobile, but now lost my alt tags

Enthusiast ,
Jul 16, 2018

Copy link to clipboard

Copied

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?

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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.

TOPICS
Dreamweaver | Mac OS issues, Learn Dreamweaver

Views

414

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 16, 2018 0
Adobe Community Professional ,
Jul 16, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 16, 2018 0
Enthusiast ,
Jul 16, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 16, 2018 0
Adobe Community Professional ,
Jul 16, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 16, 2018 0
Enthusiast ,
Jul 16, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 16, 2018 0
Adobe Community Professional ,
Jul 16, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 16, 2018 1
Enthusiast ,
Jul 16, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 16, 2018 0
Adobe Community Professional ,
Jul 16, 2018

Copy link to clipboard

Copied

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>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 16, 2018 1
Enthusiast ,
Jul 16, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 16, 2018 0
Adobe Community Professional ,
Jul 16, 2018

Copy link to clipboard

Copied

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.

CC-StarterPageAssets.jpg

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 16, 2018 0
LEGEND ,
Jul 16, 2018

Copy link to clipboard

Copied

This is just a continuation of a post last week -

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 16, 2018 0