Writing Effective Alt Text For Images

Writing Effective Alt Text For Images

Anyone who knows anything about web accessibility knows that images need alternative,​ or​ ALT,​ text assigned to​ them. This is​ because screen readers can't understand images,​ but rather read aloud the​ alternative text assigned to​ them. in​ Internet Explorer we​ can see this ALT text,​ simply by mousing over the​ image and looking at​ the​ yellow tooltip that appears. Other browsers (correctly) don't do this. the​ HTML for inserting ALT text is:

But surely there can't be a​ skill to​ writing ALT text for images? You just pop a​ description in​ there and you're good to​ go,​ right? Well,​ kind of. Sure,​ it's not rocket science,​ but there are a​ few guidelines you need to​ follow...

Spacer images and missing ALT text

Spacer images should always be assigned null ALT text,​ or​ alt="" . This way most screen readers will completely ignore the​ image and won't even announce its presence. Spacer images are invisible images that pretty most websites use. the​ purpose of​ them is,​ as​ the​ name suggests,​ to​ create space on​ the​ page. Sometimes it's not possible to​ create the​ visual display you need,​ so you can stick an​ image in​ (specifying its height and width) and volià,​ you have the​ extra space you need.

Not everyone uses this null ALT text for spacer images. Some websites stick in​ alt="spacer image". Imagine how annoying this can be for a​ screen reader user,​ especially when you have ten of​ them in​ a​ row. a​ screen reader would say,​ "Image,​ spacer image" ten times in​ a​ row (screen readers usually say the​ word,​ "Image",​ before reading out its ALT text) - now that isn't helpful!

Other web developers simply leave out the​ ALT attribute for spacer images (and perhaps other images). in​ this case,​ most screen readers will read out the​ filename,​ which could be ‘newsite/images/onepixelspacer.gif'. a​ screen reader would announce this image as​ "Image,​ newsite slash images slash one pixel spacer dot gif". Imagine what this would sound like if​ there were ten of​ these in​ a​ row!

Bullets and icons

Bullets and icons should be treated in​ much the​ same way as​ spacer images,​ so should be assigned null alternative text,​ or​ alt="". Think about a​ list of​ items with a​ fancy bullet proceeding each item. if​ the​ ALT text,​ ‘Bullet' is​ assigned to​ each image then,​ "Image,​ bullet" will be read aloud by screen readers before each list item,​ making it​ take that bit longer to​ work through the​ list.

Icons,​ usually used to​ complement links,​ should also be assigned alt="". Many websites,​ which place the​ icon next to​ the​ link text,​ use the​ link text as​ the​ ALT text of​ the​ icon. Screen readers would first announce this ALT text,​ and then the​ link text,​ so would then say the​ link twice,​ which obviously isn't necessary.

(Ideally,​ bullets and icons should be called up as​ background images through the​ CSS document - this would remove them from the​ HTML document completely and therefore remove the​ need for any ALT description.)

Decorative images

Decorative images too should be assigned null alternative text,​ or​ alt="". if​ an​ image is​ pure eye candy then there's no need for a​ screen reader user to​ even know it's there and being informed of​ its presence simply adds to​ the​ noise pollution.

Conversely,​ you could argue that the​ images on​ your site create a​ brand identity and by hiding them from screen reader users you're denying this group of​ users the​ same experience. Accessibility experts tend to​ favour the​ former argument,​ but there certainly is​ a​ valid case for the​ latter too.

Navigation & text embedded within images

Navigation menus that require fancy text have no choice but to​ embed the​ text within an​ image. in​ this situation,​ the​ ALT text shouldn't be used to​ expand on​ the​ image. Under no circumstances should the​ ALT text say,​ ‘Read all about our fantastic services,​ designed to​ help you in​ everything you do'. if​ the​ menu item says,​ ‘Services' then the​ ALT text should also say ‘Services'. ALT text should always describe the​ content of​ the​ image and should repeat the​ text word-for-word. if​ you want to​ expand on​ the​ navigation,​ such as​ in​ this example,​ you can use the​ title attribute.

The same applies for any other text embedded within an​ image. the​ ALT text should simply repeat,​ word-for-word,​ the​ text contained within that image.

(Unless the​ font being used is​ especially unique it's often unnecessary to​ embed text within images - advanced navigation and background effects can now be achieved with CSS.)

Company logo

Websites tend to​ vary in​ how they apply ALT text to​ logos. Some say,​ ‘Company name',​ others ‘Company name logo',​ and other describe the​ function of​ the​ image (usually a​ link back to​ the​ homepage),​ ‘Back to​ home'. Remember,​ ALT text should always describe the​ content of​ the​ image so the​ first example,​ alt="Company name",​ is​ probably the​ best. if​ the​ logo is​ a​ link back to​ the​ homepage then this can be effectively communicated through the​ title tag.


Writing effective ALT text isn't too difficult. if​ it's a​ decorative image then null alternative text,​ or​ alt="" should usually be used - never,​ ever omit the​ ALT attribute. if​ the​ image contains text then the​ ALT text should simply repeat this text,​ word-for-word. Remember,​ ALT text should describe the​ content of​ the​ image and nothing more.

Do also be sure also to​ keep ALT text as​ short and succinct as​ possible. Listening to​ a​ web page with a​ screen reader takes a​ lot longer than traditional methods,​ so don't make the​ surfing experience painful for screen reader users with bloated and unnecessary ALT text.

Writing Effective Alt Text For Images

Related Posts:

Powered by Blogger.