I am using pictures from Wiki Commons for my website. As part of the use, I am required to reference the copyright holder.
What is the proper way in HTML to provide both accessibility and credit to pictures?
(When I look under SitePoint’s Reference section it just has the alt tag.)
Another website that I frequent takes this approach…
<img border="0" alt="Credit: Flickr user johndoe" title="Credit: Flickr user johndoe" src="images/somepicture.jpg" />
[B]To clarify, what I am wanting is this…
1.) I want screen readers to tell the user WHAT the picture is
2.) I also want screen readers to tell the user WHO the picture is from.
[/B]
So there needs to be a proper semantic way to provide two pieces of information in the HTML.
The code example you gave is redundant and mainly pointless because it’s a duplication of the ‘alt’ attribute, which is not really how you are supposed to write ‘title’ attributes.
The ‘alt’ attribute is for ‘alternative text’ when the element cannot be rendered normally. The ‘title’ attribute gives additional ‘supportive information’ and may be rendered in a variety of ways. Just considering screen readers or assistive devices is a narrow approach to basic web accessibility.
Yeah, that is one option, but honestly, I don’t want to advertise the copyright holder that much.
By using Title, if/when the user hovers over the image, a popup displays the copyright holder. (I think in the old days ALT did that but they changed the W3C specs?!)
Of course, if you have images off or have a reader, I don’t think the Title is read out, is it?
Can I have two ALTs?
Or should I do something like this:
<div class="pic right">
<img src="/img/hawk.jpg" alt="Hawk flying over Green Lake; Credit: Ryan B - Wikimedia Commons" />
</div>
You misunderstood my remark about the title tag. If you have both, browsers will display only the title tag as a popup, so you wouldn’t put your “credit” info in it. But if you have only an alt tag, IE will use that as the popup (FF and Chrome will not).
By hiding it in the title, people who use a keyboard and aren’t blind will never know. About 90% of the things I do in a day or most people do, i can without touching a mouse. Alt did pop up in the old days, but that was one of the things IE decided to do. The title isn’t read usually unless it cannot find the alt attribute.
You cannot have two alt attributes.
You can do what you suggestied alt=“Hawk flying over Green Lake; Credit: Ryan B - Wikimedia Commons”, but would advise against it. If your images are needing to be credited you should let everybody see. I am nearly 100% sure a photographer will scan your code to see if you hid credit in alt. Also it is not proper to put that info in an alt unless it is embeded in the image.
There is a public radio show I listen to each week - non-profit - and they have their website set up to credit Wikimedia Commons images when you hover over the image.
I think that looks better, and yet it still fairly credits the author/copyright holder.
No one says you have to credit in bold ALL CAPS - you just have to make a fair attempt to duly credit the copyright holder.
It may look better, but if they are putting that info into the alt, then that is improper. Unless, like I said the actual image has wikimedia in a corner. If it is via the title attribute that is fine, but a scree reader won’t announce it.
ALT is supposed to let the reader “know” what an image is when he/she cannot see it, just as someone who can see it would know what it is.
A picture of mountains<— For people who can see images <alt=“You are missing a picture of mountains!”><— For people who cannot see images
If I understand everyone correctly, “Title” won’t show up unless you have “Alt”, right?
And if I just have “Alt”, then FireFox and Chrome won’t display it to regular readers.
So - while redundant - I believe that is why the website I would like to mimic has an “Alt” and “Title” that are identical.
That way people with images off/screen-readers know that we are looking at “A picture of a hawk by Ryan” and regular users will also see this if they hover over the image.
Not necessarily the most eloquent, but it duly credits the author/copyright holder and it doesn’t muck up my website which is already short on space.
That is my understanding of things, and I do recall a similar strategy discussed in an HTML book from long ago.
(Where is DeathShadow or Paul O when you need them?!)
No, that’s not correct. “Title” will show up, in all browsers, when the user mouse-hovers on the image. If it’s missing, nothing should show up, but IE gets this wrong, and shows the “alt” content in that case. It shouldn’t do this, but it always has.
Technically, you should always have an “alt,” but a “title” is optional.
So - while redundant - I believe that is why the website I would like to mimic has an “Alt” and “Title” that are identical.
The two attributes (happy, now?) serve different functions, and generally shouldn’t have the same content. A regular visitor doesn’t need to be told, when he hovers his mouse over the hawk image, that it’s a hawk. He can see that.
The title is not announced via the screen reader IF an alt is specified. If you don’t give an alt but do a title, a screen reader will read it, however that is invalid code. You can make the title and alts the same, kind of pointless IMO.
Have a read of The alt and title attributes | 456 Berea Street
A poor design on the creators of HTML, yes, but a pointless on my end as a designer, no.
Everyone needs to who the author of the picture is (and I am trying to avoid having to note it using plain text below the image.)
To cater to both people who can and cannot see images, the only option I am hearing out of this discussion is to put the same content in both ALT and TITLE.
Or, more correctly, this seems like the best compromise to me…
[B]ALT=“Mount Everest; Credit: Wiki Commons user Ryan”
What is so bad about plain text? Me who barely touches the mouse will never see it. If I was a hot shot photographer and didn’t know about the hover, would not see my credit.
ALT=“Mount Everest; Credit: Wiki Commons user Ryan”
is not appropriate use of alt, unless like i said it is in the picture, but it works.
