Successful Blog

  • Home
  • Community
  • About
  • Author Guidelines
  • Liz’s Book
  • Stay Tuned

How to Code Accessible Links–Part 2

January 17, 2006 by Liz Leave a Comment

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

  • The description should not contain the word ‘image’. An image coded as
    <img src=”penguin.jpg” alt=”an image of penguins plotting” />
    will be read out as “IMAGE, an image of penguins plotting” by a screen reader.
    Repetitive. Rather, the text should be something like “penguins plotting another evil plan”.
  • Think carefully about when to use the null attribute. Users who can’t see your decorative or blank images don’t need to hear a description of them.

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

Print Friendly, PDF & Email

Filed Under: Links, SEO, Successful Blog, Tech/Stats Tagged With: accessibility, bc, blog-promotion, colding-links, personal-branding

Comments

  1. Katy says

    January 17, 2006 at 7:05 AM

    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.

    Reply
  2. ME Strauss says

    January 17, 2006 at 8:38 AM

    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

    Reply
  3. Cas says

    January 17, 2006 at 9:08 AM

    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

    Reply
  4. Katy says

    January 17, 2006 at 9:16 AM

    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.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recently Updated Posts

6 Keys to Managing Your Remote Workforce

9 Reasons To Use WordPress

Useful Marketing Tools That Wont Bust Your Budget

Do You Have What It Takes To Be A Successful Blogger?

Do You Have What It Takes To Be A Successful Blogger?

6 Tips for the Serial Side Hustler

How to Make Your Blog Popular



From Liz Strauss & GeniusShared Press

  • What IS an SOB?!
  • SOB A-Z Directory
  • Letting Liz Be

© 2023 ME Strauss & GeniusShared