{"id":10425,"date":"2021-01-13T12:13:15","date_gmt":"2021-01-13T17:13:15","guid":{"rendered":"https:\/\/www.med.unc.edu\/webguide\/?page_id=10425"},"modified":"2025-11-18T13:40:54","modified_gmt":"2025-11-18T18:40:54","slug":"alt-text","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/accessibility\/alt-text\/","title":{"rendered":"Images"},"content":{"rendered":"<p>Images play an important role in storytelling and user engagement, but they must also meet accessibility requirements. This page summarizes the essential accessibility practices for images on School of Medicine websites. For full instructions on adding, aligning, resizing, and managing images, see <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/media\/images\/how-to-add-an-image\/\"><span class=\"s1\"><b>How to Add an Image<\/b><\/span><\/a> in the User Guide.<\/p>\n<hr  style=\"margin:\u201c30\u201dpx 0\"class=\" \u201crule-thin\u201d osc-rule\" \/>\n<h2>Why Accessible Images Matter<\/h2>\n<ul>\n<li>Screen reader users rely on alt text to understand the image\u2019s purpose.<\/li>\n<li>When images fail to load, the alt text will display in it&#8217;s place. This ensures the content remains understandable to <strong>all<\/strong> site visitors.<\/li>\n<li>Accessible images improve <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/analytics-and-seo\/\">SEO<\/a> by helping search engines interpret your page.<\/li>\n<\/ul>\n<hr  style=\"margin:\u201c30\u201dpx 0\"class=\" \u201crule-thin\u201d osc-rule\" \/>\n<h2>Key Requirements for Accessible Images<\/h2>\n<h3>1. Provide Alt Text for <strong>All<\/strong> Meaningful Images<\/h3>\n<p>Alt text (alternative text) describes the <strong>context<\/strong> and <strong>purpose<\/strong> of an image, not just its appearance. <strong>It is required for all images that convey information or support nearby content<\/strong>.<\/p>\n<ul>\n<li>Example: \u201cStudents practicing clinical skills during a UNC School of Medicine lab session.\u201d<\/li>\n<li>Avoid vague or redundant alt text such as \u201cimage of students,\u201d \u201cphoto of,\u201d or \u201cdecorative.\u201d<\/li>\n<\/ul>\n<h3>2. Why Context Matters in Alt Text<\/h3>\n<p>The meaning of an image depends on its\u00a0<strong>context<\/strong> (how it is used). Alt text should reflect the image\u2019s purpose on the page and not describe everything visible in the image. Context ensures users understand why the image is relevant.<\/p>\n<p>Example of context-based alt text variations for the same image:<\/p>\n<ul>\n<li>On a clinical education page: \u201cStudent taking a patient\u2019s blood pressure during clinical training.\u201d<\/li>\n<li>On a research page: \u201cResearch assistant collecting patient data for a cardiovascular study.\u201d<\/li>\n<\/ul>\n<h3>3. Decorative Images Should Have Empty Alt Text<\/h3>\n<p>If the image adds no meaningful information, such as a divider, texture, or purely decorative graphic, leave the Alt Text field blank. This tells screen readers to skip it, reducing noise for users.<\/p>\n<h3>4. Images With Text<\/h3>\n<p><strong>Avoid images that contain text<\/strong>, since screen readers, search engines, and translation tools cannot interpret text embedded inside graphics.<\/p>\n<p>If an image does include text:<\/p>\n<ul>\n<li>Small amounts of text \u2192 include all the text in the alt text.<\/li>\n<li>Large amounts of text \u2192 provide the full text on the page, near the image. The alt text should briefly describe the purpose of the image and direct users to the full text description on the page.\n<ul>\n<li>Example: \u201cFlyer for World Thrombosis Day; full event details provided below.\u201d<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>5. Linked Images Must Describe the Link Destination<\/h3>\n<p>When an image is a link, the alt text must explain both the image\u2019s\u00a0<strong>context<\/strong>\u00a0and\u00a0<strong>link destination<\/strong>.<\/p>\n<h4>Examples<\/h4>\n<table class=\"table table-condensed table-bordered\">\n<thead>\n<tr>\n<th><b>Page Context<\/b><\/th>\n<th><b>Image<\/b><\/th>\n<th><b>Appropriate Alt Text<\/b><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Campus overview page<\/td>\n<td>Aerial view of the medical school<\/td>\n<td>\u201cAerial view of the UNC School of Medicine campus in Chapel Hill.\u201d<\/td>\n<\/tr>\n<tr>\n<td>Research news article<\/td>\n<td>Scientist working with lab equipment<\/td>\n<td>\u201cDr. Smith prepares tissue samples for cancer research study.\u201d<\/td>\n<\/tr>\n<tr>\n<td>Student recruitment page<\/td>\n<td>Students studying in a lounge<\/td>\n<td>\u201cFirst-year medical students collaborating in a study area.\u201d<\/td>\n<\/tr>\n<tr>\n<td>Event recap post<\/td>\n<td>Speaker at a podium<\/td>\n<td>\u201cDean Burks addressing attendees at the 2025 Research Symposium.\u201d<\/td>\n<\/tr>\n<tr>\n<td>Faculty profile page<\/td>\n<td>Portrait of Dr. Garcia<\/td>\n<td>\u201cDr. Elena Garcia, Associate Professor of Neurology.\u201d<\/td>\n<\/tr>\n<tr>\n<td>Fundraising announcement<\/td>\n<td>Donor and student shaking hands<\/td>\n<td>\u201cAlumni donor Michael Lee congratulates scholarship recipient Jasmine Carter.\u201d<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Other Examples<\/h4>\n<p>The following websites provide some great alt text examples:<\/p>\n<ul>\n<li><a href=\"https:\/\/accessibility.huit.harvard.edu\/describe-content-images\">Harvard\u2019s Digital Accessibility<\/a><\/li>\n<li><a href=\"https:\/\/it.wisc.edu\/news\/how-to-write-effective-alt-text-for-web-images\/\">IT at UW-Madison<\/a><\/li>\n<li><a href=\"https:\/\/webaim.org\/techniques\/alttext\/#context\">WebAIM<\/a><\/li>\n<\/ul>\n<h3>6. Optimize Images<\/h3>\n<p>Optimizing images improves page load speed, mobile performance, and <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/analytics-and-seo\/\">SEO<\/a>. Before uploading:<\/p>\n<ul>\n<li><strong>Crop and resize<\/strong> images to reduce file size.<\/li>\n<li><strong>Image sizing<\/strong>:\n<ul>\n<li>Images in\u00a0<strong>full-width sections<\/strong>:\u00a0<strong>2,000 \u2013 3,000 pixels wide<\/strong>\u00a0and\u00a0<strong>under 800 KB<\/strong>.<\/li>\n<li>Images in the\u00a0<strong>body content<\/strong>\u00a0area:\u00a0<strong>under 900 pixels wide<\/strong>\u00a0and\u00a0<strong>300 KB or less<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<li>Rename files using short, descriptive names (e.g., anatomy-lab-2025.jpg instead of IMG_1234.jpg).<\/li>\n<\/ul>\n<hr  style=\"margin:\u201c30\u201dpx 0\"class=\" \u201crule-thin\u201d osc-rule\" \/>\n<h2>Continue to the Full How-To<\/h2>\n<p>For detailed steps on adding images, resizing them, editing captions, and more, see our\u00a0<a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/media\/images\/how-to-add-an-image\/\">How to Add an Image<\/a> documentation.<\/p>\n<hr  style=\"margin:30px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Related Accessibility Videos<\/h2>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/CizNbSuRRew\" title=\"Improving Image Accessibility with Alt Text\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" 0=\"allowfullscreen\" scrolling=\"yes\" class=\"iframe-class\"><\/iframe>\n\n<h3 style=\"text-align: center;\">Improving Image Accessibility with Alt Text<\/h3>\n<p style=\"text-align: center;\">Learn what alt text is and when to use it or omit it.<br \/>\n4 min. 20 sec.<\/p>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/iyzPK-Mz_CY\" title=\"Writing Effective and Accessible Alt Text\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" 0=\"allowfullscreen\" scrolling=\"yes\" class=\"iframe-class\"><\/iframe>\n\n<h3 style=\"text-align: center;\">Writing Effective and Accessible Alt Text<\/h3>\n<p style=\"text-align: center;\">Learn how to write alt text for more complex image use, such as charts, graphs, and image links.<br \/>\n4 min. 12 sec.<\/p>\n<\/div>\n<\/div>\n<hr  style=\"margin:30px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Resources<\/h2>\n<ul>\n<li><a href=\"https:\/\/axesslab.com\/alt-texts\/\">Alt-texts: The Ultimate Guide<\/a> &#8211; learn from a vision impaired web developer the best practices for alt text.<\/li>\n<li><a href=\"https:\/\/webaim.org\/techniques\/alttext\/#functional\" data-et-has-event-already=\"true\">WebAIM Alternative Text<\/a> &#8211;\u00a0WebAIM illustrates quality alternative text and can help you determine the content and function of an image.<\/li>\n<li><a href=\"http:\/\/webaim.org\/techniques\/images\/\">WebAIM\u2019s Tutorial on Creating Accessible Images<\/a><\/li>\n<li><a href=\"http:\/\/www.w3.org\/WAI\/tutorials\/images\/\">W3C Image Concepts<\/a> &#8211; documentation on how to provide appropriate text alternatives for images.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Images play an important role in storytelling and user engagement, but they must also meet accessibility requirements. This page summarizes the essential accessibility practices for images on School of Medicine websites. For full instructions on adding, aligning, resizing, and managing images, see How to Add an Image in the User Guide. Why Accessible Images Matter &hellip; <a href=\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/alt-text\/\" aria-label=\"Read more about Images\">Read more<\/a><\/p>\n","protected":false},"author":3206,"featured_media":0,"parent":9092,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-10425","page","type-page","status-publish","hentry","odd"],"acf":[],"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/10425","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/users\/3206"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/comments?post=10425"}],"version-history":[{"count":3,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/10425\/revisions"}],"predecessor-version":[{"id":14957,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/10425\/revisions\/14957"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/9092"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/media?parent=10425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}