Text Equivalent for Images — examples and guidelines
Alternative text for images is the first principle of web accessibility
Good Alt text is:
Accurate and equivalent in presenting the same content and function as presented by the image.
Succinct. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.
Free of phrases like "image of…" or "graphic of…" It is apparent to the user/assistive technology that it is an image.
About the content that is being conveyed; it should rarely be the description of an image. Focus on what is represented by the image, rather than how it is represented.
Does not use descriptions that rely only on sight ("the right hand column", "click the button", "the red text").
Example 1: A Simple, Decorative or Incidental Image
A brief description is all that is necessary.
ALT Text = "Two children at computer"
Example 2: A Linked Image
Describe the destination or function of the link - not just the image.
ALT Text = "LEAP Logo and Link to LEAP Home"
Example 3: Graphs and Charts
Charts and graphs are frequently used to illustrate proportion and distribution of data. Charts and graphs are easy to make accessible through textual description - but you must plan ahead!
Option 1. The easiest way to make the information accessible is to literally identify and list the data figures and percentages on the chart or graph. This is best accomplished by copying the data directly from the software used to create the chart object, typically Microsoft Excel.
Figure 1: Percent of Students with Disabilities from years 1991 to 2005
Option 2. Another approach is to summarize the most essential relationship being identified by the data presented in the chart
Figure 1 highlights the changes in the overall count and percent of students found eligible for special education in the last fifteen years. Note that over the past three years, the percent of special education students ranges from 15.0% to 15.9% of the overall student enrollment.
Option 3. Alternately, you could include the data in a table placed in proximity to the chart. The alt text for the chart need only refer to the table.
Figure 1: Percent of Students with Disabilities from years 1991 to 2005. Refer to Table 1 for these data.
Example 4: Diagrams
Diagrams often contain more abstract content than charts and graphs. More is not necessarily better when it comes to describing a diagram. Limit the alt text to what the user absolutely needs to know to understand the concept, process or object being communicated.
Diagram: Strands of Early Literacy Development shows that language comprehension (background knowledge, vocabulary, language structures, verbal reasoning and literacy knowledge) when linked with word recognition (phonological awareness, decoding and sight recognition) will increase a child's skilled reading abilities with fluent execution.