Anyone who knows anything about web accessibility knows that images need alternative, or ALT, textual content assigned to them. The reason is , screen readers can’t appreciate images, but instead read out loud the alternative text assigned to them. Online Explorer we can see this ALT text, just by mousing above the image and searching at the green tooltip that appears. Other browsers (correctly) don’t try this. The HTML for placing ALT textual content is:

But certainly there can’t be a skill to writing ALT text intended for images? You just pop an outline in there and you’re ready to go, right? Very well, kind of. Sure, it’s certainly not rocket scientific discipline, but there are some guidelines you need to follow…

Spacer pictures and absent ALT textual content

Spacer images should be assigned null ALT text message, or alt=””. This way many screen readers will completely ignore the photograph and refuse to even mention its occurrence. Spacer pictures are hidden images that pretty many websites employ. The purpose of these people is, when the name suggests, to create space on the page. At times it’s not possible to create the visual display you need, to help you stick an image in (specifying its level and width) and voli’, you have the additional space you will need.

Certainly not everyone uses this null ALT textual content for spacer images. Some websites stick in alt=”spacer image”. Imagine how annoying this is certainly for a display reader customer, especially when you could have ten of those in a line. A screen reader would say, “Image, spacer image” ten intervals in a line (screen viewers usually the word, “Image”, before studying out its ALT text) – given that isn’t helpful!

Different web developers easily leave out the ALT option for spacer images (and perhaps different images). In this case, most screen readers is going to read out the filename, which could be ‘newsite/images/’. A display screen reader may announce this image when “Image, information site cut images reduce one question spacer appear in gif”. Think of what this may sound like whenever there were twenty of these in a row!

Bullets and icons

Bullets and icons should be treated in much the same way as spacer images, therefore should be given null solution text, or perhaps alt=””. Look at a list of products with a expensive bullet going forward each item. If ALT text, ‘Bullet’ is given to each image then, “Image, bullet” will be read aloud by screen readers ahead of each list item, so that it is take that bit much longer to work through record.

Symbols, usually accustomed to complement links, should also always be assigned alt=””. Many websites, which place the icon next towards the link text, use the website link text as the ALT text with the icon. Display readers would definitely first mention this ALT text, after which the link text message, so would definitely then say the link 2 times, which naturally isn’t necessary.

(Ideally, bullets and icons should be called up as background pictures through the CSS document – this would remove them from the CODE document completely and therefore take away the need for any ALT description. )

Decorative pictures

Attractive images too should be designated null option text, or perhaps alt=””. If an image is certainly pure eye candy, afterward there’s no need for a screen reader consumer to actually know it can there and being abreast of their presence simply adds to the noise pollution.

Alternatively, you could believe the images with your site create a brand identity and by hiding them coming from screen subscriber users that you simply denying this kind of group of users the same encounter. Accessibility experts tend to favor the former argument, but right now there certainly is known as a valid advantages of the latter also.

The navigation & text embedded within just images

Navigation selections that require extravagant text be forced to embed the text within an graphic. In this situation, the ALT text really should not used to increase on the picture. Under no circumstances if the ALT text say, ‘Read all about the fantastic services, designed to assist you in everything you do’. If the menu item says, ‘Services’ then ALT text message should also state ‘Services ALT text should describe this article of the impression and should replicate the text word-for-word. If you want to expand to the navigation, just like in this case in point, you can use the title attribute.

The same applies for virtually any other text message embedded during an image. The ALT text message should merely repeat, word-for-word, the text enclosed within that image.

(Unless the font getting used is especially different it’s often needless to introduce text within just images – advanced sat nav and background effects can now be achieved with CSS. )


Websites tend to range in how they apply ALT text to logos. Several say, Company name, others Company name logo, and also other describe the function of your image (usually a link returning to the homepage),? Back to home’. Remember, ALT text must always describe this great article of the picture so the initially example, alt=”Company name”, is probably the best. In case the logo is actually a link back towards the homepage, therefore this can be successfully communicated throughout the title tag.

Bottom line

Authoring effective ALT text merely too complicated. If it’s an enhancing image then null choice text, or perhaps alt=”” ought to usually be used – under no circumstances, ever leave out the ALT attribute. In case the image consists of text then your ALT text should just repeat this textual content, word-for-word. Keep in mind, ALT text should explain the content from the image certainly nothing more.

Do end up being sure also to keep ALT text when short and succinct as is feasible. Listening to a web page which has a screen reader takes a lot longer than traditional strategies, so may make the browsing experience painful for screen reader users with bloated and unnecessary ALT text. Click here for more: