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 Effective Alt Text For Photos

Anyone who appreciates anything about web accessibility knows that images need alternative, or ALT, textual content assigned to them. It is because screen readers can’t understand images, but rather read out loud the alternative text message assigned to them. Online Explorer you observe this ALT text, by just mousing within the image and looking at the yellow tooltip that appears. Other browsers (correctly) don’t make this happen. The HTML for applying ALT text message is:

But surely there can not be a skill to writing ALT text just for images? You merely pop some in there and you’re good to go, right? Very well, kind of. Sure, it’s not really rocket scientific disciplines, but there are a few guidelines it is advisable to follow…

Spacer photos and lacking ALT text message

Spacer images should be assigned null ALT text message, or alt=””. This way the majority of screen viewers will completely ignore the photo and refuse to even mention its presence. Spacer pictures are invisible images that pretty many websites make use of. The purpose of all of them is, mainly because the name suggests, to create space over the page. Occasionally it’s not possible to create the visual display you need, so you can stick a picture in (specifying its height and width) and voli’, you have the additional space you may need.

Not everyone uses this null ALT textual content for spacer images. Some websites stick in alt=”spacer image”. Imagine how annoying this is for a display reader end user, especially when you may have ten of these in a row. A display reader would say, “Image, spacer image” ten instances in a row (screen readers usually the word, “Image”, before reading out the ALT text) – now that isn’t beneficial!

Various other web developers easily leave out the ALT capability for spacer images (and perhaps other images). In cases like this, most display screen readers will read your filename, that could be ‘newsite/images/’. A screen reader will announce this kind of image for the reason that “Image, reports site cut images cut one position spacer dot gif”. Consider what this can sound like any time there were 12 of these in a row!

Bullets and icons

Bullets and icons must be treated in much the same approach as spacer images, so should be assigned null substitute text, or alt=””. Think about a list of things with a the latest bullet beginning each item. If ALT text, ‘Bullet’ is designated to each image then, “Image, bullet” will probably be read out loud by display screen readers just before each list item, so that it is take that bit for a longer time to work through record.

Icons, usually accustomed to complement links, should also be assigned alt=””. Many websites, which will place the icon next towards the link text message, use the hyperlink text while the ALT text with the icon. Display readers would first publicize this ALT text, and then the link text message, so will then the link 2 times, which certainly isn’t necessary.

(Ideally, bullets and icons ought to be called up as background photos through the CSS document — this would take them off from the HTML document entirely and therefore take away the need for any kind of ALT explanation. )

Decorative pictures

Decorative images as well should be designated null option text, or alt=””. In the event that an image is pure observation candy, in that case there’s no requirement of a screen reader user to even know it’s there and being informed of its presence simply adds to the noise pollution.

Alternatively, you could believe the images with your site produce a brand individuality and by hiding them coming from screen subscriber users to get denying this group of users the same knowledge. Accessibility analysts tend to prefer the former discussion, but presently there certainly is known as a valid case for the latter also.

Course-plotting & text embedded within just images

Navigation choices that require fancy text have no choice but to embed the written text within an image. In this condition, the ALT text shouldn’t be used to extend on the image. Under no circumstances should the ALT textual content say, ‘Read all about each of our fantastic products, designed to assist you in everything you do’. If the menu item says, ‘Services’ then a ALT text should also claim ‘Services ALT text should always describe the information of the impression and should recurring the text word-for-word. If you want to expand within the navigation, including in this model, you can use it attribute.

The same applies for any other textual content embedded during an image. The ALT text should basically repeat, word-for-word, the text secured within that image.

(Unless the font getting used is especially exclusive it’s often needless to embed text inside images – advanced course-plotting and history effects can be achieved with CSS. )

Custom logo

Websites tend to vary in the way they apply ALT text to logos. A lot of say, Company name, others Business name logo, and also other describe the function for the image (usually a link to the homepage),? Back to home’. Remember, ALT text must always describe this of the image so the earliest example, alt=”Company name”, has become the best. In the event the logo can be described as link back towards the homepage, therefore this can be efficiently communicated throughout the title tag.


Composing effective ALT text merely too troublesome. If it’s an attractive image in that case null substitute text, or perhaps alt=”” should usually provide – by no means, ever omit the ALT attribute. In the event the image has text the ALT text should basically repeat this textual content, word-for-word. Bear in mind, ALT text message should describe the content from the image and nothing more.

Do end up being sure likewise to keep ALT text as short and succinct as it can be. Listening to an online page with a screen audience takes a whole lot longer than traditional methods, so is not going to make the searching experience painful for screen target audience 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

About Dr. Wholesome

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.