Accessibility for Photos, Charts, Graphs and PDFs

Alt text for Photographs in Google Docs/Slides and Microsoft Word/PowerPoint

How to do alt text for Google Docs
Right click on the image < Image options < Fill out alt text

How to do alt text for Microsoft Word
Picture menu < Click on alt text < Fill out alt text

Icons that convey information

Image icons are often used in HTML pages to help label other information, and they should have alt text. 
Example 1. Alt text for this can be alt=”A black rotary telephone.” 


1-800-555-1212

Example 2. An image of a medicine bottle. 
Alt text for this can be alt="Medicine bottle with a prescription written on the side."

Decorative Images

Some images are used as background images to add visual appeal, but don't convey meaning. Commonly described as decorative images, they don’t need alt text. 

Example of a decorative image. If used in an HTML page, the alt text code would be alt=””
istockphoto.com image

Logos

Logos commonly used on HTML web pages, can be graphics that may or may not have text in them. The organization name that they represent still needs to be described with alt text. Example 1. Alt text for the Aims Community College logo would be alt="Aims Community College" https://www.aims.edu/


Example 2. From the TV show LOST (Click link below and see logo at bottom of page) -  the alt text for the airline logo Oceanic Airlines would be alt="Oceanic Airlines"  Oceanic airlines logo

Complex images of text that convey meaning

• A rule of using complex images of text is to only use them if you really need to - for content that you have created or obtained from a third-party source. 
• If the information you are using doesn’t need to be an image, and you can easily present the information in an HTML or text format, that would be good to do. 
• People with visual impairments can have issues accessing images of text:
  • For example: if a font-size is less than 9 points, it can be really difficult to read. 
  • And when people with visual impairments try to zoom into small text on an image - it can look pixelated.
• If you need to present things like graphs, charts, diagrams, infographics, maps, and illustrations, etc., as complex images of text:  
  • Use both alt text and a long description to convey meaningful information that students need to know for an exam or to understand the context of the lesson.
    • Otherwise, screen reader users will not be able to access the text in the image.
• Start by placing alt text on the image defining what it is and stating that a long description is adjacent to the image.
• Then, provide a long description of a couple of sentences there:
  • What the image of text is about: the information that conveys meaning
  • The context in the overall lesson
  • All information that a student would be expected to know on an exam

Please note: In a D2L course, Panorama will only ask you to provide alt text for complex images of text, 
(a limitation of Panorama) but we still need to provide a long description adjacent to the image.

When you don't need a long description

If the main content where charts and graphs are displayed already has a text explanation that contains this information:

• What the image of text is about: the information that conveys meaning
• The context of how this image relates to the overall lesson
• All information that a student would be expected to know on an exam about this image

Then you don't need to provide an additional long description. The alt text for the image of text should say something like: “This is a chart about ____.  A description appears in the paragraphs below.”

Some Examples

1. Example of a chart Concept draw chart example

Long description: The image shows a pie chart with 18 slices, each representing a different business sector. The chart is a visual representation of how a certain value is distributed across these sectors.

Banks (8.42%) | Food Producers & Processors (8.39%) | Mobile Telecommunications (7.81%) | 
Oil & Gas Producers (7.39%) | General Retailers (7.36%) | Mining (7.02%) | Construction & Materials (6.22%) | Aerospace & Defence (5.60%) | Support Services (5.53%) | Gas, Water & Multiutilities (5.45%) Electricity (5.25%) | General Financial (4.46%) | Beverages (4.11%) | Life Insurance (4.07%) | Tobacco (3.79%) | Travel & Leisure (3.42%) | Pharmaceutical & Biotechnology (3.28%) | Media (2.43%)

2. Example of a graph Visual capitalist Share of Global GDP


Long description: The graph, "SHARE OF GLOBAL GDP", shows the percentage of the world's total economic output (Gross Domestic Product) held by the six largest economies from 1980 to 2024. Each line on the graph tracks the share of global GDP for one of these economies over time. The U.S. share fluctuates between roughly 20% and 30%, while China's share has grown significantly since the late 1990s. The current estimated shares for 2024 are provided on the right side of the chart:U.S.: 26.3% | EU: 17.3% | China: 16.9% | Japan: 3.8% | India: 3.6% | UK: 3.2%. The graph uses data from the IMF World Economic Outlook (April 2024) and notes that the figures are based on GDP in current prices. The overall message is a visual comparison of the economic power of these major global players and how their relative positions have changed over the past four decades.

3. Example of a mathematics equations - the quadratic equation How to Solve a Quadratic Equation: 3 Methods - HubPages
Long description: A quadratic equation is a polynomial equation of the second degree. It's written in the standard form:

Where a, b, and c are coefficients, and a cannot be zero (if a were zero, the term ax²would vanish, and the equation would no longer be quadratic). The variable x represents an unknown value. The solutions to a quadratic equation are also known as its roots or zeros, and they correspond to the x-intercepts of the equation's graph, which is a parabola.

6. Example of a map - Map of London Boroughs

Long description: This map displays the 32 London boroughs and the City of London, each identified by name and color. The River Thames, which flows through the city, is also visible, serving as a key geographical reference. The boroughs are divided into two main groups:

• Inner London (12 boroughs, plus the City of London): These boroughs are typically smaller in area and population but have a much higher population density. They include Camden, Greenwich, Hackney, Hammersmith and Fulham, Islington, Kensington and Chelsea, Lambeth, Lewisham, Southwark, Tower Hamlets, Wandsworth, and Westminster.
• Outer London (20 boroughs): These boroughs are generally larger and less densely populated. They include Barking and Dagenham, Barnet, Bexley, Brent, Bromley, Croydon, Ealing, Enfield, Haringey, Harrow, Havering, Hillingdon, Hounslow, Kingston upon Thames, Merton, Newham, Redbridge, Richmond upon Thames, Sutton, and Waltham Forest.

7. Example of an illustration - https://www.theguardian.com/lifeandstyle/2014/may/20/how-to-mend-a-bike-puncture

Long description: The key message of this illustration: “How to fix a bike tube” is that you can fix a punctured inner tube rather than throwing it away, which saves money and extends its life. The illustration lists the essential tools for repairing a bike puncture:

• Tweezers and chalk to find and mark the hole.
• Rubber solution and a patch to fix it.
• A bucket of water to locate the puncture.
• Sandpaper to prepare the surface.
• Tyre levers to remove the tire.
• A pump to re-inflate the tube.

Demo: Using Google Gemini to generate long descriptions

1. First: go to Google Gemini at https://gemini.google.com/app
2. Upload the image into the prompt window that you want to have described.
3. Beneath that type a prompt like: "Describe the key information in this image."
4. Also type in any background information that will help Gemini write an effective image description.
5. Check the generated text for accuracy, proper context, spelling errors.
6. You may need to add your own text to what Gemini writes to create the best long description possible, but using Gemini can help get you started.

We’ll practice with a couple of images below.

1. Example to use with Gemini - 15 Infographic Examples for Students (Plus Editable Templates) - Piktochart

The long description would go here.

2. Example to use with Gemini - Line graphs - KS3 Maths - BBC Bitesize

The long description would go here.

About PDF Accessibility

To be accessible, a PDF file needs 

1. Structural tags in a logical reading order
2. A proper heading structure
3. Descriptive links
4. Alt text for images
5. Proper table and list formatting
6. Human verification that Acrobat has tagged a file correctly
7. For more information, please see the document Accessibility for PDF files also in the Accessibility Workshops folder, here on the Hub.