SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Jan 2002
    Location
    USA
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Alt tag conventions?

    I'm pretty big on "perfect code," and I put a lot of time into making sure that my work validates and is as well-structured as possible. I use strict XHTML in all possible situations. I test on six different Windows browsers on my own machine, including Lynx, and would test on more operating systems, but I don't have access to them. I'd even test on text-to-speech browsers, but they all cost money, and I'm cheap.

    Some people call that "anal retention," but I just call it "working hard."

    Anyway, I'm running into some trouble with nicely formatting alt tags for images. The W3C and usability and accessibility gurus don't seem to say anything about it, but I imagine that alt tags for "gif text" and illustrative images and links should all be formatted differently, even if it's just for the benefit of visitors using text browsers.

    Do any of you have little systems that you use to differentiate your alt tags in different contexts?

    I ask now because I'm working on a site with logos, illustrations, text with fancy fonts, and little link button images for navigation. (Hey, I didn't design it.) If I just label those images with text as the text they have, then label the illustrations as "image of bottle of beer," for example, it looks pretty confusing in Lynx. How would you write alt tags for all that stuff?

  2. #2
    You talkin to me? Anarchos's Avatar
    Join Date
    Oct 2000
    Location
    Austin, TX
    Posts
    1,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suggest that you only give alt tag text to images which are either used as links or which relay specific information; for the others just do alt="". If the image is there just for aesthetic or style reasons, alt text is unnecessary, such as in your bottle of beer example. This will help eliminate superfluous text in browsers such as lynx.
    ck :: bringing chris to the masses.

  3. #3
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Alt tag conventions?

    Originally posted by Liet
    I'd even test on text-to-speech browsers, but they all cost money, and I'm cheap.
    Not true! Simply Web is a free (at least currently) speech browser. It's a bit of a striped down version of SimplyTalker, I think. Other than the fact it doesn't read alt tags, it's a pretty good little web browser. :-)

    As far as alt text conventions, I'd say wait for Nicky to respond. Until then, I think that a layered approach would offer the best benefit. Alt text should meaningfully portray the image -- I've also seen many sites that explicitly stated what something was (i.e. "[Blank Company Logo]"). Give a short indication of what something literally is in the alt tag. Then, for a longer description, use the longdesc attribute (URL to more in-depth info) combined with a d link (represented by the letter 'd' and links to an in-depth description; can also be a linked image with the alt text 'd'). And for supplemental information, use the title attribute.

    ~~Hope This Helps

  4. #4
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I am currently using the following convention as I have been doing extensive research on this. The reason being is that I am writing an accessibility checker, and this checker checks for different conventions depensding on the TYPE of image it it.

    Quote from a paper I had published at a conference:
    Images on the Web are used for a variety of different purposes, each of which should use the ALT attribute in different ways. We classify images into five groups, navigation, layout, decoration, supplment and content.

    o NAVIGATION image
    A navigation image could be an icon on a menu bar, or maybe a set of arrows to allow the user to move backwards and forwards from webpage to webpage. This type of image will be beneficial to group 1 as a visual aid and groups 2 and 3 with the appropriate ALT attribute.

    o LAYOUT image
    Layout images can be images which are used in or-der to create whitespace or special formatting ef-fects. They do also include page dividers and bul-lets. A layout image is not relevant to groups 3 and 4 so they can be basically ignored by these two user groups. Although, it is often the most common type of image to be misused by developers to provide in-formation to group 4.

    o DECORATION image
    An image that is used for decoration could include an image used as a background for the website, or maybe a page header that in its use of colour tries to bring all the graphical elements on the page to-gether.

    o SUPPLEMENT image
    A supplement image is a graphic that helps the user gain a wider understanding of the content of the website, without being essential to the userís overall understanding of the site. For example, a company logo, or in the case of the Formula 1 website it could be a photograph of a driver alongside his bi-ography.

    o CONTENT image
    A content image is one that is vital in making cer-tain that the underlying meaning and content of the website is not lost on a user from either group 2 or 3. For example, if a commercial site is selling wa-tercolour paintings, it would be very difficult for someone to decide on a purchase with only the text description at hand, they would need to see the image of the painting before determining whether they wish to buy it or not.
    Basically decide on what type of image it is.
    No ALT attribute should be more than 5 words.

    I gotta go will post more later.

  5. #5
    Typo Negative brokenvoice's Avatar
    Join Date
    Dec 2001
    Location
    Scotland
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The best resource I have ever found on this subject is AJ Flavell's page at the University of Glasgow.

    He deals with a whole raft of topics to do with text-friendly authoring (which isn't the same as accessibility, I know, but is still a great pointer) and has a section on the use of alt text for images which is very well reasoned.

    I imagine Nicky will have used this in her research.

  6. #6
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    HI, I'm back.

    Yes I collected the best resources out there and compiled a paper based on the research that other people had done. There is actually a lot out there.

    UMIST university have got a funded project in place to test the way blind users navigate the web, also this is a very interesting paper:
    http://www.inf.fu-berlin.de/~kurze/p...95/swerg95.htm

  7. #7
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This duplicates some of what Nicky's already posted, but this is what I used in an internal style guide for my company:

    For graphics as headings, use "Heading: Same text as heading in graphic"

    For decorative images, use a description, e.g. "Picture showing man on phone, relaxing in armchair"

    For images as links, use ALT text that explains where the link is taking them, e.g. "Link to repayment calculator"

    For bullet point type items, use a * character which, if images are switched off, do the same job.

    Not exhaustive, but simple rules are good
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback

  8. #8
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    What about spacer images? I like to use a space but I have seen people who use an "x" instead?

  9. #9
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What's a spacer image? I would never use such a workaround

    Seriously, for spacer images - any kind of image that is not really there for a visual purpose - I'd use an empty alt attribute (as opposed to no alt attribute at at all)

    <img src="spacer.gif" alt="">

    seems better than

    <img src="spacer.gif">

    and besides, with no ALT attribute, it would fail validation.

    That's me, anyway.
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback

  10. #10
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I agree, except that I like to put a space in it rather than leave it empty.

    <img src="spacer.gif" alt=" ">

  11. #11
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops, that's what I meant actually. You're right - one single space should do it ...
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback

  12. #12
    SitePoint Enthusiast buffyspazz's Avatar
    Join Date
    Jan 2002
    Location
    Richmond, VA
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Use of alt tag for layout image

    I realize this thread is a little old, but I'm trying to figure out the best way to use an "alt" tag on the site on which I work. I've used the alt tag on all of my decorative, supplemental, or content images, but on each page of my website I also have a .gif file that is a rounded corner for a table. What's the best way to indicate this? It's not really a spacer gif, so I don't know that alt=" " would be appropriate here...should I put something like alt="rounded corner for layout table" or something to this effect?

    Thanks!

  13. #13
    Typo Negative brokenvoice's Avatar
    Join Date
    Dec 2001
    Location
    Scotland
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would just use " " as a screen reader will read your alt text to your visitor. I can get annoying hearing "Spacer", "Corner", "Whatever" over and over again and makes it hard for your visitor to follow where they are on the page. You can download a trial version of JAWS which lasts 30 days and even if you don't purchase the full version (and who's got $895 to spare?), 30 days of testing with JAWS will give you a good lesson in what works and what doesn't.

    Best rule of thumb I use is that if it is a purely decorative (corners) or layout-type graphic (spacers), I use " ".

  14. #14
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    I am assuming everyone is thinks the 'alt' attribute as a string of text that appears when images are turned off and not as 'TooTipText'.

    Displaying the 'alt' attribute as 'TooTipText' is a common misconception of many web browsers, for example Micro$oft IE 6.0.

    Personally if I wanted to make a site more friendly for people with disability I would also apply the "title" attribute where appropriate.

    I'll drag this old cobwebby one up for you all, from the HTML 4.01 spec:

    Do not specify irrelevant alternate text when including images intended to format a page, for instance, alt="red ball" would be inappropriate for an image that adds a red ball for decorating a heading or paragraph. In such cases, the alternate text should be the empty string (""). Authors are in any case advised to avoid using images to format pages; style sheets should be used instead.

    (http://www.w3.org/TR/html4/struct/objects.html#adef-alt )

    };-) http://www.xhtmlcoder.com/


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
  •