I could use some help on determining the proper way to mark up images…
This topic came up in the past, and I chose to do things a certain way, but I know in another recent thread of mine, Paul O’ mentioned that I should make some changes (of which I don’t remember).
I think Paul O’ was saying to drop the word “Picture” and maybe even the whole alt tag? :-/
This much I do know, however…
Because I am using pictures from Wikimedia Commons, I need to give credit to the author of the image. However, I do NOT want to have to “advertise” this information below the picture, because 1.) It takes up precious space, and 2.) People may perceive using open-source pictures as “cheap” or “unprofessional”.
It seems to me I used what is above, because it would give due credit to the author when someone hovers over the image OR for visually impaired users, screen readers would announce the Author.
Hopefully there is a solution that meets my needs, is accessible, and give due credit to the generous authors sharing their work with me?!
Definitely remove the word “picture” from the alt/title text, as a screen reader will announce it as a picture anyway. As for hiding the credit in the alt/title text, it doesn’t seem like a proper way to credit to me. If accreditation needs to be given, it’s best to have it visible. Personally, it doesn’t make the site seem cheaper to me if the image comes from a free source—just like I don’t see some big company as a bunch of cheapskates for using WordPress. Accreditation of an image source is quite a dignified thing (in my mind anyway) and suggests integrity to me, so I think it works well for a site.
I would change the word ‘Picture’ to something like Image or Photo rather than remove it alltogether. If for some reason the image is not available resulting in that ugly looking small icon with a red cross, or whatever, in it appearing then it could be useful for some users (with or without screen readers) to be informed that an image/photo is missing.
If using xhtml strict (not sure with html strict) then the alt tag is a required attribute to pass w3c validation.
Wouldn’t that ugly icon represent a missing picture and the alt tell what the picture was/is? I agree with Ralph, seems a bit redundant to include the word “picture”, “photo” or “image”.
Your accreditation text doesn’t need to be huge. In fact I think it should be quite small and [as most commonly is done] placed under the picture.
Good thing your entering this all yourself because if you had to sit and explain to a none-technical person the reason they need to include alt and title text when entering images you would most likely get a blank stare followed by useless if any at all alt or title information. Even worst when consuming data from an external source.
Also, I don’t mean to go deathshadow on you or anything but using divs for a list is not semantic. That is what that will be – a list of articles with titles and teasers. Also, there is probably very little reason to be using so many divisions considering your writing all the HTML and CSS yourself. All you really need is probably a heading tag followed by a list element depending on whether order has any significance.
<h2>Small-Business Articles</h2>
<ul>
<li>
<h3><a href="#">Postage Meters Can Save You Money</a></h3>
<img src="da_image_src" alt="whatever">
</li>
</ul>
Maybe also wrapping it in a div but that depends on the context which it is used – by itself or with other lists.
<div class="small-business-articles">
<h2>Small-Business Articles</h2>
<ul>
<li>
<h3><a href="#">Postage Meters Can Save You Money</a></h3>
<img src="da_image_src" alt="whatever">
</li>
</ul>
</div>
if you want people to be able to click on the image and go to the article I would handle that with JavaScript using progressive enhancement. You could even do it for the entire list item.
This is also something else to think about will all images be the same orientation and size? If you work in the real world probably not. If that is the case you can apply the image as a background to a div and use the handy backgrounds-size: contain; property/value to have the browser constrain ANY size image to the area allocated by the div. Especially useful when mixing different orientation types.
<div class="small-business-articles">
<h2>Small-Business Articles</h2>
<ul>
<li>
<h3><a href="#">Postage Meters Can Save You Money</a></h3>
<img src="da_image_src" alt="whatever"> <!-- hide this with CSS -->
<div style="background-image: url(da_image_url);"></div>
</li>
</ul>
</div>
For the low cost of creating an extra div you can have most browsers these days take care of fitting the image within a specified area using background-size: contain. There is an additional downfall considering the inline style but you can’t have everything. So with those two sacrifices the browser can take care of partially resizing the image… well most modern browsers. In theory you could show the normal image for browsers unable to resize and the div for those that are. I might get slapped for mentioning this but I think it is way to powerful to ignore. Designs always cater to a consistent dimension/proportion of image and when dealing with user input rarely is that desired image dimension used. So when someone enters a vertical image that would throw the entire layout off without some wacky JavaScript. This way it all just works and without an JS!!! Additionally if you use background-size: center center; the image will be centered in the allocated space made up by the div.
Mind you, there are icons sets available for free that you might consider using. If they require accreditation, I’m not sure if it’s acceptable to put that statement in one place on the site rather than under each image.
Or you could consider using stock images that can be very cheap and which don’t require accreditation.
Yes to me and tech/web savvy people it would represent a missing picture but there are a lot of elderly and not so tech/web savvy people out there that would not necessarily be aware the icon represents a missing picture.
So if I had an image of the Eiffel Tower on a page, I would typically have an alt attribute something like “Photo of Eiffel Tower”. Obviously you can put whatever description you like in an alt attribute.
I would still say wrap image and subtitle in a div with a set width and float it all left. If you are likely to have images too tall, then if makes me question the layout. Perhaps in those situations you should just use a short image. (I am kind of over decorative images anyhow, so I might be a bit negative about all this.)
Well, I guess they are ok, although I think the page would look better with that sort of image the same size (or at least width) for each post. But with my current dislike of unnecessary things, decorative images just look like an object in the way to me. I guess I’m not speaking for many people, though.
