Authoring Meaningful Alternative Text

<!DOCTYPE html> <html lang="en"> <head>  <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="robots" content="index, follow">  <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Authoring Meaningful Alternative Text | Section508.gov</title> <meta property="og:title" content="Section508.gov"> <meta name="description" content="Information about the Section508.gov website, GSA’s Government-wide IT Accessibility Team, and guidance to Federal agencies on accessible information and communication technology (ICT)."> <meta property="og:description" content="Information about the Section508.gov website, GSA’s Government-wide IT Accessibility Team, and guidance to Federal agencies on accessible information and communication technology (ICT)."> <meta property="og:image" content="https://assets.section508.gov/files/images/social-media-og-image.jpg"> <meta name="twitter:image" content="https://assets.section508.gov/files/images/social-media-og-image.jpg" />  <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@" /> <meta name="twitter:title" content="Section508.gov" /> <meta name="twitter:description" content="Information about the Section508.gov website, GSA’s Government-wide IT Accessibility Team, and guidance to Federal agencies on accessible information and communication technology (ICT)." /> <meta property="og:type" content="article"> <link rel="canonical" href="https://www.section508.gov/create/alternative-text/" /> <meta property="og:url" content="https://www.section508.gov/create/alternative-text/" />   <link rel="shortcut icon" type="image/ico" href="/assets/images/favicon.ico" /> <link rel="icon" type="image/png" href="/assets/images/favicon.ico" /> <link rel="icon" type="image/png" sizes="192x192" href="/assets/images/android-chrome-192x192.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon-16x16.png" /> <link rel="manifest" href="/assets/images/site.webmanifest" />  <link rel="stylesheet" type="text/css" href="/assets/css/index.css?1732224641581990839"> <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> <script src="/assets/js/uswds-init.min.js?1732224641581990839"></script>  <meta name="topic" content="Content creation (create)"> <meta name="sub-topic" content="Graphics Specific (image descriptions)"> <meta name="audience" content="Developers and Testers (dev-test), Content Creators (creator), 508 Program Manager (508pm), Designer (design)"> <meta name="resource-type" content="Process/How-to"> <meta name="format" content="HTML (html)"> </head> <body> <section aria-label="Official Government Site Banner" class="page-landing-page layout-demo "> <a class="usa-skipnav" href="#main-content">Skip to secondary navigation</a> <a class="usa-skipnav" href="#content-section">Skip to main content</a> <div class="usa-banner" aria-label="Official website of the United States government" > <div class="usa-accordion"> <header class="usa-banner__header"> <div class="usa-banner__inner"> <div class="grid-col-auto"> <img aria-hidden="true" class="usa-banner__header-flag" src="/assets/img/us_flag_small.png" alt="U.S. flag" /> </div> <div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true"> <p class="usa-banner__header-text"> An official website of the United States government </p> <p class="usa-banner__header-action">Here’s how you know</p> </div> <button type="button" class="usa-accordion__button usa-banner__button" aria-expanded="false" aria-controls="gov-banner-default" > <span class="usa-banner__button-text">Here’s how you know</span> </button> </div> </header> <div class="usa-banner__content usa-accordion__content" id="gov-banner-default" hidden="" > <div class="grid-row grid-gap-lg"> <div class="usa-banner__guidance tablet:grid-col-6"> <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-dot-gov.svg" role="img" alt="Dot gov" aria-hidden="true" /> <div class="usa-media-block__body"> <p> <strong>Official websites use .gov</strong><br />A <strong>.gov</strong> website belongs to an official government organization in the United States. </p> </div> </div> <div class="usa-banner__guidance tablet:grid-col-6"> <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-https.svg" role="img" alt="Https" aria-hidden="true" /> <div class="usa-media-block__body"> <p> <strong>Secure .gov websites use HTTPS</strong><br />A <strong>lock</strong> ( <span class="icon-lock" ><svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64" class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-description-default" focusable="false" > <title id="banner-lock-title-default">Lock</title> <desc id="banner-lock-description-default">Locked padlock icon</desc> <path fill="#000000" fill-rule="evenodd" d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z" /> </svg> </span >) or <strong>https://</strong> means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites. </p> </div> </div> </div> </div> </div> </div> <button id="backtotop" title="Go to top" style="display: none">˄ Top</button> <div class="usa-overlay"></div> </section> <header class="usa-header usa-header--extended" role="banner"> <div class="usa-navbar"> <div class="usa-logo" id="extended-logo"> <span><a href="/" onclick="return navigate(this)"> <img src="/assets/images/508-logo-cropped-web-altgreen.png" alt="Section508.gov Home; GSA logo with text: Section508.gov Buy. Build. Be Accessible." class="logo" /> </a></span> </div> <button class="usa-menu-btn">Menu</button> </div> <nav id="site-nav" role="navigation" class="usa-nav" aria-label="Primary Site Navigation"> <div class="usa-nav__inner"> <button class="usa-nav__close"><img alt="close" src="/assets/img/close.svg"></button> <ul class="usa-nav__primary usa-accordion"> <li class="usa-nav__primary-item"> <a aria-label="Policy & Management primary navigation" class="usa-nav__link" onclick="return navigate(this)" href="/manage/"><span>Policy & Management</span></a> </li> <li class="usa-nav__primary-item"> <a aria-label="Acquisition primary navigation" class="usa-nav__link" onclick="return navigate(this)" href="/buy-sell/"><span>Acquisition</span></a> </li> <li class="usa-nav__primary-item"> <a aria-label="Content Creation primary navigation" class="usa-nav__link usa-current" onclick="return navigate(this)" href="/create/"><span>Content Creation</span></a> </li> <li class="usa-nav__primary-item"> <a aria-label="Design & Develop primary navigation" class="usa-nav__link" onclick="return navigate(this)" href="/develop/"><span>Design & Develop</span></a> </li> <li class="usa-nav__primary-item"> <a aria-label="Testing primary navigation" class="usa-nav__link" onclick="return navigate(this)" href="/test/"><span>Testing</span></a> </li> <li class="usa-nav__primary-item"> <a aria-label="Training, Tools & Events primary navigation" class="usa-nav__link" onclick="return navigate(this)" href="/training/"><span>Training, Tools & Events</span></a> </li> </ul> <div class="usa-nav__secondary"> <ul class="usa-nav__secondary-links"> <li class="usa-nav__secondary-item"> <a href="/blog/" class="external-link" onclick="return navigate(this)">Blogs & Updates</a> </li> <li class="usa-nav__secondary-item"> <a href="/tools/program-manager-listing/" class="external-link" onclick="return navigate(this)">My Agency’s 508 PM</a> </li> <li class="usa-nav__secondary-item"> <a href="/content/about-us/" class="external-link" onclick="return navigate(this)">About Us</a> </li> </ul> <form id="search_form" class="usa-search usa-search--small" action="https://search.usa.gov/search" accept-charset="UTF-8" method="get"> <input name="utf8" type="hidden" value="✓" /> <input name="affiliate" type="hidden" value="gsa-section508-accessibility" /> <div role="search"> <label class="usa-sr-only" for="extended-search-field-small">Search</label> <input class="usa-input usagov-search-autocomplete" id="extended-search-field-small" type="search" name="query" autocomplete="off"> <button class="usa-button primary-background-color" type="submit"><img src="/assets/img/usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search" /></button> </div> </form> </div> </div> </nav> </header> <section aria-label="Page Banner" class="usa-graphic-list usa-section sml-margin bg-gradient landing-page-banner"> <div class="grid-container"> <div class="grid-row grid-gap"> <div class="tablet: grid-col"> <span class="banner-title-color font-sans-lg margin-bottom-0"> Content Creation </span> <br /> <h1 class="text-white font-sans-xl margin-top-0 margin-bottom-0"> Authoring Meaningful Alternative Text </h1> </div> </div> </div> </section> <div id="main-content" class="usa-layout-docs usa-section"> <div class="grid-container"> <div class="grid-row grid-gap"> <aside class="usa-layout-docs__sidenav desktop:grid-col-3 padding-bottom-4"> <nav id="sec-nav" aria-label="Secondary Navigation"> <ul class="usa-sidenav menu"><li class="usa-sidenav__item"> <a href="/create/" >Content Creation</a> </li><li class="usa-sidenav__item list "> <a href="javascript:void(0);" class="header-menu-text" aria-label="Create a Document - Submenu" aria-expanded="false">Create a Document</a> <ul class="usa-sidenav__sublist items"><li class="usa-sidenav__item "> <a href="/create/documents/">Create Accessible Documents</a> </li><li class="usa-sidenav__item "> <a href="/create/documents/authoring-guides/">Authoring Guides</a> </li><li class="usa-sidenav__item "> <a href="/create/documents/#tips">Tips and Tricks</a> </li><li class="usa-sidenav__item "> <a href="/create/documents/training-videos/">Video Training</a> </li></ul> </li><li class="usa-sidenav__item list "> <a href="javascript:void(0);" class="header-menu-text" aria-label="Create a Presentation - Submenu" aria-expanded="false">Create a Presentation</a> <ul class="usa-sidenav__sublist items"><li class="usa-sidenav__item "> <a href="/create/presentations/authoring-guides/">Authoring Guides</a> </li><li class="usa-sidenav__item "> <a href="/create/presentations/">Tips and Tricks</a> </li><li class="usa-sidenav__item "> <a href="/create/presentations/training-videos/">Video Training</a> </li></ul> </li><li class="usa-sidenav__item list "> <a href="javascript:void(0);" class="header-menu-text" aria-label="Create a Spreadsheet - Submenu" aria-expanded="false">Create a Spreadsheet</a> <ul class="usa-sidenav__sublist items"><li class="usa-sidenav__item "> <a href="/create/spreadsheets/authoring-guides/">Authoring Guides</a> </li><li class="usa-sidenav__item "> <a href="/create/spreadsheets/">Tips and Tricks</a> </li><li class="usa-sidenav__item "> <a href="/create/spreadsheets/training-videos/">Video Training</a> </li></ul> </li><li class="usa-sidenav__item list "> <a href="javascript:void(0);" class="header-menu-text" aria-label="Create a PDF - Submenu" aria-expanded="false">Create a PDF</a> <ul class="usa-sidenav__sublist items"><li class="usa-sidenav__item "> <a href="/create/pdfs/authoring-guides/">Authoring Guides</a> </li><li class="usa-sidenav__item "> <a href="/create/pdfs/common-tags-and-usage/">Tags and Their Usage</a> </li><li class="usa-sidenav__item "> <a href="/create/pdfs/">Tips and Tricks</a> </li><li class="usa-sidenav__item "> <a href="/create/pdfs/training-videos/">Video Training</a> </li></ul> </li><li class="usa-sidenav__item list "> <a href="javascript:void(0);" class="header-menu-text" aria-label="Audio & Video - Submenu" aria-expanded="false">Audio & Video</a> <ul class="usa-sidenav__sublist items"><li class="usa-sidenav__item "> <a href="/create/audio-video/">Audio- and Video-Only</a> </li><li class="usa-sidenav__item "> <a href="/create/captions-transcripts/">Captions & Transcripts</a> </li><li class="usa-sidenav__item "> <a href="/create/synchronized-media/">Synchronized Media</a> </li></ul> </li><li class="usa-sidenav__item"> <a href="/create/alternative-text/" class="active usa-current" >Alternative Text</a> </li><li class="usa-sidenav__item"> <a href="/create/electronic-signatures/" >Electronic Signatures</a> </li><li class="usa-sidenav__item"> <a href="/create/email-messages/" >Email Messages</a> </li><li class="usa-sidenav__item"> <a href="/create/accessible-equations-formulas/" >Equations and Formulas</a> </li><li class="usa-sidenav__item"> <a href="/create/accessible-meetings/" >Meetings</a> </li><li class="usa-sidenav__item"> <a href="/create/social-media/" >Social Media</a> </li></ul> </nav> </aside> <main class="usa-layout-docs__main desktop:grid-col-9" id="content-section"> <div class="usa-graphic-list"> <h2 id="purpose-of-alternative-text">Purpose of Alternative Text</h2> <p>Alternative text, also known as alt text, is descriptive text that conveys the meaning of an image in digital content. It’s designed to make visual content accessible to people with vision disabilities.</p> <p>When a person uses assistive technology such as a screen reader, the screen reader will read the onscreen text aloud. When the screen reader reaches an image, it will read the alt text for that image so the user can know what the image is meant to convey. Images can provide illustrative information, or they can act as buttons and similar interactive elements, so the alt text must describe these aspects to the user so they can respond appropriately.</p> <p>Without alt text, people who use screen readers cannot access the content provided in the images. This is why alt text is a requirement in the Section 508 guidelines for creating digital content.</p> <p>Additionally, alt text makes content accessible to other users, like those who may have difficulty understanding the meaning of the visual content, or users without access to high-speed internet who cannot access images on the web. It also makes the visual content available for technical applications, such as Search Engine Optimization (SEO), digital assistance, and artificial intelligence.</p> <hr /> <div class="grid-row grid-gap"> <div class="desktop:grid-col-3 display-flex flex-column flex-align-self-center"> <a href="/training/alt-text/what-is-alternative-text/"><img alt="What is Alternative Text?" src="https://assets.section508.gov/files/videos/what-is-alternative-text-thumbnail.png" style="width:100%" /></a> </div> <div class="desktop:grid-col-9"> <p class="video-title"><a href="/training/alt-text/what-is-alternative-text/">What is Alternative Text?</a></p> <p>Alternative text, also known as alt text, is descriptive text that conveys the meaning of an image in digital content. It’s designed to make visual content accessible to people with vision disabilities. While there are other benefits of alt text for all users, this video focuses on people who use screen readers.</p> <p>Duration 3m 25s | 1-Part Video Tutorial</p> </div> </div> <hr /> <h2 id="resources-on-how-to-add-alt-text">Resources on How to Add Alt Text</h2> <ul> <li><a href="https://www.section508.gov/training/documents/aed-cop-docx09/">Microsoft Word - Create Accessible Images and Other Objects</a></li> <li><a href="https://www.section508.gov/training/presentations/aed-cop-pptx07/">Microsoft PowerPoint - Adding Alternative Text to Images and Other Objects</a></li> <li><a href="https://www.section508.gov/training/spreadsheets/aed-cop-xlsx06/">Microsoft Excel - Adding Alternative Text to Images and Other Objects</a></li> <li><a href="https://www.section508.gov/training/pdfs/aed-cop-pdf03/">PDF - Remediating PDFs for Accessibility</a></li> <li><a href="https://www.w3.org/WAI/tutorials/images/">Web Development/HTML - W3.org Images Tutorial</a></li> </ul> <h2 id="general-guidelines">General Guidelines</h2> <p>When writing alt text, follow these guidelines:</p> <ul> <li>Alt text should be short and to the point.</li> <li>Alt text should communicate the same information as the visual content.</li> <li>Alt text should refer to relevant content provided by the image, rather than simply describing how the image looks.</li> <li>Alt text should not contain any extra or unnecessary information, and should not repeat information that is already provided in the text.</li> <li>Alt text must be in the same language as the main content. For example, if you translate an English document into Spanish, you must also translate the alt text into Spanish.</li> </ul> <h2 id="specific-guidelines">Specific Guidelines</h2> <h3 id="photos-and-portraits">Photos and Portraits</h3> <p>Describe the content of the photo that is relevant to the surrounding context. Instead of describing how the image looks, describe what information is being conveyed.</p> <h4 id="example-for-photos-and-portraits">Example for Photos and Portraits</h4> <div class="tablet:grid-col" style="margin: auto; max-width: 35%; text-align: center; padding: 10px 0px"> <div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-01.jpg" alt="Microsoft Word document highlighting the Review ribbon, Check Accessibility button, and the Accessibility panel." aria-describedby="figure-1" class="border-2px border-base-light shadow-2 padding-1" /> </div> <div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-1"><strong>Figure 1.</strong> Example for Photos and Portraits.</span> </div> </div> <ul> <li><strong>Helpful:</strong> “Dr. Martin Luther King Jr.”</li> <li><strong>Unhelpful:</strong> “Black and white photo of Dr. Martin Luther King Jr. wearing a suit and tie.”</li> </ul> <h3 id="images-that-contain-text">Images that Contain Text</h3> <p>When possible, do not include text as part of an image. Instead, type the text in the document and adjust the formatting of the text until it has the desired appearance.</p> <p>If you have an image that does contain text, include it in the alt text word for word.</p> <h4 id="example-for-images-that-contain-text">Example for Images that Contain Text</h4> <div class="tablet:grid-col" style="margin: auto; max-width: 70%; text-align: center; padding: 10px 0px"> <div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-02.png" alt="" aria-describedby="figure-2" class="border-2px border-base-light shadow-2 padding-1" /> </div> <div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-2"><strong>Figure 2.</strong> Example for Images that Contain Text.</span> </div> </div> <ul> <li><strong>Helpful:</strong> “Card with text: Acquisition training for the real world - Jan 29th-Feb 9th. 1:00 PM - 2:00 PM EST - Register today.”</li> <li><strong>Unhelpful:</strong> “Event details with registration button”</li> </ul> <h3 id="logos">Logos</h3> <p>Logos are never decorative, so they require alt text. Describe any significant symbols or graphics, and include any text in the logo word for word in the alt text.</p> <h4 id="example-for-logos">Example for Logos</h4> <div class="tablet:grid-col" style="margin: auto; max-width: 100%; text-align: center; padding: 10px 0px"> <div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-03.png" alt="" aria-describedby="figure-3" class="border-2px border-base-light shadow-2 padding-1" /> </div> <div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-3"><strong>Figure 3.</strong> Example for Logos.</span> </div> </div> <ul> <li><strong>Helpful:</strong> “GSA logo with text: Section508.gov Buy. Build. Be Accessible.”</li> <li><strong>Unhelpful:</strong> “Logo”</li> </ul> <h3 id="decorative-images">Decorative Images</h3> <p>If an image does not contain information that is necessary for the reader to understand the main content and is pure decoration or is used only for visual formatting, it is decorative. Many programs allow you to select whether an image is decorative or indicate to screen readers that they should skip this image. Note that if you fail to set the alt text to decorative, a screen reader may read the file name for the image rather than skip the image altogether as intended.</p> <h4 id="example-for-decorative-images">Example for Decorative Images</h4> <div class="tablet:grid-col" style="margin: auto; max-width: 80%; text-align: center; padding: 10px 0px"> <div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-04.png" alt="Example image next to text: 'Now that you have completed this course, you should be able to do the following,' followed by a list of training items." aria-describedby="figure-4" class="border-2px border-base-light shadow-2 padding-1" /> </div> <div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-4"><strong>Figure 4.</strong> Example for Decorative Images.</span> </div> </div> <ul> <li><strong>Helpful:</strong> Image is set to “decorative” and no alt text is needed.<br /> <strong><em>Note:</em></strong> Only the laptop here is being considered an image. The text in this example would need to be actual text, rather than part of the image itself.</li> <li><strong>Unhelpful:</strong> Alt text says, “person typing on a laptop.”</li> <li><strong>Unhelpful:</strong> Image has no alt text, but is not set to decorative, so screen readers read the file name of the image instead.</li> </ul> <h3 id="background-images">Background Images</h3> <p>Many programs skip background images in screen reader descriptions. If a background image contains important information, include it in the main content rather than keeping it in the background, and add the appropriate alt text. If the image is decorative, confirm during testing that it is skipped in screen reader descriptions.</p> <p>In documents created in Microsoft Word, screen readers skip all headers and footers as if they were background images. Any non-decorative images (and essential text content) must be in the main page content to ensure they are read by screen readers.</p> <h4 id="example-for-background-images">Example for Background Images</h4> <div class="tablet:grid-col" style="margin: auto; max-width: 80%; text-align: center; padding: 10px 0px"> <div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-05.png" alt="Screenshot of text with background image of a keyboard. Text says 'Let's start with a brief overview of what Section 508 is, and what it involves." aria-describedby="figure-5" class="border-2px border-base-light shadow-2 padding-1" /> </div> <div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-5"><strong>Figure 5.</strong> Example for Background Images.</span> </div> </div> <ul> <li><strong>Helpful:</strong> Image is formatted as a background image and is automatically skipped by screen readers<br /> <strong><em>Note:</em></strong> In all cases, the text in this example would need to be actual text that is not part of the image itself.</li> <li><strong>Helpful:</strong> Image is included in the main content, but is indicated as “decorative” and is skipped by screen readers</li> <li><strong>Unhelpful:</strong> alt=”a white keyboard”</li> </ul> <h4 id="example-for-document-headers">Example for Document Headers</h4> <div class="tablet:grid-col" style="margin: auto; max-width: 70%; text-align: center; padding: 10px 0px"> <div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-06.png" alt="MS Word document. Header contains image of G S A logo and text 'General Services Administration.' Document main content says 'Team Newsletter. Team Building Exercises. Image of a team collaborating.'" aria-describedby="figure-6" class="border-2px border-base-light shadow-2 padding-1" /> </div> <div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-6"><strong>Figure 6.</strong> Example for Document Headers.</span> </div> </div> <ul> <li><strong>Helpful:</strong> Move the logo image and other header text to the main page content and add alt text that says “GSA logo.”</li> <li><strong>Unhelpful:</strong> The logo and agency name stay in the document header and are not read by a screen reader.</li> </ul> <h3 id="controls-form-elements-and-links">Controls, Form Elements, and Links</h3> <p>When possible, render controls and other navigation elements as text and avoid using images to convey navigation information. Be careful when using images with these elements to ensure they are still accessible for keyboard navigation and understandable for screen reader users. </p> <p>For more guidance, see the “Additional Resources” section at the end of this guide.</p> <h4 id="example-for-controls">Example for Controls</h4> <div class="tablet:grid-col" style="margin: auto; max-width: 60%; text-align: center; padding: 10px 0px"> <div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-07.png" alt="Box labeled 'Slide 2' with two arrow buttons labeled 'Next' and 'Previous'" aria-describedby="figure-7" class="border-2px border-base-light shadow-2 padding-1" /> </div> <div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-7"><strong>Figure 7.</strong> Example for Controls.</span> </div> </div> <ul> <li><strong>Helpful:</strong> Screen reader reads links that say “Next” and “Previous” and arrow images are set as “decorative”</li> <li><strong>Helpful:</strong> Screen reader reads “Next arrow button” and “Previous arrow button”</li> <li><strong>Unhelpful:</strong> “Right arrow” and “Left arrow”</li> </ul> <h4 id="example-for-form-elements">Example for Form Elements</h4> <div class="tablet:grid-col" style="margin: auto; max-width: 60%; text-align: center; padding: 10px 0px"> <div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-08.png" alt="Form with input fields for name and email. Email field is followed by a red asterisk as a 'required' indicator." aria-describedby="figure-8" class="border-2px border-base-light shadow-2 padding-1" /> </div> <div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-8"><strong>Figure 8.</strong> Example for Form Elements.</span> </div> </div> <ul> <li><strong>Helpful:</strong> Red asterisk is incorporated as part of the label text so no image with alt text is required</li> <li><strong>Helpful:</strong> Alt text for red asterisk says “Required”</li> <li><strong>Unhelpful:</strong> Alt text for red asterisk says “Asterisk” or “Star”</li> <li><strong>Unhelpful:</strong> Red asterisk image has no alt text</li> </ul> <h3 id="bullets">Bullets</h3> <p>Document and web content creators should add bulleted lists from the application toolbar and unordered list element respectively, and avoid manually creating bulleted (or numbered) lists. Most screen readers will read bulleted lists as “bullet,” regardless of what shape or image is used for the bullet point. If you must use an image in place of a bullet point, set the alt text to reflect that it is being used as a bullet point. In some cases, the image used for the bullet point conveys meaning, in which case the alt text should indicate that meaning. For example, if you have a list of checked and unchecked boxes, use alt text like “checkbox checked” and “checkbox unchecked.”</p> <h4 id="example-for-bullet-points">Example for Bullet Points</h4> <p>Activities Covered by Section 508</p> <ul> <li>Development</li> <li>Procurement</li> <li>Use</li> <li>Maintenance</li> <li>Helpful: Screen reader says “bullet” and its position in the list before each item in the list</li> <li>Unhelpful: Screen reader says “right arrow” before each item in the list</li> </ul> <h3 id="spacers-and-separators">Spacers and Separators</h3> <p>Spacers and similar structural images are decorative and should be marked as decorative so that they are skipped by screen readers.</p> <p>Lines and separators are typically decorative, especially if you are using headers to appropriately organize your content. If separators are used to convey a meaning or serve as a functional image used to initiate action or prompt a response, the alt text must provide the same information conveyed visually.</p> <h3 id="charts-graphs-and-diagrams">Charts, Graphs, and Diagrams</h3> <p>For complex images, such as flowcharts, graphs, diagrams, and infographics, follow these guidelines:</p> <ul> <li>Describe what type of chart or diagram is being used. For example, start your alt text with phrases like “Pie chart” or “Bar graph.”</li> <li>Consider the purpose of the image within the context of the surrounding content. Describe important data trends, relationships, and other parts of the image that are being highlighted.</li> <li>Avoid repeating parts of the main text in the alt text. For example, if a paragraph under a bar chart describes the trends, you do not need to repeat this description in the alt text.</li> <li>Avoid overly long descriptions in the alt text. If the image is very detailed and requires a longer description, include a short description in the alt text, then beneath the image, provide a link to the data table or a longer description of the graphic.</li> </ul> <h4 id="example-for-charts">Example for Charts</h4> <div class="tablet:grid-col" style="margin: auto; max-width: 100%; text-align: center; padding: 10px 0px"> <div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-09.png" alt="Example image" aria-describedby="figure-9" class="border-2px border-base-light shadow-2 padding-1" /> </div> <div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-9"><strong>Figure 9.</strong> Example for Charts.</span> </div> </div> <ul> <li><strong>Helpful:</strong> “Bar chart of event sales for Monday through Friday. Amounts for ticket, food, and merchandise sales show a slight decline from Monday to Wednesday, with a dramatic increase to a peak on Friday. Full data set: Monday: ticket sales 100, food sales 58, merchandise sales 75. Tuesday: ticket sales 122, food sales 40, merchandise sales 62. Wednesday: ticket sales 85, food sales 40, merchandise sales 53. Thursday: ticket sales 141, food sales 95, merchandise sales 106. Friday: ticket sales 196, food sales 122, merchandise sales 160.”</li> <li><strong>Helpful:</strong> “Bar chart of event sales for Monday through Friday. Amounts for ticket, food, and merchandise sales show a slight decline from Monday to Wednesday, with a dramatic increase to a peak on Friday. Table 1 further details the event sales by category.”</li> <li><strong>Unhelpful:</strong> “Event sales graph”</li> </ul> <h4 id="example-for-graphs">Example for Graphs</h4> <div class="tablet:grid-col" style="margin: auto; max-width: 80%; text-align: center; padding: 10px 0px"> <div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-10.png" alt="Sample scatter plot image with title 'Conformance (c-index) vs. Maturity (m-index)' and caption: Figure 4. Percentage of respondents submitting conformance testing results for the top intranet and internet web pages, electronic documents, and videos (Q78 to Q81)." aria-describedby="figure-10" class="border-2px border-base-light shadow-2 padding-1" /> </div> <div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-10"><strong>Figure 10.</strong> Example for Graphs.</span> </div> </div> <ul> <li><strong>Helpful:</strong> “A scatter plot shows the distribution of agencies on a 0-to-5 scale across the x-axis representing maturity (m-index) and the y-axis representing conformance (c-index), with a heavy concentration of respondents located in the bottom and left of the graph. A dark red trend line shows an upward trend, indicating that, as respondent’s maturity increased, their conformance also generally tended to increase. Table 3 further details the number of respondents who fell into specific brackets.”<br /> <strong><em>Note:</em></strong> This image should be followed by a link to the full data table.</li> <li><strong>Unhelpful:</strong> “Scatter plot of conformance versus maturity”</li> </ul> <h4 id="example-for-diagrams">Example for Diagrams</h4> <p>Flow charts, decision trees, and similar diagrams must have alt text that describes the order of the actions or relationships of decisions. For screen reader users, organizational charts may be better conveyed as a bulleted list, or a graphical diagram accompanied by a bulleted list.</p> <div class="tablet:grid-col" style="margin: auto; max-width: 80%; text-align: center; padding: 10px 0px"> <div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-11.png" alt="Sample image" aria-describedby="figure-11" class="border-2px border-base-light shadow-2 padding-1" /> </div> <div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-11"><strong>Figure 11.</strong> Example for Diagrams.</span> </div> </div> <ul> <li><strong>Helpful:</strong> “Organizational chart. Top level: Mario Ramirez Estrada, President. Reporting to Mario Ramirez Estrada: Anna Falkner, Vice President. Group also reporting to Mario Ramirez Estrada: Fiona Welch, IT Manager; Jamal Holt, Design Manager; Ayishah Newell, Project Manager. Reporting to Fiona Welch: Honora Bernhard, Senior IT Specialist; Jake Lyon, IT Specialist; Carter D’Agostino, IT Specialist. Reporting to Jamal Holt: Yukio Hayasaka, Creative Director; Isabel Sancho, Designer; Timoti Wattana, Junior Designer. Reporting to Ayishah Newell: C.J. Stenger, Support Manager; Richard Christiansen, Assistant.”</li> <li><strong>Helpful for larger charts:</strong> “See the link [insert link name] below the image for a text version of the organizational chart.”</li> <li><strong>Unhelpful:</strong> “Org chart”</li> </ul> <h3 id="watermarks">Watermarks</h3> <p>Watermarks are not read by screen readers. If a watermark has relevant information, you must add this information to the main content. For example, if you have a watermark that says “Top Secret,” then you must indicate in the main text that the document is top secret. </p> <p>If the watermark is decorative, no alt text or additional information is needed.</p> <p>All watermarks should have low color contrast to make the main text readable for readers with low vision. When possible, avoid using watermarks altogether since they can obscure the main text for users with low vision.</p> <h4 id="examples-for-watermarks">Examples for Watermarks</h4> <div class="tablet:grid-col" style="margin: auto; max-width: 60%; text-align: center; padding: 10px 0px"> <div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-12.png" alt="A memo with a faint grey watermark that says 'Confidential.' Main text says, 'To: Sales Team. From: Sales Managers. Subject: Quarterly Reports. Status: Confidential.'" aria-describedby="figure-12" class="border-2px border-base-light shadow-2 padding-1" /> </div> <div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-12"><strong>Figure 12.</strong> Example A for Watermarks.</span> </div> </div> <div class="tablet:grid-col" style="margin: auto; max-width: 60%; text-align: center; padding: 10px 0px"> <div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-13.png" alt="A memo with a bright red watermark that says 'Confidential.' Main text says, 'To: Sales Team. From: Sales Managers. Subject: Quarterly Reports.'" aria-describedby="figure-13" class="border-2px border-base-light shadow-2 padding-1" /> </div> <div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-13"><strong>Figure 13.</strong> Example B for Watermarks.</span> </div> </div> <ul> <li><strong>Helpful:</strong> A low-contrast watermark that says “Confidential” is repeated in the “Status” field in the memo.<br /> <strong><em>Note:</em></strong> It is recommended to remove the watermark altogether to avoid issues with color contrast for users with low vision.</li> <li><strong>Unhelpful:</strong> A bright red watermark that says “Confidential” obscures the main content and is not read by a screen reader.</li> </ul> <h3 id="signatures">Signatures</h3> <p>When a signature is presented as an image, include the word “Signature” and the signer’s name in the alt text.</p> <h4 id="example-for-signatures">Example for Signatures</h4> <div class="tablet:grid-col" style="margin: auto; max-width: 50%; text-align: center; padding: 10px 0px"> <div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-14.png" alt="Example image" aria-describedby="figure-14" class="border-2px border-base-light shadow-2 padding-1" /> </div> <div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-14"><strong>Figure 14.</strong> Example for Signatures.</span> </div> </div> <ul> <li><strong>Helpful:</strong> “Signature: Jane Doe”</li> <li><strong>Unhelpful:</strong> “Jane Doe written in neat cursive”</li> <li><strong>Unhelpful:</strong> “Signature”</li> </ul> <h2 id="common-mistakes">Common Mistakes</h2> <p>Many people who write alt text for images make these common errors:</p> <ul> <li>The text is too short and doesn’t describe the relevant content of the image.</li> <li>The text is too long and describes unnecessary information.</li> <li>They write text that visually describes the image, but does not describe the part of the image that directly relates to why the image was included in the content.</li> <li>The text repeats information from the main text.</li> <li>The alt text is just the image’s file name or path instead of a description. </li> <li>The alt text is a computer-generated, visual description of the image, but does not describe the relevant content of the image. </li> <li>The alt text is in a different language than the onscreen text. For example, the content of the page is in Spanish, but the alt text for images is in English.</li> </ul> <h2 id="additional-resources">Additional Resources</h2> <p>Refer to the following for additional guidance on writing meaningful alt text.</p> <ul> <li><a href="https://www.ssa.gov/accessibility/files/SSA_Alternative_Text_Guide.pdf" target="_blank" class="usa-link--external">Social Security Administration Guide: Alternate Text for Images (PDF)</a></li> <li><a href="https://webaim.org/techniques/alttext/" target="_blank" class="usa-link--external">WebAIM: Alternative Text</a></li> <li><a href="https://webaim.org/techniques/alttext/#context" target="_blank" class="usa-link--external">WebAIM: Alternative Text - Context is Everything</a></li> </ul> <p><strong>Reviewed/Updated:</strong> July 2024</p> </div> </main> </div> </div> </div> <footer class="usa-footer__primary-section"> <div class="grid-container"> <div class="grid-row grid-gap padding-bottom-4"> <div class="desktop:grid-col-4"> <p class="text-bold">Government-wide Initiatives</p> <ul class="add-list-reset line-height-sans-6"> <li> <a href="https://www.gsa.gov/technology/government-it-initiatives/digital-strategy" target="_blank" onclick="return navigate(this)">Digital Strategy</a></li> <li> <a href="https://www.plainlanguage.gov/" target="_blank" onclick="return navigate(this)">Plain Language </a></li> <li> <a href="https://designsystem.digital.gov/" target="_blank" onclick="return navigate(this)"> U.S. Web Design System </a></li> <li> <a href="https://www.cio.gov/about/members-and-leadership/accessibility-cop/" target="_blank" onclick="return navigate(this)"> CIO Council Accessibility Community of Practice (ACOP)</a></li> </ul> </div> <div class="desktop:grid-col-2"> <p class="text-bold">Organization</p> <ul class="add-list-reset line-height-sans-6"> <li> <a href="/about-us/" aria-label="About Us in Organization" onclick="return navigate(this)"> About Us</a></li> <li> <a aria-label="Contact Us details" href="/contact-us/" onclick="return navigate(this)"> Contact Us</a></li> <li><a href="/contributors/" aria-label="Section508.gov site Contributors" onclick="return navigate(this)"> Contributors</a></li> </ul> </div> <div class="desktop:grid-col-3"> <p class="text-bold">Tools</p> <ul class="add-list-reset line-height-sans-6"> <li> <a href="/art/" aria-label="Accessibility Requirements Tool" onclick="return navigate(this)"> ART</a></li> <li> <a href="/buy/solicitation-review-tool" aria-label="Solicitation Review Tool" onclick="return navigate(this)"> SRT</a></li> <li> <a href="/content/guide-accessible-web-design-development" onclick="return navigate(this)"> Developer Guide</a></li> <li> <a href="https://digitaldashboard.gov/" target="_blank" onclick="return navigate(this)"> DigitalDashboard.gov</a></li> <li> <a href="https://analytics.usa.gov/" target="_blank" onclick="return navigate(this)"> Analytics.usa.gov</a></li> </ul> </div> <div class="desktop:grid-col-3"> <p class="text-bold">Resources</p> <ul class="add-list-reset line-height-sans-6"> <li> <a href="/content/glossary" aria-label="Glossary for Section508" onclick="return navigate(this)"> Glossary</a></li> <li> <a href="/website-policies" onclick="return navigate(this)"> Website Policies</a></li> <li> <a href="/tools/program-manager-listing/" onclick="return navigate(this)"> Find Your Section 508 Program Manager</a></li> <li><a href="/manage/join-the-508-community/" onclick="return navigate(this)">Join the Community(Listserv)</a></li> </ul> </div> </div> </div> </footer> <div class="usa-identifier"> <section class="usa-identifier__section usa-identifier__section--masthead" aria-label="Agency identifier," > <div class="usa-identifier__container"> <div class="usa-identifier__logos"> <a href="https://gsa.gov" class="usa-identifier__logo" onclick="return navigate(this)"> <img class="usa-identifier__logo-img" alt="General Services Administration Logo" src="/assets/images/logos/gsa-logo.png"> </a> </div> <div class="usa-identifier__identity"> <p class="usa-identifier__identity-domain">Section508.gov</p> <p class="usa-identifier__identity-disclaimer"> An official website of the <a href="https://www.gsa.gov/" onclick="return navigate(this)">General Services Administration</a> </p> </div> </div> </section> <nav class="usa-identifier__section usa-identifier__section--required-links" aria-label="Important links,," > <div class="usa-identifier__container"> <ul class="usa-identifier__required-links-list"> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/about-us" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">About GSA</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/website-information/accessibility-aids" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">Accessibility statement</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/reference/freedom-of-information-act-foia" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">FOIA requests</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">No FEAR Act data</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsaig.gov/" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">Office of the Inspector General</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/reference/reports/budget-performance" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">Performance reports</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/website-information/website-policies" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">Privacy policy</a> </li> <li class="usa-identifier__required-links-item"> <a href="/website-policies/#reuse-and-copyright" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">Reuse and Copyright</a> </li> </ul> </div> </nav> <section class="usa-identifier__section usa-identifier__section--usagov" aria-label="U.S. government information and services,," > <div class="usa-identifier__container"> <div class="usa-identifier__usagov-description"> Looking for U.S. government information and services? </div> <a href="https://www.usa.gov/" class="usa-link" onclick="return navigate(this)">Visit USA.gov</a> </div> </section> </div>  <script id="_fed_an_ua_tag" src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=GSA"></script> <script src="/assets/js/uswds.min.js?1732224641581990839"></script> <script src="/assets/js/app.js?1732224641581990839"></script> <script> $(document).ready(function(){ // Check if the user already dismissed alert banner if (window.localStorage.getItem('dismiss_alert')) { $('#alert_banner').hide(); } $("#dismiss_alert").click(function(){ // Save on LocalStorage window.localStorage.setItem('dismiss_alert', true); $('#alert_banner').hide(); }); }); </script> </body> </html>

CINXE.COM

Authoring Meaningful Alternative Text | Section508.gov