Accessibility Tutorial / en How to...Add Alt Text to Images /news/2021-12/how-toadd-alt-text-images <span>How to...Add Alt Text to Images</span> <span><span lang="" about="/user/406" typeof="schema:Person" property="schema:name" datatype="" xml:lang="">Kelly Hansen</span></span> <span>Mon, 12/13/2021 - 16:51</span> <div class="layout layout--gmu layout--twocol-section layout--twocol-section--70-30"> <div class="layout__region region-first"> <div data-block-plugin-id="field_block:node:news_release:body" class="block block-layout-builder block-field-blocknodenews-releasebody"> <div class="field field--name-body field--type-text-with-summary field--label-visually_hidden"> <div class="field__label visually-hidden">Body</div> <div class="field__item"><p><span class="intro-text">AV is committed to ensuring an inclusive digital experience. One essential practice to maintain accessibility is adding descriptive alt text to images.</span></p> <h4>What is Alt Text?</h4> <p>Alt text, or alternative text, is a brief description of an image that allows screen readers to convey the image’s content to users with visual impairments. It ensures that images are accessible to everyone, providing essential context for those who cannot see them. Alt text also improves SEO, as search engines favor pages that provide meaningful alt text for images.</p> <h4>Best Practices for Writing Alt Text</h4> <ul><li><strong>Be specific and relevant:</strong> Focus on what the image represents and its function within the content.</li> <li><strong>Be concise:</strong> Keep descriptions short but informative. Avoid overly detailed or redundant explanations.</li> <li><strong>Describe the purpose:</strong> If the image contains information not provided elsewhere, include that key information in the alt text.</li> <li><strong>Use context-appropriate language:</strong> Tailor the description to fit the surrounding content, avoiding technical jargon or irrelevant details.</li> <li><strong>Handle decorative images appropriately:</strong> If an image is purely decorative and doesn't add to the content, use null alt text (alt="") to signal screen readers to skip the image.</li> </ul><h4>Example of Alt Text in Action:</h4> <ul><li>For a photo of a tree: “A large oak tree with green leaves in summer.”</li> <li>For a chart: “A bar chart comparing enrollment data from 2022 and 2023, showing a 15% increase in enrollment.”</li> <li>For decorative images: Use empty alt text (alt="").</li> </ul><h4>SiteMasonry CMS – How to Add Alt Text to Images</h4> <p>SiteMasonry offers two main ways to add images: via the Featured Image block and by embedding images into a Text Block. Adding alt text ensures that images remain accessible and compliant with accessibility standards.</p> <h4>Adding Alt Text to a Featured Image</h4> <p>Featured images automatically prompt for alt text upon upload.</p> <ol><li>Navigate to your page and select the Featured Image block.</li> <li>Upload your image and enter a brief, descriptive alt text.</li> <li>Click Save to finalize.</li> </ol><h4>Adding Alt Text to an Embedded Image</h4> <p>Embedded images require manual entry of alt text.</p> <ol><li>Place your cursor in the text block where the image should appear.</li> <li>Use the Insert Media icon to upload or select an image.</li> <li>After inserting, click the Edit Media icon on the image.</li> <li>Add a descriptive alt text, then select alignment and size if needed.</li> <li>Click Save to apply the changes.</li> </ol><p> </p> <div class="align-center" style="min-width: 50%;"> <div class="field field--name-field-media-video-embed-field field--type-video-embed-field field--label-hidden field__item"><div class="video-embed-field-provider-youtube video-embed-field-responsive-video"><iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" src="https://www.youtube.com/embed/3B4PZQcdVns?autoplay=0&start=0&rel=0"></iframe> </div> </div> </div> <p> </p> </div> </div> </div> </div> <div class="layout__region region-second"> <div data-block-plugin-id="inline_block:text" data-inline-block-uuid="cf35e381-9a7f-4cd0-9206-63558650d698" class="block block-layout-builder block-inline-blocktext"> <h2>Additional Resources</h2> <div class="field field--name-body field--type-text-with-summary field--label-hidden field__item"><ul><li><a href="https://www.section508.gov/create/alternative-text/" title="Section508.gov - Article - Content Creation Authoring Meaningful Alternative Text ">Section508.gov - Article - Authoring Meaningful Alternative Text</a></li> <li><a href="https://ati.gmu.edu/web-accessibility/ictaccessibilitystandards/creating-accessible-images/" title="ATI.gmu.edu - Article - Creating Accessible Images">ATI.gmu.edu - Article - Creating Accessible Images</a></li> <li><a href="https://moz.com/learn/seo/alt-text" target="_blank" title="Moz.com - Article - Descriptive Alt Text Boosts SEO">Moz.com - Article - Descriptive Alt Text Boosts SEO</a></li> </ul></div> </div> <div data-block-plugin-id="inline_block:news_list" data-inline-block-uuid="46f4adf4-487d-4125-b033-f805592a28ef" class="block block-layout-builder block-inline-blocknews-list"> <h2>Related Tutorials</h2> <div class="views-element-container"><div class="view view-news view-id-news view-display-id-block_1 js-view-dom-id-ac4007982165b3a36d8bf60f0631e438f9be3bd46e5d7252abc92aff7e462518"> <div class="view-content"> <div class="news-list-wrapper"> <ul class="news-list"><li class="news-item"><div class="views-field views-field-title"><span class="field-content"><a href="/news/2021-12/how-toadd-alt-text-images" hreflang="en">How to...Add Alt Text to Images</a></span></div><div class="views-field views-field-field-publish-date"><div class="field-content">October 25, 2024</div></div></li> </ul></div> </div> </div> </div> </div> <div data-block-plugin-id="inline_block:text" data-inline-block-uuid="969dd210-65c7-49b1-bff0-a6de1d9ff945" class="block block-layout-builder block-inline-blocktext"> </div> <div data-block-plugin-id="field_block:node:news_release:field_content_topics" class="block block-layout-builder block-field-blocknodenews-releasefield-content-topics"> <h2>Topics</h2> <div class="field field--name-field-content-topics field--type-entity-reference field--label-visually_hidden"> <div class="field__label visually-hidden">Topics</div> <div class="field__items"> <div class="field__item"><a href="/taxonomy/term/14566" hreflang="en">Image Management Tutorial</a></div> <div class="field__item"><a href="/taxonomy/term/14571" hreflang="en">Accessibility Tutorial</a></div> <div class="field__item"><a href="/taxonomy/term/14576" hreflang="en">Best Practices Tutorial</a></div> <div class="field__item"><a href="/taxonomy/term/11526" hreflang="en">Content Hub</a></div> <div class="field__item"><a href="/taxonomy/term/16251" hreflang="en">SiteMasonry Tutorial</a></div> <div class="field__item"><a href="/taxonomy/term/6926" hreflang="en">SiteMasonry</a></div> <div class="field__item"><a href="/taxonomy/term/20441" hreflang="en">Digital Accessibility</a></div> </div> </div> </div> </div> </div> <div class="layout layout--gmu layout--twocol-section layout--twocol-section--30-70"> <div> </div> <div> </div> </div> Mon, 13 Dec 2021 21:51:40 +0000 Kelly Hansen 64041 at