Uninformative verses Informative Alt Tags 

For all images, specify alternative text to convey equivalent information.

When images are unavailable (e.g. Turned off or because the user may have a visual impairment) equivalent information must be supplied. Many users turn off automatic image loading for better performance. Others have computer systems that support only text-based browsers. Therefore, you should provide text alternatives for all graphic images used in your site.

Use the ALT tag to include information about what shows up when a graphic image does not appear. Give a description of the image as its file title so it can be understood within the context of the page. Example would be “teacher-standing-at-top-of-classroom-with-pupils.jpg” rather than “teaching.jpg” or "photo_14.jpeg". 

Examples of both uninformative and informative alt text examples showing more description and context gives more help to users with screen readers.

Adding Alternative Text (Alt tag) 

It is your responsibility as a content provider to specify what the alternative text should be. This may be by entering this information into your content management system, creating accessible file titles, or by passing the information over to the person who publishes the content to the web. 

In the pTools CMS each image file title acts as the Alt Text if none has been provided manually, e.g. ‘Construction Safety Innovation Award 2014.jpg’ as the file name will upload by default as the same. The good news is that as long as you title your image file correctly before they are uploaded into the CMS then you wont have to edit the Alt Tag manually in the CMS later. 

• Alt text should serve the same purpose and convey the same meaning as the image:
  • Tip: Pretend to read the page out over the phone. What does each image have to say to give the same meaning? Use that as the alt text.
  • If your image is a link, use the destination or function;  

• Image of a symbol with alt text 'email us' not a description of the symbol. Image of a house with correct alt text Home page NOT picture of house
• If the image contains words, make sure the full message of the words is in the alt text (although avoid using images of words - use real text instead)  

• Important paragraph of text with alt text just = important notice. It should have the full text
• Avoid adding extra meaningless alt text:
  • "image of...", "this is an image of...";
  • "link to...", "this is a link to...". 

Image formats and descriptions 

JPEG, PNG, or SVG? Know the Difference Between PNG, SVG and JPEG and use the correct image format for the job. Different formats are suited to different types of image - the type you use affects the image quality and file size. 

• Choose the correct format for the job:
  • Use JPEGs for photographs; they typically compress better, are smaller, and load faster.
  • Use PNGs for displaying line drawings, logos, graphs, solid coloured graphics, cartoons, etc;
  • Use SVGs for vector graphics such as icons or vector shapes;
  • NB: the vast majority of image processing/design software packages will produce these examples (as well as a host of others).

Image Optimisation (File Compression) 

Ideally you should “web optimise” imagery before it is uploaded into your website by ensuring the dimensions have been reduced/cropped where appropriate depending on where on the site the image is used on screen and also by compressing (reducing the file size) the image. 

• Balance file size and quality using image processing / design software;
• Scale to the exact or nearest dimensions that you want to use on the page.
• Compress (reduce) the image file size before you upload and use in the CMS.

Specify full descriptions for informational images 

Complex images such as inforgraphics, charts, diagrams and graphs need more description than simple alternative text alone can reasonably display. 

• Add a longer description:
  • On the same page, near the image (recommended);
• On a separate page, linked using:
  • A normal text link to the description (recommended),
  • A link placed after the image to point to the URL.
• If providing a description on a separate page, the resulting linked page should contain all of the following:
  • A clear title;
  • An appropriate description of the complex image;
  • A link back to the original page.
  • The description itself should convey the essential information that you are trying to provide by including the image - don't overdo it if unnecessary.

Avoid using images to display text 

Text within images can be difficult to read especially for some people because: 

• Images don't scale when text size is increased by the user; and
• Magnified images can appear highly pixilated (or fuzzy).

Using text properly reduces file size, permits scaling and easy updates, and reduces potential for accessibility errors (such as missed alt text). 

• If possible always use text rather than images of text.
  
  • Avoid putting essential text within an image.
  • Avoid putting large paragraphs of text within an image.
  • Avoid using images of text for important navigation (menus, etc.).
  • Do not use ascii art.
• Exceptions:
  • logos;
  • Important special text effects;
  • Important brand communications;
  • Illustrations.