Outline of Image Alt Text Decision Making Flowchart

Top of flowchart begins with the question: "Is the image clickable?"

1. If ‘Yes” then it is a functional image.
   1. Button image. Alt text should describe the action being performed, e.g., Search or Submit.
      • <input type="image" src="search-icon.svg" alt="Search" />
   2. Link image. Alt text should match the title of the destination page.
      • <a href="https://www.unimelb.edu.au">
<img src="logo.svg" alt="The University of Melbourne homepage">
</a>
2. If “No” to image clickable, then question: “Does the image contain text?”
   1. If “Yes”, then it is an image of text. Alt text should match the text in the image.
      • <img src="open-day.jpg" alt="Open Day">
   2. If “No”, then question: “Does the image contain content?”
      1. If “No”, then the image is decorative. Alt text should be left blank.
         • <img src="background-red.gif" alt="">
      2. If “Yes”, then question: “Is the image content repeated in body text?”
         1. If “Yes”, then the image can be treated as decorative. Alt text should be left blank.
         2. If “No”, then question: “Is the image a photo?”
            1. If “Yes”, then it is an informative image. Alt text should capture why the image was chosen.
               • <img src="campus.jpg" alt="A group of students sitting and chatting on the South Lawn">
            2. If “No”, then it is a complex image. Complex images include graphs, charts or diagrams. Alt text should provide a short description of the image and a detailed description should be provided elsewhere on the page or via a link.
               • <img src="graph.gif" alt="Bar chart showing Annual inflation from 2000 to 2021" longdesc="annual-inflation.html">
<a href="annual-inflation.html">Annual inflation 2000 - 2021</a>