How to use images in website and blogs

Decided to blog on importance of images after having very bad experience while browsing a website recently with blackberry and found few issues in usage of Alt Text and site was lacking usability.

Improves Usability with proper Alt Text for images

Images are indispensable in any site or blog. Images are used either with "actions" or for "Decorations". Its very important to provide proper alternative text for images, which is also called as "alttext". Alt is an attribute in HTML.

Improves accessibility

Screen readers (assistive software to read web pages for blinds) scans the page and read the alternative text provided by you. So you should be careful in providing the alternative text. Alt text should be logical. If an "home icon" is continued with text "home", alternative text for home should be avoided. Because Screen reader will read home twice and this will mis lead the users. Alternative text is part of WCAG priority I & Section 508.

Tools to check Alt text and Accessibility

• Valet Demonstrator (WebThing) - external link
• AccMonitor Online (HiSoftware) - external link
• Cynthia Says (HiSoftware) - external link
• TAW (Sidar in Spanish) - external link
• Torquemada (WebxTutti in English and Italian) - external link
• Wave 3.5 (WebAIM) - external link
• WebXact (Watchfire) - external link
  

Image & Accessibility Tool Bar

Web Accessibility Toolbar is provided by the Accessible Information Solutions (AIS) team of Vision Australia. Its one of the must have tool for all web developers and designers. Nielson Norman Group's LIFT is also a good tool but little expensive.

Also See:

• Mini FAQ about the alternative text of images
• Web Aim Techniques