Liz Strauss at Successful Blog

Thinking, writing, business ideas … You’re only a stranger once.

January 17, 2006

How to Code Accessible Links–Part 2

ME Liz Strauss wrote this at 5:52 am

How to Code an Accessible Image
by Cas of Brightmeadow

Basic code

Just to remind you what the basic image code looks like:
<img src=”http://www.foo.com/image.jpg” />

The ALT description–how it works

The ALT description works in much the same way that the TITLE attribute works for a link. It is inserted after the URL but before the tag is closed and contains descriptive text. Instead of previewing the image when you mouse over though, the ALT attribute is what is read out when someone is using a screen reader. It should describe the content of the image. It is also the ALT text that is displayed by your browser when, for whatever reason, an image fails to load.

Accessible code

<img src=”http://foo.com/image.jpg” alt=”descriptive text” />

When to use

Use descriptive text in the ALT attribute when the image imparts information to the viewer, for example if it contains text like many header images and buttons do.

When to use a null value

There are certain instances when the image being used imparts no information to the reader - for example a spacer.gif (though the practice of using spacer images is now frowned upon). In these instances, consider using the null attribute to make the screen readers ignore the image. To use the null value, simple use alt="" without a space between the quotation marks. Putting a space, or just ignoring the ALT description will result in non-visual readers being told that there is an image, but not being given a description. Highly frustrating!

A few notes

Meanwhile Cas and I are off to plot a plan of our own, until tomorrow.
–ME “Liz” Strauss

The Complete Series
How to Code Accessible Links
This one: How to Code Accessible Links–Part 1
This one: How to Code Accessible Links–Part 2
How to Code Accessible Links–Part 3





Filed under Guest Writer, Links, SEO, Successful Blog, Tech/Stats |




C'mon. Let's talk!

7 Comments to “How to Code Accessible Links–Part 2”

  1. January 17th, 2006 at 7:05 am
    Katy said

    Another useful attribute - especially when designing sites for the visually impared is the “longdesc” tag which allows you to point to a HTML or TXT file with a full description of the object in question.

    This attribute is generally only available to users with Text-To-Speech browsers and is very useful considering the legislation (certainly in the UK at least) about making websites accessible to all. More information can be found via Web Accessibility Testing Services.

  2. January 17th, 2006 at 8:38 am
    ME Strauss said

    Hi Katy,
    Thanks for adding more information. More accessibility means more readers benefit and that’s the reason that we’re writing. Isn’t it? :)

    Liz

  3. January 17th, 2006 at 9:08 am
    Cas said

    Katy,

    Finally, an explanation of what the “longdesc” attribute is for! I wasn’t totally clear, which is one of the reasons I haven’t mentioned it. I do get the impression that it isn’t used that often though. Is that right?

    Cas

  4. January 17th, 2006 at 9:16 am
    Katy said

    To be honest it’s hardly ever used - I for one am a big fan of “title” and “alt” tags but have never used the “longdesc”. It seems to be a very ineffective way of describing files - having to create a separate file for almost every image/link on the page seems a bit of over-kill. From what I understand there are some browsers that don’t support it properly hence the use of the “hidden d link”.

    Plus, most browsers these days support quite long alt/title tags and table summaries can also be used.

  5. January 18th, 2006 at 7:39 am
    Successful Blog — How to Code Accessible Links–Part 3 said

    [...] How to Code Accessible Links–Part 2 [...]

  6. September 15th, 2006 at 7:09 pm
    Successful Blog - How to Code Accessible Links–Part 1 said

    [...] Complete Series How to Code Accessible Links This one: How to Code Accessible Links–Part 1 How to Code Accessible Links–Part 2 How to Code Accessible Links–Part3 [...]

  7. August 13th, 2007 at 10:09 am
    Writing Challenge: Joanna’s Thematic Link Post! - Liz Strauss at Successful Blog - Thinking, writing, business ideas . . . You’re only a stranger once. said

    [...] and Relationships How to Code Links for Sidebars and Posts How to Code Accessible Links–Part 1 How to Code Accessible Links–Part 2 How to Code Accessible Links–Part [...]

Name (required)

Email (required)

Website

C'mon Let's Talk!