SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26
  1. #1
    SitePoint Addict Divisive Cotton's Avatar
    Join Date
    Jun 2008
    Location
    Andy lives in London, UK
    Posts
    393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Correct use of text in alt tags

    Just how descriptive am I supposed to get?

    A few words for a summary or a commentary on what is happening in the pic?
    Let everyday be Christmas

  2. #2
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First off, it's not the alt tag but instead the alt attribute or alt text.

    And a good article about this is http://www.webaim.org/techniques/alttext/ . Just remember not to use alt text for useless graphics and such.
    Cross browser css bugs

    Dan Schulz you will be missed

  3. #3
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,374
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    the ALT attribute is there to describe the image. It's used as a replacement when the image is not available and also for people using assistive technologies so they can understand what the image means in relation to the content.

    If you had a picture of a cat playing with a ball of wool it's say "Jess the cat playing with a ball of wool"

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bluedreamer View Post
    the ALT attribute is there to describe the image.
    No, it's not. It's there to replace the image if the image cannot be displayed. If you want to describe the image, use the longdesc attribute.

    The alt text should contain a text equivalent of the image. In other words, it should convey the same information as the image does. That is rarely the same as a description of the image.

    I've written a fairly lengthy thing about text equivalents in this article. Scroll down to #33 to find the bit about images and alt attributes.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,374
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    No, it's not. It's there to replace the image if the image cannot be displayed.
    That's what I said - to replace the image you need some sort of description

  6. #6
    SitePoint Addict Divisive Cotton's Avatar
    Join Date
    Jun 2008
    Location
    Andy lives in London, UK
    Posts
    393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In the text do you have to write "Picture of cat playing with ball" or will "Cat playing with ball" do...

    Is it obvious to screenreaders that it is text for an image?
    Let everyday be Christmas

  7. #7
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Divisive Cotton View Post
    In the text do you have to write "Picture of cat playing with ball" or will "Cat playing with ball" do...

    Is it obvious to screenreaders that it is text for an image?
    "Picture of " or "Image of" should be avoided, I would word it as say..

    "Elly, my cat, enjoying her new toy ball" though it largely depends on the content around - so if I were blogging about how I bought a new ball then I would use that as alt text.
    Cross browser css bugs

    Dan Schulz you will be missed

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,839
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    What you would put would depend entirely on why you have included the picture of a cat playing with a ball. There are thousands of possible meanings that such a picture might have in a web page and only a few of them would require any mention of the cat or the ball.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    To follow on from what Felgall said, here are the guidelines for creating alt text

    • Ensure that the text alternatives communicate the purpose of the graphic accurately and succinctly.
    • Provide empty or null alt text for graphics which do not convey content.
    • Provide alt text for both the main image and the hot spots of image maps.
    • Do not repeat the alt text of an image in the adjacent text.
    • Do not put important images in the background.


    http://www.webaim.org/techniques/images/alt_text.php

    I like to think of all the above as: "What extra text will be required for an image-free page to make sense.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,839
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Provide empty or null alt text for graphics which do not convey content.
    In just about all cases where the image does not convey content the better alternative would be to transfer it from the HTML to the CSS since what is in the HTML is supposed to be content and what is there only for appearance should be added using CSS. Whether the image needs an alternate description for those who can't see it is a good indicator for whether it should be defined in the HTML or in the CSS. I have yet to see a good example of a situation where it is most appropriate to include an image in the HTML with alt="", the only instances I have seen are ones where the image should really be moved to the CSS when the author has time to do so.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  11. #11
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Divisive Cotton View Post
    In the text do you have to write "Picture of cat playing with ball" or will "Cat playing with ball" do...
    In this case it sounds as if you should have an empty text equivalent (alt="") unless the picture is in a photo gallery (in which case alt="Cat playing with ball" could be appropriate).

    Ask yourself, 'what does a person who can't see this image need to know about it?' Surprisingly often the answer is 'nothing'.

    One way that can be helpful is to imagine what you'd say about the picture if you were reading the page's content to a friend over the phone. The resulting text equivalent should fit into the surrounding text content. 'Cat playing with ball' at the beginning of a sentence sounds odd.

    Remember that text equivalents are not exclusively for screenreaders. They are also imperative for people with text browsers, many mobile browsers (where images are often disabled to reduce bandwidth usage and cost), some dial-up users (who may disable images to speed things up a bit), search engines, etc., etc.

    Quote Originally Posted by Divisive Cotton View Post
    Is it obvious to screenreaders that it is text for an image?
    With a well-written text equivalent, they shouldn't need to know. If you have to point out that it's an image, then your text equivalent isn't very good.
    Birnam wood is come to Dunsinane

  12. #12
    SitePoint Zealot
    Join Date
    Mar 2008
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SoulScratch View Post
    ..........
    And a good article about this is .......... webaim.org/techniques/alttext/ (JFP note: I can't have actual URIs in my posts yet) ..........
    Yes, SoulScratch, I too have always been a great fan of WebAim.

    JFP

  13. #13
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,307
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    i think there's quite a number of web site makers, very good knowledgable ones, ones who use this board etc., who don't really get alt text, and also, worse, think they do get it while not getting it. i could be wrong but the reason i suspect that is that for ages i proceeded as if i got alt text when i didn't. what i was entirely missing is the whole context aspect. not just the context of what's on the immediate surrounding page, not so much that, but the context supplied by the whole point of the website (or page) itself. i thought the way to do alt text was, first decide if the image is decoration or not (decorative as in obviously decorative -- a swirl or something -- clearly not content). if not decoration you just need to write a textual description of the image. do that by asking yourself how would you describe the image briefly over the phone to someone? then write that answer to that question into the alt attribute. but that's not at all right. it's wrong. the context of the website should seriously influence how the alt text is written --- as pointed out in the article which AcousticCukoo wrote and linked to.

    even with that knowledge i still reckon writing alt text well and properly is very hard.

    what about this for a strategy of doing alt text?: stick in empty alt tags for all the images, then access the page with images turned off. read through the page as if you'd never read it brefore, as if you knew nothing about the page (which is way easier said that done -- probably impossible so maybe get someone who really has never seen the page) and only add in any alt text (which is actually to be viewed as just text -- as if you were adding in new <p> tags to clarify the page) only when and where the page doesn't make sense as is, to make the page make sense. the concept of images should be completely forgotten about i think possibly (? not sure about that), although that probably is dependent on the context, like in the fourth example in AutisticCuckoo's article you wouldn't want to forget about hte concept of images/photos:
    In the fourth case, the image is used on a photographer's portfolio page. It's one image among several others, with very different motifs. This is one of the few cases where the alt attribute might actually include a description of the image itself, e.g., "A black Aberdeen Angus grazing in the sunshine with Ben Nevis in the background."

  14. #14
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,839
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by johnyboy View Post

    what about this for a strategy of doing alt text?: stick in empty alt tags for all the images, then access the page with images turned off. read through the page as if you'd never read it brefore, as if you knew nothing about the page (which is way easier said that done -- probably impossible so maybe get someone who really has never seen the page) and only add in any alt text (which is actually to be viewed as just text -- as if you were adding in new <p> tags to clarify the page) only when and where the page doesn't make sense as is, to make the page make sense. the concept of images should be completely forgotten about i think possibly (? not sure about that), although that probably is dependent on the context, like in the fourth example in AutisticCuckoo's article you wouldn't want to forget about hte concept of images/photos:
    And once you have finished doing that any images that do not end up with alt text are obviously part of the page appearance rather than the page content and should be moved to the CSS.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  15. #15
    SitePoint Addict antirem's Avatar
    Join Date
    Dec 2008
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use alt tags for seo, sweet and to the point of what i want th image or page to rank for.

  16. #16
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by antirem View Post
    I use alt tags for seo, sweet and to the point of what i want th image or page to rank for.
    text or attribute not TAG
    Cross browser css bugs

    Dan Schulz you will be missed

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    To demonstrate the difference, for those who don't know:

    Code javascript:
    <tag attribute="value">text</tag>

    And the whole lot is an element.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,839
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by antirem View Post
    I use alt tags for seo, sweet and to the point of what i want th image or page to rank for.
    And totally WRONG since it is NOT what the attribute is for and all you will do is drive people and search engines away from your site by using it so incorrectly.

    That is exactly what has been discussed in this thread as being the completely wrong use of the alt attribute. If you want to stuff keywords then stuff them in your text so everyone can see them instead of just blind people and people on slow internet connections who therefore have disable d the images.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  19. #19
    SitePoint Addict aguroyz's Avatar
    Join Date
    Jan 2009
    Location
    Konoha Fire Country
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try to use keywords that are relevant for your image and put it in your alt attribute...

    Convey its purpose instead of its appearance..

  20. #20
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,307
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    And once you have finished doing that any images that do not end up with alt text are obviously part of the page appearance rather than the page content and should be moved to the CSS.
    i don't think that's right in all cases of images, only some. i think there are some situations where the alt will be empty but the image should not be style, is content. sometimes an image is used to give the visual side of the story. as an image it adds and is definitely content. but in the absence of the possibility of showing the image then there's nothing worthwhile to replace it, not textwise. e.g. a news article about three lovely kittens with an accompanying picture showing the kittens. you'd not need to give that image any alt text because the text makes sense without the image. the image gives another view of the story -- another side of the coin. but in the absence of being able to show any pictures then you've lost why you were using the image -- you were only using it for its image-ness. having lost that an empty alt tag is appropriate, but the image remains content. someone viewing the page with style off but images on should see the kittens pic.

  21. #21
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Everyone says "don't use words like photo, painting" but seriously this gives me trouble:
    http://stommepoes.nl/screenshots/alttext.gif

    Spot the image. I'm reading along, and suddenly the next paragraph has this related-but-out-of-the-flow text. I'm confused, what the hell? The "clockwise" stuff gives me a clue.

    I like to know that it's an image (sure JAWS users et al get this, the reader tells them what it is, "graphic") and also what kind. An article about an artist may have a painting or a photo and IF that's kinda what the article's about I want it in my alt text. For generic images I don't do this.
    alt="[Joe's famous prize-winning photo of the kidnapped boy]"
    It's not background, but an example of the work described in the article.

    James once suggested something that I've been doing for a while now-- using square brackets to make really clear what is content text and what is alt text.
    alt="[this is alt text]"

    works a treat. In the above screenshot I'd know immediately that it was an image and that I could skip that text, continue reading in-flow and go back to it when I'm done with the main article, or whenever.

    Sometimes I describe the image because the image is funny. I did this with the cat foto on my home page. I figured the message only really gets through when you know why the cat looks stupid in the picture. But that's an exception.

    Felgall:
    There is one place where I have alt="". This is a house page where people upload photos of the house they are selling/renting. I cannot manually add alt text in there, and besides what would it say? But they cannot be background images. The best solution really was alt="". Photos of a house don't really say anything anyway. The house description had better be... in the house description. Like Javascript, the photos are an enhancement for those able to see them, and should not be conveying any NEW information.

    I don't believe in Chinese proverbs, lawlz.

  22. #22
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Spot the image. I'm reading along, and suddenly the next paragraph has this related-but-out-of-the-flow text. I'm confused, what the hell? The "clockwise" stuff gives me a clue.
    That's not because it should have an 'Image:' at the beginning of the text equivalent, but because it's a badly written text equivalent. It doesn't convey the same information as the image; it describes it.

    A good text equivalent would explain what the LHC looks like etc. (since that seems to be the information the image conveys).

    Consider this example: You're writing a tutorial for a software system. There's a dialog box which you need to explain how a user should use, so you include a screenshot of a properly filled-in dialog with numbered arrows to indicate the sequence of events. Which of the following text equivalents do you think would be most useful for a user who cannot see the image?

    Option #1
    Specify the name of the widget and select the widget type from the drop-down list. Then click OK.

    Option #2
    New Widget dialog box

    Option #3
    Image: New Widget dialog box

    The text equivalent in your screen shot is similar to option #2. Going the way of option #3 wouldn't be of much use, other than to at least indicate that it's a text equivalent for an image.
    Birnam wood is come to Dunsinane

  23. #23
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    That's not because it should have an 'Image:' at the beginning of the text equivalent, but because it's a badly written text equivalent. It doesn't convey the same information as the image; it describes it.
    Oh, I don't think my screenshot would benefit much from the word "Image" but more, something to let me know (without a screen reader) that it's out-of-flow (because it's an image, which, if the page had been designed differently, might have been in a sidebar or something, but was stuck almost randomly in the middle of the text like magazines often do).

    For things like diagrams I would write different text than a painting of Van Gogh in an article about him.

    But when the image is some kind of art I like to say what it is, if that can be incorporated into the text. If it's a photo of a spaceship in an article about spaceships, I don't need "photo" but if it's about photography while in spaceships then I really would like to know. "Graphic" is too mysterious for me.

    But if that screenshot had been like what I'm seeing now on this German politicians' site, or with square brackets, it would have been easier:
    Quote Originally Posted by German dude's site
    <h2>Vernünftiger Kompromiss ist möglich</h2>
    Foto: Frank-Walter Steinmeier | Copyright: Dominik Butzmann
    It's not really there as alt text but more the required copyright notices, which unfortunately are not visible when the image is (I think it should have been a caption or something). But the page is filled with these various images of this guy (someone randomly sent me the link, I have no clue who he is) and they images almost fall into "decoration" category. So while I don't think it's good alt text, I did appreciate knowing right away that the wasn't part of the content, and knew I could skip it (that and the text was also half the size of the content text, which I dunno if that was deliberate).

    I guess that's my biggest problem when surfing with images off, telling the alt text from the regular text. Esp what if, in your example, the alt text is repeating the paragraph above it:
    <p>When the dialogue box appears (see figure blah), type in the name of the widget and then choose a widget type from the dropdown list. Click ok.</p>
    (img showing graphical representation of the text we've just had)

    Assuming the paragraph above isn't a more verbose version (if it is, the img's alt text can kindof work like a summary in this case), what would you use for alt text here?

    But anyway, no, I'm not saying I want
    alt="Image: Howard the Duck"
    but rather
    ducks ducks ducks ducks
    [Howard the Duck is a more famous example of a comic book duck who's reached the silver screen]
    ducks ducks ducks ducks

    I can skip Howard and just stick with ducks. I know I passed some blurb of info, and I know I can go back to it, because something made it a bit separate from the rest of the text.

    or

    multimedia multimedia multimedia multimedia
    video video video
    [joe schmuckenberger's "four" video caused controversy when it was first released] <object the video>
    video video
    photography photography photography photography
    photography photography [jane's photo's show how optical illusions can work on film] photography photography [photo: 2-d karpinski's carpet] [drawing: 2-d and 3-d karpinski's carpet] [sculture: karpinski's carpet as a cube] [computer model: karpinski's carpet as a cube]

    (those could be: [photo of a 2-d karpinski's carpet] [2-d and 3-d pencil art of karpinski's carpet] [karpinski's carpet sculpted as a 3-d clay cube] [3-d computer model of karpinski's carpet as a cube] I realise)

    (sorry I can't remember the guy's name but the carpets and the cubes look pretty wicked)

    *Edit it might be that with my screenshot, the writer wanted to dress up the content (about recent events) with images of the LHC and chose to stick them in the HTML either because it's a news item (the page is updated often, harder to stick in CSS) or because he needed the legally add the Courtesy of CERN 2008 tag. If so, I would have had alt="" and a little caption underneath with the required copyright stuff

  24. #24
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Oh, I don't think my screenshot would benefit much from the word "Image" but more, something to let me know (without a screen reader) that it's out-of-flow (because it's an image, which, if the page had been designed differently, might have been in a sidebar or something, but was stuck almost randomly in the middle of the text like magazines often do).
    The correct solution is to rewrite the text equivalent so that it isn't out-of-flow. That's the trick when it comes to text equivalents: they must fit into their surroundings. That is why a text equivalent always depends on the context, and why there isn't one 'given' alt attribute for a certain image.

    Quote Originally Posted by Stomme poes View Post
    So while I don't think it's good alt text, I did appreciate knowing right away that the wasn't part of the content, and knew I could skip it (that and the text was also half the size of the content text, which I dunno if that was deliberate).
    If it isn't part of the content, it should have alt="".

    Quote Originally Posted by Stomme poes View Post
    I guess that's my biggest problem when surfing with images off, telling the alt text from the regular text.
    Ideally, you should neither need to nor want to. The alt attribute is a text equivalent: it conveys the same information as the image and can replace the image. The image and the text equivalent are merely two different ways to display the same information, and you shouldn't need to know that part of the text can be displayed as an image.

    Don't think of the alt text as a degradation of the image. Instead, think of the image as an enhancement of the text equivalent. In other words, write the content using the text equivalent first, to ensure that it works in its context, then replace it with an image for those who can access it.
    Birnam wood is come to Dunsinane

  25. #25
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Ideally, you should neither need to nor want to. The alt attribute is a text equivalent: it conveys the same information as the image and can replace the image. The image and the text equivalent are merely two different ways to display the same information, and you shouldn't need to know that part of the text can be displayed as an image.
    Which would mean... placement of content images isn't a design decision. Something that's never brought up in alt text discussion (or, I've missed it entirely).

    Don't think of the alt text as a degradation of the image. Instead, think of the image as an enhancement of the text equivalent. In other words, write the content using the text equivalent first, to ensure that it works in its context, then replace it with an image for those who can access it.
    I've considered images as being like Javascript for some time now-- and enhancement for certain people.

    Maybe write all content text first while keeping in mind the images one plans to use on the page, and then later work them in? Now that actually sounds like a good idea, if it can be done (if the developer isn't presented with a design to code where images are pre-set).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •