{"id":65608,"date":"2023-09-14T10:00:16","date_gmt":"2023-09-14T14:00:16","guid":{"rendered":"https:\/\/venngage.com\/blog\/?p=65608"},"modified":"2026-01-05T06:41:35","modified_gmt":"2026-01-05T11:41:35","slug":"image-alt-text","status":"publish","type":"post","link":"https:\/\/venngage.com\/blog\/image-alt-text\/","title":{"rendered":"Image Alt Text: Definition and Best Practices for Accessible Designs"},"content":{"rendered":"<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/venngage.com\/templates\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"576\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Image_Alt_Text_Blog_Header.png\" alt=\"image alt text\" class=\"wp-image-65628\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Image_Alt_Text_Blog_Header.png 1024w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Image_Alt_Text_Blog_Header-300x169.png 300w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Image_Alt_Text_Blog_Header-768x432.png 768w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Image_Alt_Text_Blog_Header-730x411.png 730w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n\n\n<p>Looking to make your designs, documents or web pages accessible, inclusive and user-friendly? <\/p>\n\n\n\n<p>If so, you need to get familiar with alt text. This tactic is one of the most effective ways to make visual content accessible to all types of users, including those living with disabilities. <\/p>\n\n\n\n<p>In this guide, I\u2019ll explain what is alt text and how you can use it to make visual content accessible. Plus, I&#8217;ll share best practices for writing image alt text and show you examples, templates and tools you can use.<\/p>\n\n\n\n<center><a href=\"https:\/\/venngage.com\/features\/accessible\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-cta\"><b>START CREATING FOR FREE<\/b><\/button><\/a><\/center>&nbsp;\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what\"><strong>What is alt text?&nbsp;<\/strong><\/h2>\n\n\n\n<p>Alt text, also known as alternative text, alt tags, alt descriptions or alt attributes, <strong>is the use of text to describe the function or appearance of non-text elements like icons, charts, and images.<\/strong><\/p>\n\n\n\n<p>Here&#8217;s an example:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Venngage-3-1024x1024.png\" alt=\"what is image alt text\" class=\"wp-image-76236\" width=\"768\" height=\"768\" style=\"box-shadow: 0 1px 4px 0 rgb(0 0 0 \/ 10%), 0 0 6px 0 rgb(0 0 0 \/ 10%), 0 2px 2px -2px rgb(0 0 0 \/ 15%);\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Venngage-3-1024x1024.png 1024w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Venngage-3-300x300.png 300w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Venngage-3-150x150.png 150w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Venngage-3-768x768.png 768w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Venngage-3-1536x1536.png 1536w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Venngage-3-2048x2048.png 2048w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Venngage-3-730x730.png 730w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure><\/div>\n\n\n<p>Alt text is one of the pillars of&nbsp;<a href=\"https:\/\/venngage.com\/blog\/accessible-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">accessible design<\/a>. <\/p>\n\n\n\n<p>It allows people living with disabilities (or those with different access needs) to understand a visual on a screen reader or other accessibility tools.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>Did you know Venngage lets you add alt text to visuals in a few clicks? Check out our <a href=\"https:\/\/venngage.com\/features\/accessible-design\" target=\"_blank\" rel=\"noreferrer noopener\">Accessibility Design Tool<\/a> which has all accessibility features you need baked in to create WCAG compliant designs! <\/p>\n<\/blockquote>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/image-alt-text.gif\"><img decoding=\"async\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/image-alt-text.gif\" alt=\"GIF of image alt text \" class=\"wp-image-65688\" width=\"500\"\/><\/a><\/figure><\/div>\n\n\n<p>Alt text descriptions also appear instead of an image if it fails to load. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/image-alt-text-HTML-.png\" alt=\"\" class=\"wp-image-65657\" width=\"400\" height=\"502\"\/><\/figure><\/div>\n\n\n<p>Besides helping people make sense of non-text elements,  alt text ensures content is consumed in a logical fashion. <\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>Want a design tool that has accessibility features baked in? Look no further than <a href=\"https:\/\/venngage.com\/features\/accessible-design\" target=\"_blank\" rel=\"noreferrer noopener\">Venngage&#8217;s Accessibility Tool<\/a>. With Venngage, you can set alt text in a few clicks, check color contrasts of designs and much more!<\/p>\n<\/blockquote>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why\"><strong>Why is alt text important?<\/strong><\/h2>\n\n\n\n<p>Image alt text is important because it provides people living with disabilities an alternate way to consume visual content.  <\/p>\n\n\n\n<p>To be more specific, image alt text matters for three reasons: <\/p>\n\n\n\n<ul>\n<li>Improves accessibility<\/li>\n\n\n\n<li>Improves user experience<\/li>\n\n\n\n<li>Boosts image search traffic<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Improves accessibility <\/h3>\n\n\n\n<p>Think of all the critical information <a href=\"https:\/\/venngage.com\/blog\/visual-communication\/\" target=\"_blank\" rel=\"noreferrer noopener\">visuals communicate<\/a>. <\/p>\n\n\n\n<p>Imagine what it would be like to try to understand or learn something with no visual clues or alt text for visuals.<\/p>\n\n\n\n<p>People living with normal vision often take this for granted and this is why&nbsp;<a href=\"https:\/\/www.w3.org\/TR\/WCAG20-TECHS\/H37.html\" target=\"_blank\" rel=\"noreferrer noopener\">Web Content Accessibility Guidelines (WCAG) 2.2 AA<\/a>&nbsp;mandate the use of alt text.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-pullquote\"><blockquote><p><strong><em>Did you know?<\/em><\/strong><em>&nbsp;The&nbsp;<\/em><a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>WCAG 2.2<\/em><\/a><em>&nbsp;is a document that defines accessibility standards and provides instructions for making digital content \u2014 such as&nbsp;<\/em><a href=\"https:\/\/venngage.com\/blog\/accessible-colors\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>colors<\/em><\/a><em>&nbsp;and&nbsp;<\/em><a href=\"https:\/\/venngage.com\/blog\/accessible-fonts\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>fonts<\/em><\/a><em>&nbsp;\u2014 accessible to people with sensory impairments.&nbsp;<\/em><\/p><\/blockquote><\/figure>\n\n\n\n<p><strong>Related: <a href=\"https:\/\/venngage.com\/blog\/ada-standards-for-accessible-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">ADA Standards for Accessible Design: How to Be Compliant<\/a><\/strong><\/p>\n\n\n\n<p>Without alt text,&nbsp;<a href=\"https:\/\/www.iapb.org\/learn\/vision-atlas\/\">1.1 billion <\/a>people living with vision loss would lose out on the contextual and descriptive information images provide. <\/p>\n\n\n\n<p>And that\u2019s not counting the millions more living with other disabilities who would benefit from accessible design choices!&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/venngage.com\/blog\/accessible-design\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/image-alt-text-1.png\" alt=\"image alt text\" class=\"wp-image-65610\" width=\"500\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/image-alt-text-1.png 1400w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/image-alt-text-1-300x203.png 300w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/image-alt-text-1-1024x691.png 1024w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/image-alt-text-1-768x518.png 768w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/image-alt-text-1-730x493.png 730w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><\/a><\/figure><\/div>\n\n\n<p>So to create <a href=\"https:\/\/venngage.com\/blog\/inclusive-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">inclusive designs<\/a> capable of communicating meaning effectively to everyone, you need to set alt text to visual content.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Improves user experience<\/strong><\/h3>\n\n\n\n<p>Even people with normal vision benefit from image alt text, so it&#8217;s not just important to make designs accessible but improve user experience.<\/p>\n\n\n\n<p>For example, if someone has a poor internet connection and an image fails to load,  alt img tags ensure they&#8217;ll still be able to understand the image. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/alt-text-image-display-settings-.png\"><img decoding=\"async\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/alt-text-image-display-settings-.png\" alt=\"Chrome settings for image display.\" class=\"wp-image-65649\" width=\"500\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/alt-text-image-display-settings-.png 862w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/alt-text-image-display-settings--300x129.png 300w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/alt-text-image-display-settings--768x331.png 768w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/alt-text-image-display-settings--730x315.png 730w\" sizes=\"(max-width: 862px) 100vw, 862px\" \/><\/a><\/figure><\/div>\n\n\n<p>Image alt text is also helpful to people living with sensory or cognitive processing disabilities. <\/p>\n\n\n\n<p>It&#8217;s also not uncommon for some people to use accessibility tools or turn off image loading to minimize distractions.&nbsp;<\/p>\n\n\n\n<p>So by prioritizing accessibility, your designs can effectively reach everyone.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote has-text-align-center\">\n<p><em><strong>Did you know?<\/strong> Venngage offers a <a href=\"https:\/\/venngage.com\/pdf-checker\" target=\"_blank\" rel=\"noreferrer noopener\">free PDF accessibility checker<\/a> that helps you ensure your documents meet essential accessibility standards? With this handy tool, you can quickly identify and fix potential barriers, making your PDFs more inclusive for all users!<\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Improves image SEO<\/strong><\/h3>\n\n\n\n<p>Looking to drive organic traffic to a website?<\/p>\n\n\n\n<p>If so, you need to provide image alt text. Google\u2019s search engine algorithm uses alt tags to understand, index and rank content.<\/p>\n\n\n\n<p>Think this only applies to Image Searches? <\/p>\n\n\n\n<p>Not quite. <\/p>\n\n\n\n<p>Since Google&nbsp;<em>knows<\/em>&nbsp;<a href=\"https:\/\/venngage.com\/blog\/visual-content-marketing-statistics\/\" target=\"_blank\" rel=\"noreferrer noopener\">how engaging visuals are<\/a>, its search engine prioritizes them by displaying image packs (i.e. horizontal rows of linked images)&nbsp;on the first page.&nbsp;<\/p>\n\n\n\n<p>For example, if I search for <a href=\"https:\/\/venngage.com\/templates\/posters\" target=\"_blank\" rel=\"noreferrer noopener\">poster templates<\/a> on Google, images of Venngage templates show up directly below the blog post&nbsp;\u2014 an enticing visual display made possible by image alt text. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"441\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/poster-template-1-1024x441.png\" alt=\"poster templates google serp result\" class=\"wp-image-76199\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/poster-template-1-1024x441.png 1024w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/poster-template-1-300x129.png 300w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/poster-template-1-768x331.png 768w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/poster-template-1-1536x662.png 1536w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/poster-template-1-730x315.png 730w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/poster-template-1.png 1606w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>By adding alt tags, you&#8217;ll be doing yourself, your site and the search engines a solid.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how\"><strong>How to write alt text (best practices) <\/strong><\/h2>\n\n\n\n<p>How to write image alt text is a question that comes up often. <\/p>\n\n\n\n<p>The easiest way to write good image alt text is to pretend you need to <strong>describe an image to someone over the phone<\/strong>. <\/p>\n\n\n\n<p>Ask yourself what do they need to know about the visual? What context could aid their understanding? <\/p>\n\n\n\n<p>In other words, the alt text should provide information that\u2019s:&nbsp;<\/p>\n\n\n\n<ul>\n<li>functional`<\/li>\n\n\n\n<li>informative<\/li>\n\n\n\n<li>contextual<\/li>\n\n\n\n<li>focused<\/li>\n<\/ul>\n\n\n\n<p>Remember your primary job is to describe the <strong>1) content<\/strong>&nbsp;and provide&nbsp;<strong>2) context&nbsp;<\/strong>in a concise manner. <\/p>\n\n\n\n<p>Your alt description \u2014 and the amount of details it covers \u2014 will change based on where a visual appears and its purpose in your design.&nbsp;<\/p>\n\n\n\n<p>Consider the following image:&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/image-alt-text.jpg\" alt=\"A stack of pancakes topped with fresh fruit, whipped cream and maple syrup.\" class=\"wp-image-65613\" width=\"700\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/image-alt-text.jpg 1999w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/image-alt-text-300x206.jpg 300w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/image-alt-text-1024x704.jpg 1024w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/image-alt-text-768x528.jpg 768w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/image-alt-text-1536x1056.jpg 1536w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/image-alt-text-730x502.jpg 730w\" sizes=\"(max-width: 1999px) 100vw, 1999px\" \/><\/figure><\/div>\n\n\n<p>Depending on the context of where it appears, the image will be described differently. <\/p>\n\n\n\n<p>For example, let&#8217;s imagine a few scenarios of how alt text for this image may vary:<\/p>\n\n\n\n<ul>\n<li><strong>On a webpage with a recipe for this dish<\/strong>. In this case, the alt text should identify the dish by name, describe its components, and how it looks (e.g. &#8220;<em>A stack of three pancakes drizzled with maple syrup, topped with a whole strawberry, two blueberries and a dollop of whipped cream on a round blue plate<\/em>\u201d).<\/li>\n\n\n\n<li>I<strong>n an ad for a diner<\/strong>.  In this scenario, you\u2019d need to include information about the restaurant, the dish name, and details about its appearance and components (e.g.&nbsp;<em>Egg &amp; Co\u2019s Pancake Special featuring a stack of three griddle pancakes drizzled with maple syrup and topped with fresh blueberries, strawberries and a dollop of whipped cream on a round blue plate<\/em>).<\/li>\n\n\n\n<li><strong>On a branded website advertising artisanal flour<\/strong>. Here, your alt text should include a more focused description of the product for sale (e.g.&nbsp;<em>&#8220;A stack of&nbsp;pancakes made with stone-ground cracked wheat flour are drizzled with maple syrup and topped with fresh fruit and whipped cream\u201d).<\/em><\/li>\n<\/ul>\n\n\n\n<p>So far, so good? Let&#8217;s get into the particulars&#8230;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"pure\"><strong>Pure text images<\/strong><\/h3>\n\n\n\n<p>Because images of text are a potential barrier to accessibility, it&#8217;s always better to use actual text (rather than an image of text) when including important information in a design.&nbsp;<\/p>\n\n\n\n<p>If you&nbsp;<em>are<\/em>&nbsp;using an image of text, write the alt text as it appears.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/image-alt-text-4.png\" alt=\"Pure text image.\" class=\"wp-image-65614\" width=\"700\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/image-alt-text-4.png 781w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/image-alt-text-4-300x58.png 300w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/image-alt-text-4-768x148.png 768w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/image-alt-text-4-730x140.png 730w\" sizes=\"(max-width: 781px) 100vw, 781px\" \/><\/figure><\/div>\n\n\n<p>For example, the image of the &#8220;informational&#8221; block above should also have alt text that repeats the same text.&nbsp;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>&#8220;<em>Writing alt text? Ensure that any images of text are transcribed exactly as they appear. No need to include &#8220;An image of text that reads&#8230;&#8221;; a screen reader will automatically identify the element as an image.<\/em>&#8220;<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"charts\"><strong>Charts<\/strong><\/h3>\n\n\n\n<p>Some visuals contain large amounts of data. <\/p>\n\n\n\n<p>WCAG defines these as&nbsp;<a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/complex\/\">complex images<\/a> and includes <a href=\"https:\/\/venngage.com\/blog\/data-visualization-infographic\/\">data visualization infographics<\/a>, charts, graphs, tables, and maps.  <\/p>\n\n\n\n<p>Here&#8217;s an example of a complex image: <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/venngage.com\/templates\/charts\/donut-chart-marketing-stats-template-7e90242e-ff3b-4303-816f-d262e8ea2e23\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Donut-Chart-Marketing-Stats-Template.png\" alt=\"Donut chart marketing stats template. \" class=\"wp-image-65615\" width=\"700\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Donut-Chart-Marketing-Stats-Template.png 816w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Donut-Chart-Marketing-Stats-Template-300x287.png 300w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Donut-Chart-Marketing-Stats-Template-768x734.png 768w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Donut-Chart-Marketing-Stats-Template-730x698.png 730w\" sizes=\"(max-width: 816px) 100vw, 816px\" \/><\/a><\/figure><\/div>\n\n\n<center><a href=\"https:\/\/venngage.com\/templates\/charts\/donut-chart-marketing-stats-template-7e90242e-ff3b-4303-816f-d262e8ea2e23\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-cta\"><b>CREATE THIS TEMPLATE<\/b><\/button><\/a><\/center>&nbsp;\n\n\n\n<p>For people just learning about alt text, these <a href=\"https:\/\/venngage.com\/blog\/types-of-data-visualization\/\" target=\"_blank\" rel=\"noreferrer noopener\">types of data visualizations<\/a> can be confusing. <\/p>\n\n\n\n<p>But there&#8217;s no need to get overwhelmed. Just let the context determine the level of detail to include in your alt text. &nbsp;<\/p>\n\n\n\n<p><strong>Image alt text for charts and graphs<\/strong><\/p>\n\n\n\n<p>Let&#8217;s say you have this flowchart in your design.  <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/venngage.com\/templates\/diagrams\/teal-real-estate-flowchart-f94225fc-5787-4b52-9ef6-1ae19cf47851\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Teal-Real-Estate-Flowchart-Template.png\" alt=\"A flowchart titled 'Should You Rent or Buy?\" class=\"wp-image-65616\" width=\"700\" style=\"box-shadow: 0 1px 4px 0 rgb(0 0 0 \/ 10%), 0 0 6px 0 rgb(0 0 0 \/ 10%), 0 2px 2px -2px rgb(0 0 0 \/ 15%);\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Teal-Real-Estate-Flowchart-Template.png 816w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Teal-Real-Estate-Flowchart-Template-232x300.png 232w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Teal-Real-Estate-Flowchart-Template-791x1024.png 791w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Teal-Real-Estate-Flowchart-Template-768x994.png 768w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Teal-Real-Estate-Flowchart-Template-730x945.png 730w\" sizes=\"(max-width: 816px) 100vw, 816px\" \/><\/a><\/figure><\/div>\n\n\n\n<center><a href=\"https:\/\/venngage.com\/templates\/diagrams\/teal-real-estate-flowchart-f94225fc-5787-4b52-9ef6-1ae19cf47851\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-cta\"><b>CREATE THIS TEMPLATE<\/b><\/button><\/a><\/center>&nbsp;\n\n\n\n<p>Do you need to include every single word to create accessible alt text?<\/p>\n\n\n\n<p>Not necessarily. <\/p>\n\n\n\n<p>In this article, the graphic is an example of a complex image so it\u2019s not necessary to have the alt text describe everything. <\/p>\n\n\n\n<p>This is called short alt text. <\/p>\n\n\n\n<p><strong>Short alt text provides a simple description of visual elements that display complex information.<\/strong> <\/p>\n\n\n\n<p>Use short alt text when you want to tell the reader&nbsp;<em>what<\/em> a piece of visual content and don&#8217;t need them to understand the finer details.&nbsp;<\/p>\n\n\n\n<p>In the example above, the short alt text might read: &#8220;A flowchart titled &#8216;Should You Rent or Buy?'&#8221;<\/p>\n\n\n\n<p>However, if this image was used in an article about the pros and cons of owning properties, a descriptive alt text would be necessary. <\/p>\n\n\n\n<p>This is known as long alt text. <strong>Long alt text provides&nbsp;all the details&nbsp;necessary for a person living with a disability to understand the <em>entire<\/em> information included in visual content<\/strong>.<\/p>\n\n\n\n<p>A long alt text for this image might look like:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>&#8220;Flowchart titled &#8216;Should You Rent or Buy?&#8217; The starting box contains the question &#8216;Are you planning to stay for more than 5 years?&#8217;, with two subsequent boxes: &#8216;Are you are a financially stable position?&#8217; and &#8216;Can your budget handle mortgage, taxes, maintenance and other costs?&#8217; Possible answers to all questions are either &#8216;yes&#8217; and &#8216;no&#8217;; all flows end in a box either marked &#8216;Rent&#8217; or &#8216;Buy&#8217;. Flows ending in &#8216;Rent&#8217;: 1. Are you planning to stay for more than 5 years? Yes; Are you at a financially stable position? No. 2. Are you planning to stay for more than 5 years? No; Can your budget handle mortgage, etc.? No. 3. Are you planning to stay for more than 5 years? Yes; Are you at a financially stable position? Yes; Can your budget handle mortgage, etc.? No. Flows ending in &#8216;Buy&#8217;: 1. Are you planning to stay for more than 5 years? Yes; Are you at a financially stable position? Yes; Can your budget handle mortgage, etc.? Yes. 2. Are you planning to stay for more than 5 years? No; Can your budget handle mortgage, etc.? Yes.&#8221;<\/p>\n<\/blockquote>\n\n\n\n<p>As you can see (err, read),<strong> <\/strong>these descriptions can get&#8230;well&#8230;&nbsp;<strong><em>long<\/em><\/strong> so try to be as succinct as possible.<\/p>\n\n\n\n<p>Let\u2019s take a look at another example.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/venngage.com\/blog\/marketing-data-storytelling-benchmark\/\"><img decoding=\"async\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/image-alt-text-5.png\" alt=\"A bar chart graphic titled 'Marketers create data visualizations regularly'.\" class=\"wp-image-65617\" width=\"700\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/image-alt-text-5.png 816w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/image-alt-text-5-300x224.png 300w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/image-alt-text-5-768x574.png 768w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/image-alt-text-5-730x546.png 730w\" sizes=\"(max-width: 816px) 100vw, 816px\" \/><\/a><\/figure><\/div>\n\n\n<center><a href=\"https:\/\/infograph.venngage.com\/templates\/charts\/bar\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-cta\"><b>CREATE THIS TEMPLATE<\/b><\/button><\/a><\/center>&nbsp;\n\n\n\n<p>In this bar chart comparing the frequency with which marketers create data visualizations, the long alt text description should include the data and any meaningful context relating to what the chart represents.<\/p>\n\n\n\n<p>A good long alt text description might read something like this:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>&#8220;A bar chart titled &#8216;Marketers create data visualizations regularly&#8217;. Most (48% of) marketers create data visualizations every week. Next is 37% of marketers, creating every month. The second lowest is 10% of marketers creating every few months; and only 5% of marketers create once or twice a year.&#8221;<\/p>\n<\/blockquote>\n\n\n\n<p id=\"infographics\"><strong>Image alt text for infographics<\/strong><\/p>\n\n\n\n<p>Infographics are another example of a complex image because they can include <em>all <\/em>of the above. <\/p>\n\n\n\n<p>But what does that mean when it comes to alt text? <\/p>\n\n\n\n<p>Again, it depends on the context. Let&#8217;s use the infographic below as an example. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/venngage.com\/templates\/infographics\/heart-infographic-2cd80a37-0176-4849-9232-31355c8cb5ea\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Heart-Infographic.png\" alt=\"Infographic template titled'How the Heart works'.\n\" class=\"wp-image-65618\" width=\"700\" style=\"box-shadow: 0 1px 4px 0 rgb(0 0 0 \/ 10%), 0 0 6px 0 rgb(0 0 0 \/ 10%), 0 2px 2px -2px rgb(0 0 0 \/ 15%);\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Heart-Infographic.png 816w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Heart-Infographic-232x300.png 232w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Heart-Infographic-791x1024.png 791w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Heart-Infographic-768x994.png 768w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Heart-Infographic-730x945.png 730w\" sizes=\"(max-width: 816px) 100vw, 816px\" \/><\/a><\/figure><\/div>\n\n\n\n<center><a href=\"https:\/\/venngage.com\/templates\/infographics\/heart-infographic-2cd80a37-0176-4849-9232-31355c8cb5ea\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-cta\"><b>CREATE THIS TEMPLATE<\/b><\/button><\/a><\/center>&nbsp;\n\n\n\n<p>To write infographic alt text, the first step is to define the context. Here, it serves the purpose of showing an example of how to write alt text, so we can get away with using short alt text (i.e. &#8220;Infographic template titled &#8216;How the Heart Works'&#8221;). <\/p>\n\n\n\n<p>However, if this image was a PNG file in a blog about cardiovascular disease, you&#8217;d need to write long alt text that describes every component. <\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>&#8220;Infographic titled &#8216;How the Heart Works&#8217;. In order for the heart to function properly, the four chambers of the heart and valves must operate in a highly-organized manner. Highly organized contractions of the four valves allow the heart to pump blood in a regular way. The circulatory system of the human body is attached to the heart and color-coded in red and blue. The Right side of the heart is blue and contains the Right Atrium above the Right Ventricle, and between them is the Tricuspid Valve. The left side of the heart is in red and contains the Left Atrium above the Left Ventricle&#8230;&#8221; etc. <\/p>\n<\/blockquote>\n\n\n\n<p><strong>Note that the long alt text description includes the text content in this scenario <em>because<\/em> its shown an image file <\/strong>within a blog. <strong>If your infographic is a PDF or HTML file, you don&#8217;t have to re-write text<\/strong>! <br><\/p>\n\n\n\n<p><meta charset=\"utf-8\">Still, it&#8217;s tedious. I get it. But&#8230;there&#8217;s a solution!<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/help.venngage.com\/en\/articles\/6602675-tag-and-add-alt-text-to-elements-in-your-design\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/venngage-accessible-editor-image-alt-text.gif\" alt=\"Venngage accessible editor alt text\" class=\"wp-image-65685\" width=\"700\"style=\"box-shadow: 0 1px 4px 0 rgb(0 0 0 \/ 10%), 0 0 6px 0 rgb(0 0 0 \/ 10%), 0 2px 2px -2px rgb(0 0 0 \/ 15%);\"\/><\/a><\/figure><\/div>\n\n\n\n<p>With Venngage&#8217;s Accessible editor (available for <a href=\"https:\/\/venngage.com\/pricing\">paid plans<\/a> currently), you can create your own <a href=\"https:\/\/venngage.com\/blog\/accessible-infographics\/\" target=\"_blank\" rel=\"noreferrer noopener\">accessible infographics<\/a> (or any other visual, for that matter) in minutes, <em>and<\/em> streamline the image alt tagging process to boot. <\/p>\n\n\n\n<p>All images within your design get an alt text description field, so you don&#8217;t need to worry about adding them manually. The editor also automatically labels icons as decorative to save you time, and a built-in accessibility checker ensures everything \u2014 from your <a href=\"https:\/\/venngage.com\/blog\/color-blind-friendly-palette\/\" target=\"_blank\" rel=\"noreferrer noopener\">color palettes<\/a>, to your title tags \u2014 are up to code.<\/p>\n\n\n\n<p><em>Accessibility, check!<\/em><\/p>\n\n\n\n<center><a href=\"https:\/\/infograph.venngage.com\/register\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-cta\"><b>SIGN UP NOW<\/b><\/button><\/a><\/center>&nbsp;\n\n\n\n<p><strong>Related: <a href=\"https:\/\/help.venngage.com\/en\/articles\/6602675-tag-and-add-alt-text-to-elements-in-your-design\" target=\"_blank\" rel=\"noreferrer noopener\">Learn how to tag and add alt text to elements in your design<\/a> <\/strong><\/p>\n\n\n\n\n\n<h3 class=\"wp-block-heading\" id=\"tips\">Alt text tips <\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"do\"><strong>Be concise and use plain language<\/strong><\/h4>\n\n\n\n<p>This is not the time for long-winded sentences and flowery descriptions! Be as straightforward as possible to accurately describe what you\u2019re seeing.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/venngage.com\/templates\/posters\/ukraine-world-peace-poster-afed6b83-5ee5-4736-9467-5bcf931e196e\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" loading=\"lazy\" width=\"791\" height=\"1024\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/ukraine-peace-poster-791x1024.png\" alt=\"Ukraine World Peace Poster\" class=\"wp-image-76218\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/ukraine-peace-poster-791x1024.png 791w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/ukraine-peace-poster-232x300.png 232w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/ukraine-peace-poster-768x994.png 768w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/ukraine-peace-poster-730x945.png 730w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/ukraine-peace-poster.png 816w\" sizes=\"(max-width: 791px) 100vw, 791px\" \/><\/a><\/figure><\/div>\n\n\n<center><a href=\"https:\/\/venngage.com\/templates\/posters\/ukraine-world-peace-poster-afed6b83-5ee5-4736-9467-5bcf931e196e\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-cta\"><b>CREATE THIS ACCESSIBLE POSTER<\/b><\/button><\/a><\/center>&nbsp;\n\n\n\n<p>For example, the alt text for this&nbsp;<a href=\"https:\/\/venngage.com\/templates\/posters\/ukraine-world-peace-poster-afed6b83-5ee5-4736-9467-5bcf931e196e\" target=\"_blank\" rel=\"noreferrer noopener\">poster template<\/a> does not need to go in-depth about the heart or peace symbol. <\/p>\n\n\n\n<p>Since the purpose of the poster is to promote peace, a good alt text can be brief. For example, you could say something like:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u201cHeart and peace symbol illustrations to promote peace and stop the war in Ukraine.&#8221;<\/p>\n<\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"be\"><strong>Be mindful of grammar and spelling<\/strong><\/h4>\n\n\n\n<p>You can enhance the screen reader experience by writing in complete sentences and using proper grammar. <\/p>\n\n\n\n<p>That means\u2026<\/p>\n\n\n\n<ul>\n<li>capitalizing the first letter in a sentence<\/li>\n\n\n\n<li>ending sentences with a period&nbsp;<\/li>\n\n\n\n<li>avoiding abbreviations&nbsp;<\/li>\n\n\n\n<li>using correct spelling<\/li>\n\n\n\n<li><\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"test\"><strong>Test things out when in doubt<\/strong><\/h4>\n\n\n\n<p>Unsure whether your image alt text is sufficient? <\/p>\n\n\n\n<p>Use a screen reader (or another accessibility application, such as <a href=\"https:\/\/venngage.com\/features\/accessible-design\" target=\"_blank\" rel=\"noreferrer noopener\">Venngage&#8217;s Accessible Design Tool<\/a>) to test your alt text and make sure it\u2019s an accurate, succinct description.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"dont\"><strong>Don&#8217;t start alt text with redundant phrases&nbsp;<\/strong><\/h4>\n\n\n\n<p>Adding descriptions like \u201cImage\/Picture of ___\u201d is unnecessary (read: annoying) as screen readers will automatically announce an image as such.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"making\"><strong>Don&#8217;t make assumptions<\/strong><\/h4>\n\n\n\n<p>Describe, don\u2019t editorialize. <\/p>\n\n\n\n<p>Unless it\u2019s necessary to add helpful context, making assumptions and inferences is unhelpful.&nbsp;Also, avoid guessing things like ethnicity, gender or what&#8217;s happening out-of-shot.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Don&#8217;t go keyword crazy<\/strong><\/h4>\n\n\n\n<p>While alt text&nbsp;<em>can<\/em>&nbsp;help search engines understand content and designs, using keywords unnecessarily will cost you. <\/p>\n\n\n\n<p>\u201cKeyword stuffing\u201d is an accessibility \/ SEO no-no as it hinders the experience of people using screen readers and you can be penalized as a result.<\/p>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"need\"><strong>Do you need alt text for all images?<\/strong><\/h2>\n\n\n\n<p>You should only add alt text to visual elements that convey important information in your design. <\/p>\n\n\n\n<p>These include&#8230;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Decorative images&nbsp;<\/strong><\/h4>\n\n\n\n<p>If your design features visuals purely for aesthetic value, it\u2019s not necessary to add alt text. <\/p>\n\n\n\n<p>In fact, doing so in these situations increases the risk of confusing the reader or cluttering the screen reader experience.&nbsp;<\/p>\n\n\n\n<p>Dividers and background images are common examples of decorative images. Take this <a href=\"https:\/\/venngage.com\/templates\/posters\/yellow-trivia-night-poster-11be3287-bce6-4722-8b49-1618ab3098b7\" target=\"_blank\" rel=\"noreferrer noopener\">yellow trivia night poster&nbsp;template:<\/a><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"791\" height=\"1024\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/yellow-trivia-poster-1-791x1024.png\" alt=\"Yellow Trivia Night Poster\" class=\"wp-image-76179\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/yellow-trivia-poster-1-791x1024.png 791w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/yellow-trivia-poster-1-232x300.png 232w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/yellow-trivia-poster-1-768x994.png 768w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/yellow-trivia-poster-1-730x945.png 730w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/yellow-trivia-poster-1.png 816w\" sizes=\"(max-width: 791px) 100vw, 791px\" \/><\/figure><\/div>\n\n\n<center><a href=\"https:\/\/venngage.com\/templates\/posters\/yellow-trivia-night-poster-11be3287-bce6-4722-8b49-1618ab3098b7\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-cta\"><b>CREATE THIS ACCESSIBLE POSTER<\/b><\/button><\/a><\/center>&nbsp;\n\n\n\n<p>The image of a person and the brain in this poster does not add context or convey meaning \u2014 so don&#8217;t bother wasting words!<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">(<strong>Most) icons<\/strong><\/h4>\n\n\n\n<p>Being redundant is another faux pas when it comes to alt text. <\/p>\n\n\n\n<p>While icons <em>can<\/em> add visual interest, they usually don&#8217;t communicate anything new for the most part.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"816\" height=\"1650\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/employee-resignation.png\" alt=\"Employee Resignation Process Infographic\" class=\"wp-image-76185\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/employee-resignation.png 816w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/employee-resignation-148x300.png 148w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/employee-resignation-506x1024.png 506w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/employee-resignation-768x1553.png 768w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/employee-resignation-760x1536.png 760w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/employee-resignation-730x1476.png 730w\" sizes=\"(max-width: 816px) 100vw, 816px\" \/><\/figure><\/div>\n\n\n<center><a href=\"https:\/\/venngage.com\/templates\/infographics\/employee-resignation-process-infographic-97ed150d-d75a-4a21-a29b-0f82a31fcb53\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-cta\"><b>CREATE THIS ACCESSIBLE INFOGRAPHIC<\/b><\/button><\/a><\/center>&nbsp;\n\n\n\n<p>In the example above, alt text is not necessary for the icons since the meaning is described by text labels. <\/p>\n\n\n\n<p><strong><em>Note: There are a few exceptions to this rule.<\/em><\/strong>&nbsp;<\/p>\n\n\n\n<p>When an icon is a button or a link, you <em>should<\/em> add alt text to convey functionality.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/employee-newsletter.png\"><img decoding=\"async\" loading=\"lazy\" width=\"816\" height=\"2300\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/employee-newsletter.png\" alt=\"Employee Newsletter Template\" class=\"wp-image-76191\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/employee-newsletter.png 816w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/employee-newsletter-106x300.png 106w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/employee-newsletter-363x1024.png 363w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/employee-newsletter-768x2165.png 768w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/employee-newsletter-545x1536.png 545w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/employee-newsletter-727x2048.png 727w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/employee-newsletter-730x2058.png 730w\" sizes=\"(max-width: 816px) 100vw, 816px\" \/><\/a><\/figure><\/div>\n\n\n<p>For example, each CTA icon in the <a href=\"https:\/\/venngage.com\/templates\/newsletters\/employee-newsletter-template-3d896d60-f02d-40cf-92b6-540822e15550\" target=\"_blank\" rel=\"noreferrer noopener\">employee newsletter template<\/a> above would require an alt text.<\/p>\n\n\n\n<p>It\u2019s also a good idea to add alt text to an icon if it contains descriptive information not written elsewhere such as a poster with a Twitter icon followed by a brand&#8217;s username to clarify which accounts. Here you could alt text that says something like \u201cFind [Company] on Twitter\u201d.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Images described by nearby text&nbsp;<\/strong><\/h4>\n\n\n\n<p>Again, do your best to avoid redundancies. <\/p>\n\n\n\n<p>There\u2019s no need to repeat what\u2019s already been said.&nbsp;<\/p>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"FAQ\">Frequently Asked Questions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-question-1\"><strong>How do I add alt text to a JPG?<\/strong><\/h3>\n\n\n\n<p>You can add alt text to a JPG image in different ways depending on the document type and platform. To add alt text to a JPG in Microsoft Office\/Windows, right-click the image, select Format Picture &gt; Layout &amp; Properties &gt;Alt Text.&nbsp;<\/p>\n\n\n\n<p>To add alt text to a JPG in a Google Workspace, right-click the image and select the \u201cAlt Text.<\/p>\n\n\n\n<p>&nbsp;To add alt text to a JPG in WordPress, click on the Image block to open the Image settings in the Block tab on the sidebar and fill in the alt text and title attribute space.<\/p>\n\n\n\n<p>Finally, you can add alt text by editing the HTML code directly. To do so, implement the alt text as an attribute to the IMG tag by adding \u201calt=\u201d[your alt text]\u201d.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-question-2\"><strong>How do I get alt text from an image?<\/strong><\/h3>\n\n\n\n<p>The easiest way to check an image for alt text is to right-click an image and select the \u201cInspect\u201d option on Google Chrome. A pane displaying the page\u2019s HTML will appear, and all you have to do is look for the &#8220;alt=&#8221; tag. What follows will be the image\u2019s alt text description.<br><br>Alternatively, you can enable a screen reader (Window\u2019s built-in&nbsp;<em>Narrator<\/em>&nbsp;can be accessed via the Start Menu\u2019s search function; Mac\u2019s&nbsp;<em>VoiceOver Utility<\/em>&nbsp;can be accessed via Finder) and hear the image\u2019s alt description read aloud.&nbsp;<\/p>\n\n\n\n\n\n<h2 class=\"wp-block-heading\"><strong>When you provide alt text for an image, you put audiences first<\/strong><\/h2>\n\n\n\n<p>Designing for accessibility isn\u2019t just good practice \u2014 it\u2019s the right thing to do. <\/p>\n\n\n\n<p>Accessible design guarantees everyone can understand your content and not be excluded. And providing alt text for visuals is an essential part of that effort.&nbsp;<\/p>\n\n\n\n<p>I hope these tips help you create amazing, inclusive communications.<\/p>\n\n\n\n<p>And remember to give <a href=\"https:\/\/venngage.com\/features\/accessible-design\" target=\"_blank\" rel=\"noreferrer noopener\">Venngage&#8217;s Accessible Design Tool<\/a> editor a try. Venngage lets you add alt text or mark visuals as decorative for screen readers to avoid in just a few clicks. <\/p>\n\n\n\n<center><a href=\"https:\/\/venngage.com\/templates\/accessible\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-cta\"><b>START CREATING FOR FREE<\/b><\/button><\/a><\/center>&nbsp;\n","protected":false},"excerpt":{"rendered":"<p>Looking to make your designs, documents or web pages accessible, inclusive and user-friendly? If so, you need to get familiar with alt text. This tactic is one of the most effective ways to make visual content accessible to all types of users, including those living with disabilities. In this guide, I\u2019ll explain what is alt [&hellip;]<\/p>\n","protected":false},"author":142,"featured_media":65628,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false},"categories":[492],"tags":[258,280,308],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"Discover how to use image alt text to improve design accessibility &amp; better serve your audience. Plus, best practices and helpful tips.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/venngage.com\/blog\/image-alt-text\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Image Alt Text: Definition and Best Practices for Accessible Designs - Venngage\" \/>\n<meta property=\"og:description\" content=\"Discover how to use image alt text to improve design accessibility &amp; better serve your audience. Plus, best practices and helpful tips.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/venngage.com\/blog\/image-alt-text\/\" \/>\n<meta property=\"og:site_name\" content=\"Venngage\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Venngage\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-14T14:00:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-05T11:41:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Image_Alt_Text_Blog_Header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"576\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@venngage\" \/>\n<meta name=\"twitter:site\" content=\"@venngage\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jessie Strongitharm\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/venngage.com\/blog\/#website\",\"url\":\"https:\/\/venngage.com\/blog\/\",\"name\":\"Venngage\",\"description\":\"Learn to Communicate with Data\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/venngage.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/venngage.com\/blog\/image-alt-text\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Image_Alt_Text_Blog_Header.png\",\"contentUrl\":\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Image_Alt_Text_Blog_Header.png\",\"width\":1024,\"height\":576,\"caption\":\"image alt text\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/venngage.com\/blog\/image-alt-text\/#webpage\",\"url\":\"https:\/\/venngage.com\/blog\/image-alt-text\/\",\"name\":\"Image Alt Text: Definition and Best Practices for Accessible Designs - Venngage\",\"isPartOf\":{\"@id\":\"https:\/\/venngage.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/venngage.com\/blog\/image-alt-text\/#primaryimage\"},\"datePublished\":\"2023-09-14T14:00:16+00:00\",\"dateModified\":\"2026-01-05T11:41:35+00:00\",\"author\":{\"@id\":\"https:\/\/venngage.com\/blog\/#\/schema\/person\/ecf75b9a6ebf54eed12ce5ca47907c58\"},\"description\":\"Discover how to use image alt text to improve design accessibility & better serve your audience. Plus, best practices and helpful tips.\",\"breadcrumb\":{\"@id\":\"https:\/\/venngage.com\/blog\/image-alt-text\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/venngage.com\/blog\/image-alt-text\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/venngage.com\/blog\/image-alt-text\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/venngage.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Accessibility\",\"item\":\"https:\/\/venngage.com\/blog\/category\/accessibility\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Image Alt Text: Definition and Best Practices for Accessible Designs\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/venngage.com\/blog\/#\/schema\/person\/ecf75b9a6ebf54eed12ce5ca47907c58\",\"name\":\"Jessie Strongitharm\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/venngage.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6a45635c74b0257a05fa7ed7dd4c9c7e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6a45635c74b0257a05fa7ed7dd4c9c7e?s=96&d=mm&r=g\",\"caption\":\"Jessie Strongitharm\"},\"description\":\"Jessie Strongitharm was a content marketer &amp; writer at Venngage with a focus on accessibility, design trends, and effective communication. Her expertise spans flyer design, infographic creation, and marketing analysis, where she provides actionable insights and practical tools that empower her audience to create compelling and accessible visual content. Jessie\\u2019s work is dedicated to helping others stay ahead of design trends while ensuring clear and impactful messaging. Jessie's background in psychology, new media communications and B2B SaaS marketing informs the copy she crafts for Venngage's audience.\",\"url\":\"https:\/\/venngage.com\/blog\/author\/jessie\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"description":"Discover how to use image alt text to improve design accessibility & better serve your audience. Plus, best practices and helpful tips.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/venngage.com\/blog\/image-alt-text\/","og_locale":"en_US","og_type":"article","og_title":"Image Alt Text: Definition and Best Practices for Accessible Designs - Venngage","og_description":"Discover how to use image alt text to improve design accessibility & better serve your audience. Plus, best practices and helpful tips.","og_url":"https:\/\/venngage.com\/blog\/image-alt-text\/","og_site_name":"Venngage","article_publisher":"https:\/\/www.facebook.com\/Venngage","article_published_time":"2023-09-14T14:00:16+00:00","article_modified_time":"2026-01-05T11:41:35+00:00","og_image":[{"width":1024,"height":576,"url":"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Image_Alt_Text_Blog_Header.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@venngage","twitter_site":"@venngage","twitter_misc":{"Written by":"Jessie Strongitharm","Est. reading time":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/venngage.com\/blog\/#website","url":"https:\/\/venngage.com\/blog\/","name":"Venngage","description":"Learn to Communicate with Data","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/venngage.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/venngage.com\/blog\/image-alt-text\/#primaryimage","inLanguage":"en-US","url":"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Image_Alt_Text_Blog_Header.png","contentUrl":"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Image_Alt_Text_Blog_Header.png","width":1024,"height":576,"caption":"image alt text"},{"@type":"WebPage","@id":"https:\/\/venngage.com\/blog\/image-alt-text\/#webpage","url":"https:\/\/venngage.com\/blog\/image-alt-text\/","name":"Image Alt Text: Definition and Best Practices for Accessible Designs - Venngage","isPartOf":{"@id":"https:\/\/venngage.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/venngage.com\/blog\/image-alt-text\/#primaryimage"},"datePublished":"2023-09-14T14:00:16+00:00","dateModified":"2026-01-05T11:41:35+00:00","author":{"@id":"https:\/\/venngage.com\/blog\/#\/schema\/person\/ecf75b9a6ebf54eed12ce5ca47907c58"},"description":"Discover how to use image alt text to improve design accessibility & better serve your audience. Plus, best practices and helpful tips.","breadcrumb":{"@id":"https:\/\/venngage.com\/blog\/image-alt-text\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/venngage.com\/blog\/image-alt-text\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/venngage.com\/blog\/image-alt-text\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/venngage.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Accessibility","item":"https:\/\/venngage.com\/blog\/category\/accessibility\/"},{"@type":"ListItem","position":3,"name":"Image Alt Text: Definition and Best Practices for Accessible Designs"}]},{"@type":"Person","@id":"https:\/\/venngage.com\/blog\/#\/schema\/person\/ecf75b9a6ebf54eed12ce5ca47907c58","name":"Jessie Strongitharm","image":{"@type":"ImageObject","@id":"https:\/\/venngage.com\/blog\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/6a45635c74b0257a05fa7ed7dd4c9c7e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6a45635c74b0257a05fa7ed7dd4c9c7e?s=96&d=mm&r=g","caption":"Jessie Strongitharm"},"description":"Jessie Strongitharm was a content marketer &amp; writer at Venngage with a focus on accessibility, design trends, and effective communication. Her expertise spans flyer design, infographic creation, and marketing analysis, where she provides actionable insights and practical tools that empower her audience to create compelling and accessible visual content. Jessie\u2019s work is dedicated to helping others stay ahead of design trends while ensuring clear and impactful messaging. Jessie's background in psychology, new media communications and B2B SaaS marketing informs the copy she crafts for Venngage's audience.","url":"https:\/\/venngage.com\/blog\/author\/jessie\/"}]}},"_links":{"self":[{"href":"https:\/\/venngage.com\/blog\/wp-json\/wp\/v2\/posts\/65608"}],"collection":[{"href":"https:\/\/venngage.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/venngage.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/venngage.com\/blog\/wp-json\/wp\/v2\/users\/142"}],"replies":[{"embeddable":true,"href":"https:\/\/venngage.com\/blog\/wp-json\/wp\/v2\/comments?post=65608"}],"version-history":[{"count":51,"href":"https:\/\/venngage.com\/blog\/wp-json\/wp\/v2\/posts\/65608\/revisions"}],"predecessor-version":[{"id":109228,"href":"https:\/\/venngage.com\/blog\/wp-json\/wp\/v2\/posts\/65608\/revisions\/109228"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/venngage.com\/blog\/wp-json\/wp\/v2\/media\/65628"}],"wp:attachment":[{"href":"https:\/\/venngage.com\/blog\/wp-json\/wp\/v2\/media?parent=65608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/venngage.com\/blog\/wp-json\/wp\/v2\/categories?post=65608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/venngage.com\/blog\/wp-json\/wp\/v2\/tags?post=65608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}