Writing Effective Alt Textual content For Images

June 9, 2018

Anyone who is familiar with anything about net accessibility knows that images want alternative, or ALT, text assigned to them. The reason is screen readers can’t figure out images, but rather read out loud the alternative textual content assigned to them. In Internet Explorer we can see this ALT text, merely by mousing in the image and searching at the green tooltip that appears. Additional browsers (correctly) don’t make this happen. The CODE for placing ALT textual content is:

But definitely there can’t be a skill to writing ALT text with respect to images? You just pop some in there and you’re all set, right? Very well, kind of. Sure, it’s certainly not rocket scientific research, but there are a few guidelines you should follow…

Spacer pictures and missing ALT text

Spacer images should be assigned null ALT text, or alt=””. This way the majority of screen visitors will totally ignore the graphic and will not likely even declare its existence. Spacer images are hidden images that pretty many websites apply. The purpose of these people is, mainly because the term suggests, to create space on the page. Occasionally it’s difficult to create the visual screen you need, so you can stick a picture in (specifying its level and width) and voli’, you have the additional space you will need.

Not really everyone uses this null ALT text for spacer images. Several websites attach alt=”spacer image”. Imagine how annoying this really is for a display reader user, especially when you have ten of these in a row. A display screen reader will say, “Image, spacer image” ten instances in a line (screen readers usually the word, “Image”, before reading out their ALT text) – given that isn’t beneficial!

Other web developers just leave out the ALT feature for spacer images (and perhaps different images). In this case, most display readers is going to read your filename, that could be ‘newsite/images/’. A display screen reader may announce this kind of image while “Image, information site cut images slash one -pixel spacer dot gif”. Think what this would sound like in cases where there were 12 of these within a row!

Bullets and icons

Bullets and icons need to be treated in much the same method as spacer images, consequently should be assigned null option text, or perhaps alt=””. Think about a list of things with a expensive bullet continuing each item. If ALT text, ‘Bullet’ is designated to each photograph then, “Image, bullet” will be read aloud by display screen readers just before each list item, which makes it take that bit much longer to work through record.

Icons, usually used to complement backlinks, should also become assigned alt=””. Many websites, which will place the icon next towards the link text, use the website link text since the ALT text with the icon. Display readers would definitely first announce this ALT text, and after that the link textual content, so would probably then say the link two times, which obviously isn’t necessary.

(Ideally, bullets and icons should be called as background photos through the CSS document — this would take them off from the HTML CODE document totally and therefore take away the need for any kind of ALT information. )

Decorative photos

Attractive images also should be given null choice text, or perhaps alt=””. If an image is normally pure eye candy, consequently there’s no dependence on a display reader end user to actually know is actually there and being knowledgeable of its presence merely adds to the environmental noise.

However, you could argue that the images with your site make a brand identity and by covering them out of screen target audience users it’s denying this group of users the same knowledge. Accessibility analysts tend to prefer the former case, but now there certainly can be described as valid case for the latter too.

The navigation & text message embedded within images

Navigation possibilities that require highly skilled text have no choice but to embed the text within an graphic. In this circumstance, the ALT text really should not used to widen on the graphic. Under no circumstances should the ALT textual content say, ‘Read all about each of our fantastic services, designed to help you in everything you do’. If the menu item says, ‘Services’ then the ALT textual content should also say ‘Services ALT text must always describe this content of the photo and should do it again the text word-for-word. If you want to expand over the navigation, just like in this example, you can use it attribute.

The same applies for just about any other text embedded during an image. The ALT text should merely repeat, word-for-word, the text comprised within that image.

(Unless the font being utilized is especially completely unique it’s often pointless to embed text within images – advanced sat nav and record effects can now be achieved with CSS. )

Company logo

Websites tend to fluctuate in the way they apply ALT text to logos. Some say, Company name, others Business name logo, and other describe the function within the image (usually a link back to the homepage),? Back to home’. Remember, ALT text should always describe this of the image so the earliest example, alt=”Company name”, is just about the best. In the event the logo can be described as link back for the homepage, afterward this can be properly communicated throughout the title point.


Producing effective ALT text merely too complicated. If it’s an attractive image consequently null option text, or alt=”” should usually be taken – by no means, ever omit the ALT attribute. In case the image consists of text the ALT textual content should merely repeat this textual content, word-for-word. Remember, ALT textual content should express the content of your image and nothing more.

Do end up being sure also to keep ALT text because short and succinct as is feasible. Listening to an online page having a screen gmsgeridonusum.com reader takes a lot longer than traditional methods, so no longer make the searching experience irritating to screen subscriber users with bloated and unnecessary ALT text. Click here for more:

Contact Us: info@somakat.com • 801-358-1959