We're MOVING!!! New templates after Oct. 24th, 2014 can be found on Free-3D-Textures.com.

Monday, December 31, 2012

Updating the Alt Text Tutorial

January 2014 - Still Another (BETTER!) Update to Alt Text.

Blogger has finally "got with the program" and updated how to insert alt text into your uploaded images - and, it also works for images you insert directly from a URL (like a photo storage site).

Once you've uploaded the image into your blog post, click on the image to get the settings or parameters for your images - whether you want it centered, placed to the left or to the right; whether you want the image small, medium, large or in it's original size (bad choice for very large images), and whether or not you want to add a caption to the image. These options have existed for quite a while, but there is a new option available called "properties". This is what you want to use to insert your Alt Text, as well as your image title tag.

When you click the properties button another text box opens up where you type the title of the image, and the alt text description for the image. Much easier than going back into the html of your post. As far as I can tell, this also works on previously upload images (ie: images you uploaded before this function became available), so now would be the time to start going back through your posts and editing the images.

Screenshot showing how to add alt text to images in blogger posts.

Showing the second step of how to add alt text to blogger images in your posts.


It seems that each time blogger tries to make something better - like the dashboard and image uploading functions, they change something else. The newer blogger interfaces and image uploaders will create a problem now if you don't place your alt text for images in the exact spot it should be in. I discovered by accident that if I placed my Alt Text tags anywhere else in the image codes, my images would disappear when I switched back to the "Compose" view.

Below is an image code from this week (June 2011) - in this example you'll see the alt text code I've added marked in white text. It must be placed directly before the "img border" code, and you must add all of the code for the alt text tags yourself (ie: img alt="the description of your image"). Blogger's code currently doesn't give you this - at least not in any of my recent images.

graphic showing the alt text tags added to a blogger image code

I don't know why blogger can't get this simple thing right. Why can't they give us a place to add the alt text during the upload function? Most other blog platforms already have this. Blogger is way behind in providing user functionality when it comes to images and video uploads.

They also aren't so great at complying with current web standards, and the move to html5 might make them fall behind even worse than they are.

Currently, blogger also doesn't comply with Section 508 Standards (accessibility) and things that have been deprecated a long time ago, are still being used in blogger - such as "bold" instead of "strong".

---------------END OF UPDATE-----------------

A while back I wrote an article on how to use ALT TEXT tags for your images on blogger. Recently I've received a couple of comments about the updated blogger dashboard - the new dashboard uses a different method for image uploads, and the empty "alt text" tags are no longer showing in the html portion of the image uploads.

One such question:

Lindsey said...
I don't know how it's possible, but in html mode, my images don't have the alt section in order to add text! What do you suggest?
How it's possible is probably because you are using the new dashboard, as opposed to the old style one. There are two ways to get around this - add the alt text tags yourself into the html of the image code yourself, or switch back to the old method. You can switch back to the old method by accessing your "settings" tab, and scrolling down the page to "global settings" - there should be a radio button to select the old or new dashboard.

Putting the required code into your new image code isn't that tough though. Simply click the edit html tab on your dashboard and find the code for your image.

Your image code will have two parts - the first one will look something like the following code, so simply insert the code alt="" as indicated in the sample below:


Rambling Rose Jewels said...

Thanks so much. I am off to add alt tags to all my photos now...here's to increasing my blog traffic!

Lindsey said...

Thank you so much for the update!

Anonymous said...

this does not work

Ralph said...

I have been ading the Alt="My description" for a long time but blogsopt does not display it on Mouse Over. I also blog in Wordpress where the Alt works as expected. There must be an error in Blogspot.

Gracey said...

Just to clarify here - at the time the original article was written the mouse-over did actually work for the photos. Though Ralph is correct that it doesn't work now. Blogger has been through so many changes and updates since the original article that I do need to write a new one.

But the most important reasons for including alt text are still so the bots can find the images and index them, and so people who turn off images while browsing know they are there.

Thanks Ralph!

Seta said...

I upload my photos to draft using Windows Live Writer and the codes for the photos is quite different. it already has a title and alt (but not alt img) that is the name of image file which is what i want is alt. Now I am at a loss. do I need to revise my image codes or not? where to inser img alt?
this is how my code looks <img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px; padding-top: 0px" title="Harisa 12" border="0" alt="Harisa 12"

Gracey said...

@Seta - no, you don't need to update your code using alt="image description" is the same as using "image alt"=description.

Since I wrote this update, blogger has changed their image codes as well.