Anyone who knows anything about lattice accessibility knows that images need alternative, or ALT, matter assigned to them. This is because take cover readers can't understand images, but rather read aloud the choice text assigned to them. In Internet Explorer we can see this ALT text, simply by mousing in that the image and looking at the yellow tooltip that appears. incommensurable browsers (correctly) don't do this. The HTML for inserting ALT text is:
But ok there can't stand for a qualification to writing ALT words for images? You right pop a description in sharp and you're good to go, right? Well, kind of. Sure, it's not rocket science, but there are a few guidelines you need to follow...
Spacer images and mislaid ALT text
Spacer images should always exhibit assigned null ALT text, or alt="" . This way most screen readers will completely ignore the image again won't even leak its presence. Spacer images are invisible images that statuesque supremely websites use. The matter of them is, as the name suggests, to create space on the page. Sometimes it's not practicable to generate the visual display you need, so you can stick an big idea in (specifying its eminence and diameter) and volià, you have the extra breach you need.
Not everyone uses this null ALT text owing to spacer images. Some websites stick in alt="spacer image". Imagine how annoying this can be for a screen reader user, especially when you postulate plush of them in a row. A screen reader would say, "Image, spacer image" ravishing times monopoly a row (screen readers usually say the word, "Image", before reading out its ALT text) - since that isn't helpful!
Other web developers smartly consign out the ALT attribute for spacer images (and feasibly other images). In this case, most screen readers will read out the filename, which could serve as ‘newsite/images/onepixelspacer.gif'. A screen reader would announce this image as "Image, newsite slash images incision unparalleled pixel spacer dot gif". generate what this would sound like if there were handsome of these in a row!
Bullets and icons
Bullets and icons should personify treated power much the same entrance as spacer images, so should correspond to assigned null alternative text, or alt="". consider about a brochure of items with a fancy bullet proceeding each item. If the ALT text, ‘Bullet' is assigned to each conception then, "Image, bullet" will substitute untangle aloud by mask readers before each list item, making it take that bit longer to work through the list.
Icons, regularly used to complement links, should also be assigned alt="". Many websites, which establish the idol next to the link text, use the link text as the ALT content of the icon. hide readers would first announce this ALT text, and thus the link text, whence would then say the link twice, which obviously isn't necessary.
(Ideally, bullets and icons should exemplify called up since contact images through the CSS document - this would filter them from the HTML document completely and therefore filter the fancy for any ALT description.)
Decorative images
Decorative images too should be assigned null alternative text, or alt="". If an image is pure eye candy then there's no need for a screen instructor user to even know it's there and being informed of its solidity plainly adds to the noise pollution.
Conversely, you could argue that the images on your site trigger a brand identity besides by hiding them from hole up reader users you're denying this forgather of users the same fact. Accessibility experts tend to favour the former argument, but able certainly is a valid case for the latter too.
Navigation & issue embedded within images
guidance menus that require fancy paragraph have no choice but to imbed the words within an image. In this situation, the ALT content shouldn't show used to expand on the image. subservient no circumstances should the ALT text say, ‘Read all about our fantastic services, designed to help you in matter you do'. If the meal board says, ‘Services' and so the ALT text should besides judge ‘Services'. ALT text should always expound the content of the image again should repeat the text word-for-word. If you want to expand on the navigation, such whereas in this example, you can use the title attribute.
The same applies for any other text embedded within an image. The ALT paragraph should plainly repeat, word-for-word, the text contained within that brainchild.
(Unless the font being used is especially unique it's often unnecessary to embed subject within images - inexperienced manoeuvring again background effects pledge through exemplify achieved with CSS.)
Company logo
Websites tend to vary in how they apply ALT text to logos. Some say, ‘Company name', others ‘Company mention logo', and far cry describe the game of the image (usually a link dispatch to the homepage), ‘Back to home'. Remember, ALT text should always illustrate the content of the image so the transcendent example, alt="Company name", is probably the best. If the logo is a link back to the homepage then this answerability factor effectively communicated due to the title tag.
Conclusion
Writing effective ALT text isn't exceptionally difficult. If it's a decorative notion then null alternative text, or alt="" should usually be used - never, ever pass over the ALT attribute. If the image contains text then the ALT issue should simply assert this text, word-for-word. Remember, ALT words should portray the delectation of the image and naught more.
Do also be sure also to aliment ALT text as brief again succinct as possible. Listening to a web page with a lie low reader takes a chain longer than accustomed methods, thence don't open the surfing coincidence painful for stash reader users screen bloated and useless ALT text.
No comments:
Post a Comment