Images

• Images CAN be decorative or informative depending on their purpose on the webpage.
• The images used on the websites CAN be defined using <img>, <svg>, <canvas> and so on elements.
• The alt attribute SHOULD be used to denote the purpose of the image defined using <img> element.
• The src attribute SHOULD be used to specify the source of the image if defined using <img> element.
• The role="img" SHOULD be specified along with descriptive aria-label to denote the purpose of the image defined using <svg> element.
  Note: Providing role on SVG images along with a descriptive aria-label attribute makes the image robust across different browser and assistive technology combinations.
• All informative images/icons SHOULD meet the color contrast ratio requirement of 3:1 with the background color in different states.
• The text that is displayed within an image SHOULD pass the minimum color contrast ratio requirement of 4.5:1 with the background color.

• Images which do not convey any additional meaning are called decorative images.
• If an image contains information which is already conveyed in the surrounding text, then that image CAN also be considered as decorative.
• Decorative images SHOULD be hidden for screen reader users by specifying empty alt attribute i.e., alt="" when image is defined using <img>
  element. For example,

  <img alt="" src="decorative.jpg" height="100" width="100">
  

• The decorative images defined using <svg> element SHOULD be hidden from assistive technologies using aria-hidden attribute. Additionally, provide focusable="false" to prevent them from receiving keyboard focus.
  For example,

  
  <svg aria-hidden="true" focusable="false" width="100" height="100">
      (...)
  </svg>
  

• Images which convey additional meaning are called informative images.
• A descriptive textual description for these images MUST be provided.
  • Use alt attribute if image is defined using <img> element
  • Use aria-label if image is defined using <svg> element.
• Words such as “image”, “icon”, “graphic” and so on SHOULD NOT be included within the textual description as the role “graphic” is already conveyed by screen reader.
  For example,

  <img src="/assets/images/pearson_logo_assessments.png" alt="Pearson Accessibility for Assessments"/>
  

• Complex images are those images that convey lots of information in a concise manner. For example — Graphs, diagrams, charts and so on.
• In case of complex images, providing brief textual description using alt attribute is not advisable as there is a limit of 150 characters.
• Textual description CAN be provided by any of the following approaches:
  • A detailed description CAN be given in the form of text before or after the image on the same page.
  • A link CAN be placed before or after the image which directs the user to a page containing a detailed description of the complex image.
  • Alternatively, a disclosure widget CAN be used to show/hide the detailed description of the complex image. For more information visit, Disclosure Image Description .

• Images that are used to initiate an action are called functional images.
• These CAN be links or buttons.
• A descriptive textual description for these images MUST be provided for functional images.
  • Use alt attribute if image is defined using <img> element
  • Use aria-label if image is defined using <svg> element.
• Functional images SHOULD be defined using native HTML elements such as <button>, <a>, <input> and so on.
  For example,

  
  <a href="https://www.linkedin.com/company/pearson">
      <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" role="img" aria-label="LinkedIn" focusable="false">
          ...
      </svg>
  </a>
  

• Text given within images are NOT readable by the screen reader. Hence, it is NOT advisable to use images of text.
• If an image of text has been used, the alt text SHOULD be equivalent to the text present in the image as well.
  Note: brand logos, decorative text and text that are part of an image such as graphs, diagrams and so on are exceptions.

• Text given within images is NOT readable by the screen reader. Hence, it is NOT advisable to use images of text.
• The alt text SHOULD be equivalent to the text present in the image as well within the 150-character limit.
• Images of text SHOULD be avoided except for logotypes images as they are exceptions.
• Images of text CAN get distorted and pixelated when resized. Hence, it is best to be avoided.

An image which is correctly defined programmatically benefits majorly the below users.

• People with visual disabilities
• People using speech input