| Anyone who knows anything about web accessibility | | | | ALT description.)Decorative imagesDecorative images |
| knows that images need alternative, or ALT, text | | | | too should be assigned null alternative text, or alt="". |
| assigned to them. This is because screen readers | | | | If an image is pure eye candy then there's no need |
| can't understand images, but rather read aloud the | | | | for a screen reader user to even know it's there and |
| alternative text assigned to them. In Internet | | | | being informed of its presence simply adds to the |
| Explorer we can see this ALT text, simply by | | | | noise pollution.Conversely, you could argue that the |
| mousing over the image and looking at the yellow | | | | images on your site create a brand identity and by |
| tooltip that appears. Other browsers (correctly) don't | | | | hiding them from screen reader users you're denying |
| do this. The HTML for inserting ALT text is:img | | | | this group of users the same experience. Accessibility |
| src="filename.gif" alt="Alternative description goes | | | | experts tend to favour the former argument, but |
| here"But surely there can't be a skill to writing ALT | | | | there certainly is a valid case for the latter |
| text for images? You just pop a description in there | | | | too.Navigation & text embedded within |
| and you're good to go, right? Well, kind of. Sure, it's | | | | imagesNavigation menus that require fancy text have |
| not rocket science, but there are a few guidelines | | | | no choice but to embed the text within an image. In |
| you need to follow...Spacer images and missing ALT | | | | this situation, the ALT text shouldn't be used to |
| textSpacer images should always be assigned null | | | | expand on the image. Under no circumstances should |
| ALT text, or alt="" . This way most screen readers | | | | the ALT text say, 'Read all about our fantastic |
| will completely ignore the image and won't even | | | | services, designed to help you in everything you do'. |
| announce its presence. Spacer images are invisible | | | | If the menu item says, 'Services' then the ALT text |
| images that pretty most websites use. The purpose | | | | should also say 'Services'. ALT text should always |
| of them is, as the name suggests, to create space | | | | describe the content of the image and should repeat |
| on the page. Sometimes it's not possible to create | | | | the text word-for-word. If you want to expand on |
| the visual display you need, so you can stick an | | | | the navigation, such as in this example, you can use |
| image in (specifying its height and width) and | | | | the title attribute.The same applies for any other |
| volià , you have the extra space you need.Not | | | | text embedded within an image. The ALT text |
| everyone uses this null ALT text for spacer images. | | | | should simply repeat, word-for-word, the text |
| Some websites stick in alt="spacer image". Imagine | | | | contained within that image.(Unless the font being |
| how annoying this can be for a screen reader user, | | | | used is especially unique it's often unnecessary to |
| especially when you have ten of them in a row. A | | | | embed text within images - advanced navigation and |
| screen reader would say, "Image, spacer image" ten | | | | background effects can now be achieved with |
| times in a row (screen readers usually say the word, | | | | CSS.)Company logoWebsites tend to vary in how |
| "Image", before reading out its ALT text) - now that | | | | they apply ALT text to logos. Some say, 'Company |
| isn't helpful!Other web developers simply leave out | | | | name', others 'Company name logo', and other |
| the ALT attribute for spacer images (and perhaps | | | | describe the function of the image (usually a link back |
| other images). In this case, most screen readers will | | | | to the homepage), 'Back to home'. Remember, ALT |
| read out the filename, which could be 'newsite | | | | text should always describe the content of the |
| images/onepixelspacer.gif'. A screen reader would | | | | image so the first example, alt="Company name", is |
| announce this image as "Image, newsite slash images | | | | probably the best. If the logo is a link back to the |
| slash one pixel spacer dot gif". Imagine what this | | | | homepage then this can be effectively communicated |
| would sound like if there were ten of these in a | | | | through the title tag.ConclusionWriting effective ALT |
| row!Bullets and iconsBullets and icons should be | | | | text isn't too difficult. If it's a decorative image then |
| treated in much the same way as spacer images, so | | | | null alternative text, or alt="" should usually be used - |
| should be assigned null alternative text, or alt="". | | | | never, ever omit the ALT attribute. If the image |
| Think about a list of items with a fancy bullet | | | | contains text then the ALT text should simply repeat |
| proceeding each item. If the ALT text, 'Bullet' is | | | | this text, word-for-word. Remember, ALT text |
| assigned to each image then, "Image, bullet" will be | | | | should describe the content of the image and nothing |
| read aloud by screen readers before each list item, | | | | more.Do also be sure also to keep ALT text as short |
| making it take that bit longer to work through the | | | | and succinct as possible. Listening to a web page with |
| list.Icons, usually used to complement links, should also | | | | a screen reader takes a lot longer than traditional |
| be assigned alt="". Many websites, which place the | | | | methods, so don't make the surfing experience |
| icon next to the link text, use the link text as the | | | | painful for screen reader users with bloated and |
| ALT text of the icon. Screen readers would first | | | | unnecessary ALT text.This article was written by |
| announce this ALT text, and then the link text, so | | | | Trenton Moss. He's crazy about web usability and |
| would then say the link twice, which obviously isn't | | | | accessibility - so crazy that he went and started his |
| necessary.(Ideally, bullets and icons should be called | | | | own web usability and accessibility consultancy ( |
| up as background images through the CSS document | | | | Webcredible - ) to help make the Internet a better |
| - this would remove them from the HTML document | | | | place for everyone. |
| completely and therefore remove the need for any | | | | |