Everyone who knows anything about web accessibility knows that pictures want substitute, or ALT, text assigned to them. This is due to the fact screen readers can’t understand pictures, but rather read aloud the option text assigned to them. In Net Explorer we can see this ALT text, simply by mousing over the image and seeking at the yellow tooltip that seems. Other browsers (properly) don’t do this. The HTML for inserting ALT text is:
But certainly there can’t be a skill to writing ALT text for images? You just pop a description in there and you’re great to go, appropriate? Properly, kind of. Sure, it’s not rocket science, but there are a few guidelines you will need to follow…
Spacer images and missing ALT text
Spacer pictures ought to often 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 pictures are invisible pictures that fairly most web sites use. The objective of them is, as the name suggests, to produce space on the page. At times it’s not doable to generate the visual display you want, so you can stick an image in (specifying its height and width) and volià, you have the extra space you require.
Not every person uses this null ALT text for spacer pictures. Some websites stick in alt=”spacer image”. Imagine how annoying this can be for a screen reader user, specially when you have ten of them in a row. A screen reader would say, “Image, spacer image” ten instances in a row (screen readers normally say the word, “Image”, before reading out its ALT text) – now that isn’t beneficial!
Other internet developers merely leave out the ALT attribute for spacer pictures (and maybe other pictures). 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 1 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 ought to be treated in significantly the same way as spacer images, so must be assigned null choice text, or alt=”". Feel about a checklist of objects with a fancy bullet proceeding each item. If the ALT text, ‘Bullet’ is assigned to every single image then, “Image, bullet” will be read aloud by screen readers before every checklist item, creating it take that bit longer to work via the checklist.
Icons, usually utilized to complement hyperlinks, ought to also be assigned alt=”". A lot of internet sites, which place the icon next to the link text, use the link text as the ALT text of the icon. Screen readers would 1st announce this ALT text, and then the link text, so would then say the link twice, which clearly isn’t required.
(Ideally, bullets and icons must be referred to as up as background pictures by way of the CSS document – this would remove them from the HTML document fully and therefore get rid of the need for any ALT description.)
Decorative pictures
Decorative images too should be assigned null option text, or alt=”". If an image is pure eye candy then there’s no want for a screen reader user to even know it is there and becoming informed of its presence simply adds to the noise pollution.
Conversely, you could argue that the images on your website create a brand identity and by hiding them from screen reader users you’re denying this group of users the same knowledge. Accessibility specialists have a tendency to favour the former argument, but there certainly is a valid situation for the latter too.
Navigation & text embedded inside pictures
Navigation menus that need fancy text have no choice but to embed the text within an image. In this scenario, the ALT text shouldn’t be employed to expand on the image. Under no circumstances should the ALT text say, ‘Read all about our amazing solutions, developed to aid you in everything you do’. If the menu item says, ‘Services’ then the ALT text need to also say ‘Services’. ALT text need to always describe the content of the image and need to 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 very same applies for any other text embedded within an image. The ALT text need to merely repeat, word-for-word, the text contained inside that image.
(Unless the font being used is especially unique it’s often unnecessary to embed text inside pictures – advanced navigation and background effects can now be accomplished with CSS.)
Organization logo
Websites have a tendency to vary in how they apply ALT text to logos. Some say, ‘Company name’, other people ‘Company name logo’, and other describe the function of the image (typically a link back to the homepage), ‘Back to home’. Bear in mind, ALT text need to constantly describe the content of the image so the 1st example, alt=”Organization name”, is almost certainly the very best. If the logo is a link back to the homepage then this can be effectively communicated through the title tag.
Conclusion
Writing effective ALT text isn’t too hard. If it is a decorative image then null choice text, or alt=”" must usually be used – in no way, ever omit the ALT attribute. If the image consists of text then the ALT text should basically repeat this text, word-for-word. Remember, ALT text should describe the content material of the image and absolutely nothing more.
Do also be certain also to keep ALT text as brief and succinct as possible. Listening to a web page with a screen reader takes a lot longer than classic strategies, so don’t make the surfing experience painful for screen reader users with bloated and unnecessary ALT text.
Related posts: