Receive My Best Weekly Health Tips, Recipes, and More!
Every week I send my subscribers a newsletter where I share one tried and tested Health Tip that you can use immediately to improve your health. Click "Subscribe!" to Join Now!

Writing Successful Alt Text message For Pictures

Anyone who is aware of anything about web accessibility sees that images require alternative, or ALT, text message assigned to them. Due to the fact screen readers can’t appreciate images, but rather read aloud the alternative text assigned to them. In Internet Explorer we can see this ALT text, simply by mousing within the image and searching at the yellowish tooltip that appears. Other browsers (correctly) don’t do that. The HTML CODE for entering ALT text is:

But absolutely there cannot be a skill to writing ALT text designed for images? You only pop an outline in there and you’re all set, right? Very well, kind of. Sure, it’s not rocket scientific discipline, but there are some guidelines it is advisable to follow…

Spacer images and absent ALT text message

Spacer images should always be assigned null ALT text message, or alt=””. This way the majority of screen viewers will entirely ignore the impression and will not even mention its existence. Spacer pictures are undetectable images that pretty most websites make use of. The purpose of these people is, mainly because the term suggests, to create space within the page. At times it’s impossible to create the visual display 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 message for spacer images. A few websites stick in alt=”spacer image”. Imagine how annoying this is often for a screen reader user, especially when you could have ten of these in a row. A screen reader would say, “Image, spacer image” ten conditions in a line (screen viewers usually the word, “Image”, before browsing out the ALT text) – given that isn’t useful!

Various other web developers easily leave out the ALT characteristic for spacer images (and perhaps various other images). In this instance, most screen readers will certainly read your filename, which could be ‘newsite/images/’. A display reader might announce this kind of image as “Image, media site reduce images reduce one pixel spacer us dot gif”. Just imagine what this will sound like in the event that there were fifteen of these in a row!

Bullets and icons

Bullets and icons needs to be treated in much the same method as spacer images, hence should be given null choice text, or alt=””. Think about a list of items with a fancy bullet going forward each item. If ALT text, ‘Bullet’ is designated to each impression then, “Image, bullet” will be read out loud by display screen readers before each list item, which makes it take that bit longer to work through record.

Symbols, usually utilized to complement backlinks, should also always be assigned alt=””. Many websites, which place the icon next to the link text, use the website link text since the ALT text with the icon. Display readers will first publicize this ALT text, and next the link textual content, so would definitely then say the link two times, which clearly isn’t important.

(Ideally, bullets and icons ought to be called up as background images through the CSS document — this would remove them from the HTML CODE document entirely and therefore remove the need for virtually any ALT description. )

Decorative images

Attractive images too should be assigned null different text, or alt=””. If an image is usually pure eyes candy, therefore there’s no desire for a screen reader user to even know they have there and being smart of it is presence basically adds to the noise pollution.

More over, you could argue that the images with your site generate a brand info and by concealing them by screen reader users occur to be denying this kind of group of users the same knowledge. Accessibility experts tend to favor the former controversy, but at this time there certainly is a valid case for the latter also.

Navigation & text embedded within images

Navigation selections that require expensive text be forced to embed the text within an impression. In this circumstance, the ALT text shouldn’t be used to widen on the image. Under no circumstances if the ALT textual content say, ‘Read all about the fantastic providers, designed to help you in everything you do’. If the menu item says, ‘Services’ then a ALT textual content should also declare ‘Services ALT text should always describe this content of the photograph and should reiterate the text word-for-word. If you want to expand around the navigation, including in this case in point, you can use the title attribute.

The same applies for every other text embedded during an image. The ALT textual content should easily repeat, word-for-word, the text comprised within that image.

(Unless the font being utilized is especially exclusive it’s often unneeded to add text within just images – advanced navigation and track record effects can be achieved with CSS. )

Company logo

Websites tend to fluctuate in how they apply ALT text to logos. Some say, Company name, others Company name logo, and other describe the function with the image (usually a link back in the homepage),? Back to home’. Remember, ALT text should describe this great article of the picture so the initially example, alt=”Company name”, is probably the best. If the logo is a link back to the homepage, then simply this can be properly communicated throughout the title label.


Producing effective ALT text merely too troublesome. If it’s an enhancing image therefore null solution text, or perhaps alt=”” should certainly usually be taken – by no means, ever omit the ALT attribute. In the event the image is made up of text then a ALT textual content should merely repeat this textual content, word-for-word. Bear in mind, ALT text should summarize the content in the image certainly nothing more.

Do also be sure also to keep ALT text as short and succinct as is possible. Listening to an online page using a screen target audience takes a whole lot longer than traditional methods, so typically make the browsing experience painful for screen reader users with bloated and unnecessary ALT text. Click here for more:

Receive My Best Weekly Health Tips, Recipes, and More!
Every week I send my subscribers a newsletter where I share one tried and tested Health Tip that you can use immediately to improve your health. Click "Subscribe!" to Join Now!

Leave a Comment