Massachusetts Department of Elementary and Secondary Education
Go to Selected Program Area
Massachusetts State Seal
News School/District Profiles School/District Administration Educator Services Assessment/Accountability Family & Community  
> Administration Finance/Grants PK-16 Program Support Information Services  
>  WebTeam Home
>  Accessibility Support
>  Programming Standards
>  Conventions
>  ESE Logos

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.

Two children at computer.
Two children at computer

Example 2: a linked image
Describe the destination or function of the link - not just the image.

MCAS Logo and Link to MCAS Home
MCAS Logo and Link to MCAS Home

Example 3: graphs and charts
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.
Figure 1
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.

Option 2. Another approach is to summarize the most essential relationship being identified by the data presented in the chart

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.

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.


Last Updated: November 19, 2014
E-mail this page| Print View| Print Pdf  
Massachusetts Department of Elementary and Secondary Education Search · Site Index · Policies · Site Info · Contact ESE