Anyone who knows anything about web accessibility knows that images need an alternative, or ALT, text assigned to them. this is often because screen readers can’t understand images, but rather read aloud the choice text assigned to them. In Internet Explorer, we will see this ALT text, just by mousing over the image and searching at the yellow tooltip that appears. Other browsers (correctly) don’t do that. The HTML for inserting ALT text is:
But surely there can’t be a skill to writing ALT text for images? you only pop an outline in there and you’re good to travel, right? Well, kind of. Sure, it’s not rocket science, but there are a couple of guidelines you would like to follow…
Spacer images and missing ALT text
Spacer images should be assigned null ALT text or alt=””. this manner 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 aim of them is because the name suggests, to make space on the page. Sometimes it’s impossible to make the visual display you would like, so you'll stick a picture in (specifying its height and width), and voila, you've got the additional space you would like.
Not everyone uses this null ALT text for spacer images. Some websites stick in alt=” spacer image”. Imagine how annoying this will be for a screen reader user, especially once you have ten of them during a row. A screen reader would say, “Image, spacer image” ten times during a row (screen readers usually say the word, “Image”, before reading out its ALT text) – now that isn’t helpful!
Other web developers simply skip the ALT attribute for spacer images (and perhaps other images). during this case, most screen readers will read out the filename, which might be newsite/images/onepixelspacer.gif’. A screen reader would announce this image as “Image, new site slash images slash one-pixel spacer dot gif”. Imagine what this is able to sound like if there have been ten of those during a row!
Bullets and icons
Bullets and icons should be treated in much an equivalent way as spacer images, so should be assigned null alternative text or alt=””. believe an inventory of things with a flowery bullet proceeding each item. If the ALT text, Bullet’ is assigned to every image then, “Image, bullet” is going to be read aloud by screen readers before each list item, making it take that bit longer to figure through the list.
Icons, usually wont to complement links, should even be assigned alt=””. Many websites, which place the icon next to the link text, use the link text because of the ALT text of the icon. Screen readers would first announce this ALT text, 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 is able to remove them from the HTML document completely and thus remove the necessity for any ALT description.)
Decorative images
Decorative images too should be assigned null alternative text or alt=””. If a picture is pure visual percept 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 sound pollution.
Conversely, you'll argue that the pictures on your site create a brand identity and by hiding them from screen reader users you’re denying this group of users an equivalent experience. Accessibility experts tend to favor the previous argument, but there certainly may be a valid case for the latter too.
Navigation & text embedded within images
Navigation menus that need fancy text haven't any choice but to embed the text within a picture. during this situation, the ALT text shouldn’t be wont to expand on the image. Under no circumstances should the ALT text say, Read all about our fantastic services, designed to assist you in everything you do’. If the menu item says, Services’ then the ALT text should also say Services’. ALT text should describe the content of the image and will repeat the text word-for-word. If you would like to expand on the navigation, like during this example, you'll use the title attribute.
The same applies to the other text embedded within a picture. The ALT text should simply repeat, word-for-word, the text contained within that image.
(Unless the font getting used is particularly 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 name logo’, and others describe the function of the image (usually a link back to the homepage), Back to home’. Remember, ALT text should describe the content of the image therefore the first example, alt=” Company name”, is perhaps the simplest. If the brand may be a link back to the homepage then this will be effectively communicated through the title tag.
Conclusion
Writing effective ALT text isn’t too difficult. If it’s an ornamental 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 zip more.
Do even be sure also to stay ALT text as short and succinct as possible. taking note of an internet page with a screen reader takes tons longer than traditional methods, so don’t make the surfing experience painful for screen reader users with bloated and unnecessary ALT text.
0 Comments