Every image in your site should have an ALT attribute that explains what the image is for. This is essential for screen readers for the vision-impaired as well as for those that have turned off graphics or working in poor wireless conditions.
Alt tags in WordPress
In WordPress you add Alt tags when you add media or when you edit media. See the Attachment Details area at the right of your screen when you add or edit media.
Alt tags in HTML and Dreamweaver Sites
This is the ALT attribute for the IMG tag in HTML, but you can also put these in using your WYSIWYG editor like Dreamweaver.
<img src="dept_logo.gif" alt="Philosophy Department Logo">
If the picture is merely fluff you can choose to use a null alt attribute (nothing between the quote marks) so that the screen reader ignores it:
<img src="pretty_picture.gif" alt=""> <img src="spacer.gif" alt="">
For alt attributes and captions provide as complete a summary as possible. For example, if it’s a picture showing population growth, don’t just say “Population Growth”, sum up the meaning of the graphic as in “Whatcom County Population Growth of 50% expected by year 2020”.
If you need a longer description, use the
longdesc attribute (based on the
longdesc attribute of HTML 4) to link descriptions to images in HTML5 content. This extension changes the definition of a hyperlink in HTML, by allowing a
longdesc attribute to occur inside a hyperlink. Here is a link for a more detailed description of how to use the longdesc attribute with HTML5.
<!-- Image with description that is only part of target document --> <img src="picture.png" alt="Example image" longdesc="exampleDescription.html#desc2"> <!-- Target document --> <section id="desc2"> <h2>Image picture.png</h2> <p>Description of the image...</p> </section>