Working with images in Drupal

In the University of Ottawa's Drupal platform, there are three main ways in which images can be added to your site:

  1. Adding images directly to the text editor (WYSIWYG).
  2. Adding images using the Primary Image button.
  3. Uploading images and other files directly to the Files library.

Basic web accessibility for images

When adding images to your site, you must ensure that the images are accessible to users with all different types of disabilities. For example, some users may have may have trouble with colours and contrasts, so adding colored text within an image can become an obstacle. Other users may be using assistive technologies, so it is fundamental that you provide an alternative text and that this text is relevant.

General accessibility guidelines to follow

  • Image content
    • There should never be any text within images. This is a very poor Web practice.
  • Alternative text (ALT text)
    • All images require an alt tag.
      • Simple informative images: If the image conveys information that helps understand the message, you must provide alternative text that conveys that information.
      • Decorative images: Due to current limitations, you must provide an alternative text even if the image is decorative. However, in the future, if the image is purely decorative and does not provide any additional content, the alternative text area will have to be left empty.
      • Complex images: For complex images (such as a graphic, a table, a pie chart, a diagram, etc.), you must provide alternative text that best summarizes the content. If the details of the complex image are important or relevant, provide a long description that links to a page containing all the fine details of the image.
    • Do not use such phrases as “Image of…”, “Icon of…”, “Photo of...” or “Graphic of…” to describe the image.
  • Long description
    • The long description attribute must contain a URL towards a page that contains the full description, as well as the title of that URL. It must not contain the long description text itself.
  • Title text
    • Avoid adding any information in the “Title” text field of an image, as this text is not read by most screen readers.

To learn more on accessibility:

» Submit feedback
    Topics: 
  • Support
    Types: 
  • User Guide
Back to top