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