{"id":48,"date":"2021-08-24T18:32:18","date_gmt":"2021-08-24T22:32:18","guid":{"rendered":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/?post_type=chapter&#038;p=48"},"modified":"2026-03-04T15:20:56","modified_gmt":"2026-03-04T20:20:56","slug":"alternative-text","status":"publish","type":"chapter","link":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/alternative-text\/","title":{"raw":"Alternative Text","rendered":"Alternative Text"},"content":{"raw":"<a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/03\/chrome_BtavTQvRdw.png\"><img class=\"chapter alignright wp-image-1187\" style=\"border: 2px solid #555;margin-bottom: 1em;border-radius: 6px\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/03\/chrome_BtavTQvRdw-300x249.png\" alt=\"Screencapture of Brightspace alt text editor\" width=\"153\" height=\"127\" \/><\/a>\r\n\r\n[pb_glossary id=\"1161\"]Alternative text[\/pb_glossary] (alt text) is a description of visual content. Descriptions can be provided by adjacent text, an [pb_glossary id=\"8174\"]image caption[\/pb_glossary], or the alt text field. <span style=\"text-align: initial;font-size: 1em\">Alt text is code that is read by screen reader software to blind and low vision readers. Alt text allows all users to understand the context, purpose and meaning of visual content by relaying critical visual information in text format.<\/span>\r\n\r\nAlt text is essential to digital accessibility. <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#text-equiv\" target=\"_blank\" rel=\"noopener\">According to WCAG 2.0 Guideline 1.1.1<\/a> : \"All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.\"\r\n\r\n<strong>On this page:<\/strong>\r\n<ul class=\"navbar\">\r\n \t<li class=\"navitem\"><a href=\"#where\">Where to Include Alt Text<\/a><\/li>\r\n \t<li class=\"navitem\"><a href=\"#decorative\">Decorative Images<\/a><\/li>\r\n \t<li class=\"navitem\"><a href=\"#writing\">Writing Alt Text<\/a><\/li>\r\n \t<li class=\"navitem\"><a href=\"#platforms\">Common Platform Guides<\/a><\/li>\r\n \t<li class=\"navitem\"><a href=\"#without\">View Content Without Images<\/a><\/li>\r\n \t<li class=\"navitem\"><a href=\"#Further-reading\">Further Reading<\/a><\/li>\r\n<\/ul>\r\nProvide alt text because it is\r\n<div class=\"textbox textbox--exercises\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\">Essential for<\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\nScreen reader users to understand non-text content such as images, diagrams, and other graphics.\r\n\r\n<\/div>\r\n<\/div>\r\n<div class=\"textbox textbox--examples\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\">But also benefits<\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n<ul>\r\n \t<li>Users with low bandwidth or inconsistent connection.<\/li>\r\n \t<li>Users with content blockers that could prevent images from being displayed.\r\n<ul>\r\n \t<li>Alt text provides context, purpose, and information of the image if it does not load.<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>Creators by providing clues for moved or missing image source.<\/li>\r\n \t<li>Creators by incorporating a review of why an image is being included. Is it decorative? Does it contribute useful information? If not, is it necessary?<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\nImages and diagrams are excellent compliments to text and vice-versa. Including visuals can break up large block of texts and increase understanding. However, do not overly rely on any single format alone.\r\n<h2><a id=\"where\"><\/a>Where to Include Alt Text<\/h2>\r\nAdd alt text to visual elements that contain information. This is essential to provide a text equivalent of visuals, including:\r\n<ul>\r\n \t<li>Images and graphics<\/li>\r\n \t<li>Diagrams and charts<\/li>\r\n \t<li>Images of text<\/li>\r\n \t<li>Important logos<\/li>\r\n \t<li>Linked images<\/li>\r\n \t<li>Buttons styled with a graphic<\/li>\r\n<\/ul>\r\nUse this tool to determine when to use alt text (including some tips for writing alt text based on image type) or when to mark an image as [pb_glossary id=\"1291\"]decorative[\/pb_glossary].\r\n\r\n<code>[h5p id=\"73\"]<\/code>\r\n<h2><a id=\"decorative\"><\/a>Decorative Images<\/h2>\r\n<img class=\"alignright wp-image-6598\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/chrome_BtavTQvRdw.png\" alt=\"\" width=\"331\" height=\"275\" \/>Useful alt text is important. Knowing when to mark a graphic as decorative is equally important. Visual elements that are included purely for aesthetic purposes and do not contribute any meaningful information should be marked as decorative. Additionally, a graphic should be marked as decorative if the information in the visual element is available in another format such as a figure caption or adjacent text. Use images and text to support and reinforce each other to make content more accessible and easier for all to understand.\r\n\r\nMark decorative images with built-in tools (often a checkbox labelled \"mark image as decorative\" or similar) or with alt=\u201c\" in HTML markup.\r\n<div class=\"textbox--disclaimer\">\r\n<div class=\"imgcontainer\">\r\n\r\n<img class=\"noborder alignleft wp-image-6958\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Untitled-design-5-254x300.png\" alt=\"\" width=\"76\" height=\"89\" \/>\r\n<div class=\"imgtext\">If in doubt, err on the side of adding alt text. It is better someone consume content twice than miss out altogether.<\/div>\r\n<\/div>\r\n<\/div>\r\n<h3>Image Attribution<\/h3>\r\nWhen adding an image attribution (copyright license etc.) to a decorative image, ensure the caption is also marked as decorative. If it is not, assistive technology would not announce the image, but would read the succeeding attribution text. This would lead the reader to believe they may have missed an important image.\r\n\r\nTo add a caption to a decorative image in:\r\n\r\n<details><summary>Word<\/summary>\r\n<ol>\r\n \t<li>Right-click on an image and select\u00a0<strong>Insert Caption...<\/strong><\/li>\r\n \t<li>Or select the image, move to the\u00a0<strong>References<\/strong>\u00a0tab and select\u00a0<strong>Insert Caption.<\/strong><\/li>\r\n \t<li>Enter your caption and select\u00a0<strong>Ok.<\/strong><\/li>\r\n \t<li>Right-click the image and choose\u00a0<strong>Edit Alt Text...<\/strong><\/li>\r\n \t<li>Check\u00a0<strong>Mark as decorative.<\/strong><\/li>\r\n<\/ol>\r\n<\/details><details><summary>PowerPoint<\/summary>\r\n<ol>\r\n \t<li>Move to\u00a0<strong>Insert<\/strong>\u00a0and select<strong>\u00a0Insert Textbox.<\/strong><\/li>\r\n \t<li>Place the textbox under the image and type your caption.<\/li>\r\n \t<li><strong>Control\u00a0<\/strong>(<strong>Command<\/strong>\u00a0on macOS) and click, or click and drag over, the image and the textbox.<\/li>\r\n \t<li>Right-click the image and select\u00a0<strong>Group &gt; Group.<\/strong><\/li>\r\n \t<li>Or, on the\u00a0<strong>Home\u00a0<\/strong>tab, select\u00a0<strong>Arrange &gt; Group &gt; Group.<\/strong><\/li>\r\n \t<li>Select your new group and copy (right-click &gt;\u00a0<strong>Copy<\/strong>\u00a0or\u00a0<strong>Control\u00a0<\/strong>[<strong>Command\u00a0<\/strong>on macOS] and\u00a0<strong>c<\/strong>).<\/li>\r\n \t<li>On the\u00a0<strong>Home\u00a0<\/strong>tab, choose\u00a0<strong>Paste &gt; Paste Special.<\/strong><\/li>\r\n \t<li>Choose\u00a0<strong>Picture (PNG)<\/strong>\u00a0and select\u00a0<strong>Ok.<\/strong><\/li>\r\n \t<li>Right-click on newly grouped image and select\u00a0<strong>Edit Alt Text...<\/strong><\/li>\r\n \t<li>Check\u00a0<strong>Mark as decorative.<\/strong><\/li>\r\n \t<li>Remove old image and textbox.<\/li>\r\n<\/ol>\r\n<\/details><details><summary>PDF<\/summary>The image caption should be marked as an artifact along with the image.\r\n\r\n<\/details><details><summary>Webpage<\/summary>\r\n<ol>\r\n \t<li>Use <code>&lt;figure&gt;<\/code> for proper formatting to include a caption via <code>&lt;figcaption&gt;<\/code><\/li>\r\n \t<li>Enter an alt attribute of alt=\"\" for the image.<\/li>\r\n \t<li>Use <code>aria-hidden=\"true\"<\/code> to ensure a screen reader will not read the <code>&lt;figcaption&gt;<\/code> tag.<\/li>\r\n<\/ol>\r\nWrap the <code>&lt;figcaption&gt;<\/code> in a <code>&lt;div&gt;<\/code>, for example:\r\n\r\n<code>&lt;figure&gt;<\/code>\r\n\r\n<code>&lt;img src=\"example.png\"\u00a0alt=\"\"\u00a0width=\"500\"\u00a0height=\"600\"&gt;<\/code>\r\n\r\n<code>&lt;div aria-hidden=\"true\"&gt;<\/code>\r\n\r\n<code>&lt;figcaption&gt;Image caption to be hidden from screen readers&lt;\/figcaption&gt;<\/code>\r\n\r\n<code>&lt;\/div&gt;<\/code>\r\n\r\n<code>&lt;\/figure&gt;<\/code>\r\n\r\n<\/details>\r\n<h2><a id=\"writing\"><\/a>Writing Alt Text<\/h2>\r\nBefore writing alt text, consider the <strong>context<\/strong> (information around image in content), <strong>purpose<\/strong> (what the image contributes), and <strong>meaning<\/strong> (the message the image conveys).\r\n\r\nUnderstand that graphics can be informative, functional, or decorative. An informative graphic includes information and must be accompanied by a text description. A functional image performs an action like a link or button; the alt text must indicate what the action will be when the graphic is activated. A decorative image is purely for aesthetic purposes such as a border or background. Note, when accompanied by alt text or a figure caption, informative images can be marked as decorative.\r\n\r\nTo begin writing alt text, consider how you would describe the image to someone over the phone.\r\n\r\n<a href=\"https:\/\/www.scribely.com\/\">Caroline Desrosiers<\/a> offers a formula to write alt text:\r\n<ol>\r\n \t<li>Identify the image <strong>type<\/strong> (if not a photo)\r\n<ol>\r\n \t<li>Indicate if an image is a diagram, map, symbol, gif, drawing, cartoon, etc. The added context will orient users and aid their understanding.<\/li>\r\n<\/ol>\r\n<\/li>\r\n \t<li>Describe the <strong>focus<\/strong> of the image\r\n<ol>\r\n \t<li>What is the most important information in the image.<\/li>\r\n<\/ol>\r\n<\/li>\r\n \t<li>Add relevant <strong>details<\/strong>\r\n<ol>\r\n \t<li>Add details that contribute information or meaning but are not the focus.<\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ol>\r\nLet's consider this example:\r\n\r\n<img class=\"wp-image-2125 size-medium alignleft\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/12\/UN_emblem_blue.svg_-300x255.png\" alt=\"Graphic of north pole centered globe surrounded by olive branches.\" width=\"300\" height=\"255\" \/><strong>Type<\/strong> = graphic\r\n\r\n<strong>Focus<\/strong> = north pole centered globe\r\n\r\n<strong>Details<\/strong> = surrounded by olive branches. This is the United Nations logo.\r\n\r\nSo, that provides us with alt text that would read \"Graphic of north pole centered globe surrounded by olive branches. This is the United Nations logo.\"\r\n<div class=\"clearfix\"><\/div>\r\nAlt text should be succinct and accurate, including punctuation and grammar. There is no limit to the length of alternative text but aim for a sentence or two at most to provide a pleasant reading experience.\r\n\r\nOther types of images might be suited to a different formula. Object - Action - Context (Chen, 2020) is a method similar to type, focus, detail mentioned above.\r\n\r\n<img class=\"wp-image-4571 alignleft\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ExampleChart-300x175.png\" alt=\"A line graph that shows the amount of alt text written increasing and the difficulty in writing alt text decreasing over time. The lines meet before and after the second time period as writing becomes more difficult and then easier.\" width=\"500\" height=\"292\" \/><strong>Object<\/strong> = Line graph\r\n\r\n<strong>Action<\/strong> = graph shows the amount of alt text written and the difficulty encountered in writing alt text over time.\r\n\r\n<strong>Context<\/strong> = The difficulty in writing alt text rises briefly before quickly declining over time as the amount of alt text written increases consistently after an initial dip.\r\n\r\nThis method provides us with the alt text \"A line graph that shows the amount of alt text written and the difficulty in writing alt text over time. The difficulty in writing alt text rises briefly before quickly declining over time as the amount of alt text written increases consistently after an initial dip.\"\r\n<h3>Use Relational Terms<\/h3>\r\nDescribe the relative size and scale of elements in the graphic. Describe elements relative to the subject, one another, or to a common object.\r\n\r\nDescribe the directional and positional information of objects in the graphic relative to the frame, such as \"on the right\" or \"near the top left corner.\"\r\n\r\nDepending on context, terms like \"partial view,\" \"bird's-eye view,\" or \"close-up\" can be crucial.\r\n\r\nMaterials, mediums, and textures can be identified by name where possible.\r\n\r\nFor an image of a recognizable person or place, name them directly but also describe any relevant details.\r\n<h3>What to Avoid<\/h3>\r\nIf a photo, do not include \"photo of...\" or \"image of...\"\r\n<ul>\r\n \t<li>However, \u201cScreenshot of...\u201d, \"diagram...\", \"map of...\", \"cartoon drawing...\" are useful information to orient users.<\/li>\r\n<\/ul>\r\nDo not include:\r\n<ul>\r\n \t<li>Copyright information or attribution.\r\n<ul>\r\n \t<li>Copyright information should be included in a caption below the image or in a list of references.<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>Emoticons.<\/li>\r\n \t<li>Hashtags.<\/li>\r\n \t<li>SEO keywords.<\/li>\r\n \t<li>Promotional material.<\/li>\r\n \t<li>Links.<\/li>\r\n<\/ul>\r\nDo not repeat information contained in adjacent text or included in a visible caption.\r\n<ul>\r\n \t<li>If the relevant information of an image is include in a caption or adjacent text, you can mark the image as decorative.<\/li>\r\n \t<li>If graphic element has a descriptive caption and is labelled with \"Figure 1\" for example, alt text could read \"Figure 1, image caption contains description.\"<\/li>\r\n \t<li>Image captions are useful for copyright, attribution, more information, or links.<\/li>\r\n<\/ul>\r\nDo not editorialize or include your own feelings or bias. Only include the important information to provide an accurate description.\r\n\r\nDo not make any assumptions about gender or ethnicity. Prefer \"they,\" \"them,\" or \"person\" unless details are verifiable.\r\n\r\nAI has improved the accuracy of machine-generated alternative text. Keep in mind that even an accurate description will provide no context or purpose. AI generated alt text may be useful as a starting point to be edited by a human.\r\n<h2><a id=\"platforms\"><\/a>Common Platform Guides<\/h2>\r\nIntroductory resources on adding alt text in common platforms:\r\n\r\n<details><summary>Microsoft Office<\/summary>To add alt text in Word and PowerPoint:\r\n<ol>\r\n \t<li>Right click on an image and select <strong>Edit Alt Text...<\/strong> <strong>(View Alt Text...<\/strong> on macOS, <strong>Edit Picture Alt Text<\/strong> on Office 365)<\/li>\r\n \t<li>Or, use the <strong>Picture Format<\/strong> Tab and select <strong>Alt Text<\/strong><\/li>\r\n \t<li>Type an image description<\/li>\r\n<\/ol>\r\nRead more about adding <a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/word-accessibility-3\/#alt\">alt text in Word<\/a> and <a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/powerpoint-accessibility-3\/#alttext\">PowerPoint<\/a>.\r\n\r\n<\/details><details><summary>Brightspace<\/summary>To add alt text to images in Brightspace:\r\n<ol>\r\n \t<li>When adding an image, you will be prompted to add alternative text or mark the image as decorative<\/li>\r\n \t<li>To add alt text to existing images:\r\n<ol>\r\n \t<li>Select the image<\/li>\r\n \t<li>Choose<strong> Image Options<\/strong><\/li>\r\n \t<li>Enter alternative text or check <strong>Image is decorative<\/strong><\/li>\r\n \t<li>Choose <strong>Save<\/strong><\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ol>\r\nReview the <a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/brightspace-accessibility-3\/#alt-text\">Brightspace Alternative Text<\/a> chapter later in this guide and consult D2L guides on <a href=\"https:\/\/community.d2l.com\/brightspace\/kb\/articles\/1379-alt-text-for-web-page-images\">Alt Text for Brightspace Web Page Images<\/a>.\r\n\r\n<\/details><details><summary>H5P<\/summary>To add alternative text to H5P images, enter a description in the <strong>Alternative text<\/strong> field or check <strong>Decorative only<\/strong>.\r\n<img class=\"alignnone size-full wp-image-9724\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/h5paltexttool.png\" alt=\"\" width=\"1033\" height=\"567\" \/>\r\n\r\nRead more about <a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/h5p\/#alt\">adding alt text in H5P<\/a>.\r\n\r\n<\/details><details><summary>WordPress<\/summary>To add alternative text in WordPress or Pressbooks:\r\nWhen uploading an image to WordPress, complete the <strong>Alt Text<\/strong> field in Media Library.\r\n\r\nYou can also add alt text in the Text\/HTML editor in WordPress with alt=\"description of image\".\r\n\r\nOr, select an image and choose <strong>Edit<\/strong>, complete the alternative text field and choose Update.\r\n\r\nConsult the <a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/wordpress-and-pressbooks\/#images\">Pressbooks chapter<\/a> and <a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/wordpress-block-editor\/#alt\">WordPress chapter<\/a> of this guide for more information.\r\n\r\nRead more about <a href=\"https:\/\/make.wordpress.org\/accessibility\/handbook\/content\/alternative-text-for-images\/\">alternative text for images<\/a> from WordPress support documents.\r\n\r\n<\/details><details><summary>PDF<\/summary>To add alt text to PDFs:\r\n<ol>\r\n \t<li>Open <strong>Reading Order<\/strong> pane<\/li>\r\n \t<li>Open <strong>Reading Order Panel<\/strong><\/li>\r\n \t<li>Right click on an image and choose <strong>Edit Alternate text<\/strong><\/li>\r\n \t<li>Enter your description and choose <strong>Ok<\/strong><\/li>\r\n \t<li>For a decorative image, select the image and choose <strong>Background\/artifact<\/strong><\/li>\r\n<\/ol>\r\n<\/details><details><summary>HTML<\/summary>Alt text is entered in the <code>&lt;img&gt;<\/code> alt attribute. Decorative images must be marked alt=\"\"\r\n\r\nIn WordPress and Pressbooks alt text is added to the <strong>Alternative Text<\/strong> field in the Media Library.\r\n\r\n<\/details><details><summary>Other platforms<\/summary><a href=\"https:\/\/support.google.com\/docs\/answer\/6199477?hl=en\">Google Docs and Sheets support alt text.<\/a>\r\n\r\n<a href=\"https:\/\/help.twitter.com\/en\/using-twitter\/picture-descriptions\">Twitter supports alt text<\/a> for images you post.\r\n\r\nFacebook allows users to <a href=\"https:\/\/m.facebook.com\/help\/214124458607871\/?helpref=faq_content\">add alt text on Facebook photos<\/a>.\r\n\r\n<a href=\"https:\/\/help.instagram.com\/503708446705527\">Instagram adds automatic alt text<\/a> to images. Note that automatic alt text is rarely accurate and should be checked and edited.\r\n\r\n<\/details>Later platform-specific chapters will cover how to provide equivalent text, add captions, and populate the alt text field in greater detail.\r\n<h2><a id=\"without\"><\/a>View Content Without Images<\/h2>\r\nIf you are not sure about an image, try viewing your content without the image. If no information is lost, you can mark the image as decorative.\r\n\r\n<details><summary>To view web content without images:<\/summary>In Google Chrome:\r\n<ol>\r\n \t<li>Select <strong>View site information<\/strong> (padlock icon on left side of address bar).\r\n<img class=\"alignnone wp-image-9684 size-large\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages1-1024x595.png\" alt=\"\" width=\"1024\" height=\"595\" \/><\/li>\r\n \t<li>Select <strong>Site settings<\/strong>.\r\n<img class=\"alignnone wp-image-9685 size-large\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages2-1024x595.png\" alt=\"\" width=\"1024\" height=\"595\" \/><\/li>\r\n \t<li>Beside Images, choose <strong>Block<\/strong>.\r\n<img class=\"alignnone wp-image-9686 size-large\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages3-e1752533483277-1024x508.png\" alt=\"\" width=\"1024\" height=\"508\" \/><\/li>\r\n \t<li>Move back to the website tab and click <strong>Reload<\/strong> or refresh the page.\r\n<img class=\"alignnone wp-image-9687 size-large\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages4-1024x595.png\" alt=\"\" width=\"1024\" height=\"595\" \/><\/li>\r\n \t<li>The page will load without images. Verify that no information is lost when images are removed.\r\n<img class=\"alignnone wp-image-9688 size-large\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages5-1024x595.png\" alt=\"\" width=\"1024\" height=\"595\" \/><\/li>\r\n<\/ol>\r\nTo restore images:\r\n<ol>\r\n \t<li>Click on image icon with red x in the address bar and select <strong>Always allow [website] to show images<\/strong>.<\/li>\r\n \t<li>Click <strong>Done<\/strong>.\r\n<img class=\"alignnone wp-image-9689 size-large\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages6.1-1024x595.png\" alt=\"\" width=\"1024\" height=\"595\" \/>\r\nOr<\/li>\r\n \t<li>Select <strong>View site information<\/strong> (padlock icon on left side of address bar) and toggle Images on or click <strong>Reset permission<\/strong>.\r\n<img class=\"alignnone wp-image-9690 size-large\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages6.2-1024x595.png\" alt=\"\" width=\"1024\" height=\"595\" \/><\/li>\r\n<\/ol>\r\n<\/details>\r\n<h2>Nothing New<\/h2>\r\nDescribing an image in text is not a new concept. Consider this postcard by <a href=\"https:\/\/www.flickr.com\/photos\/136379766@N05\/\">Al Harvey<\/a> from the mid-1970s:\r\n\r\n<img class=\"alignnone size-full wp-image-8765\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/Vancouver74-77.png\" alt=\"\" width=\"3458\" height=\"2411\" \/>\r\n\r\nOn the reverse, note the description:\r\n\r\n[caption id=\"attachment_8766\" align=\"alignnone\" width=\"3473\"]<img class=\"size-full wp-image-8766\" style=\"border: 1px solid #555\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/Vancouver74-77Back.png\" alt=\"\" width=\"3473\" height=\"2432\" \/> VANCOUVER, B.C., Canada<br \/>Aerial view of Downtown Vancouver, Burrard Inlet and the North Shore Mountains.<br \/>This aerial view showing Granville Street Bridge in the foreground is a clear testimonial to the exciting skyline and surrounding beauty of this seaport city. The residential areas of West and North Vancouver are seen in the background.<br \/>Photo by Al Harvey[\/caption]\r\n\r\n<span style=\"margin-top: 0\">The inclusion of this description (while not necessarily perfect for alt text) is an excellent example of a figure caption that describes the content of an image. While it is important to always include a text equivalent of an image, this postcard exemplifies why that practice is valuable beyond accessibility considerations and has been common practice for decades.<\/span>\r\n<div class=\"textbox textbox--key-takeaways\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\"><a id=\"Further-reading\"><\/a>Further Reading<\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\nTips for <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/\" target=\"_blank\" rel=\"noopener\">alt text by type of image from W3C Web Accessibility Initiative<\/a>.\r\n\r\nW3 <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/decision-tree\/\" target=\"_blank\" rel=\"noopener\">Web Accessibility Initiative\u2019s alt text decision tree<\/a> is useful for narrowing down what your alt text should convey.\r\n\r\n<a href=\"https:\/\/webaim.org\/techniques\/alttext\/\" target=\"_blank\" rel=\"noopener\">WebAIM offers a comprehensive resource on alt text.<\/a>\r\n\r\n<a href=\"https:\/\/accessibility.huit.harvard.edu\/describe-content-images\">Write helpful Alt Text to describe images.<\/a>\r\n\r\n<\/div>\r\n<\/div>\r\n<h2 class=\"references\">Works Cited<\/h2>\r\nChen, Alex. \"<a href=\"https:\/\/uxdesign.cc\/how-to-write-an-image-description-2f30d3bf5546\">How to write an image description<\/a>.\"\u00a0<em>UX Collective - Medium,<\/em> 2020.","rendered":"<p><a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/03\/chrome_BtavTQvRdw.png\"><img loading=\"lazy\" decoding=\"async\" class=\"chapter alignright wp-image-1187\" style=\"border: 2px solid #555;margin-bottom: 1em;border-radius: 6px\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/03\/chrome_BtavTQvRdw-300x249.png\" alt=\"Screencapture of Brightspace alt text editor\" width=\"153\" height=\"127\" srcset=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/03\/chrome_BtavTQvRdw-300x249.png 300w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/03\/chrome_BtavTQvRdw-65x54.png 65w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/03\/chrome_BtavTQvRdw-225x187.png 225w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/03\/chrome_BtavTQvRdw-350x291.png 350w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/03\/chrome_BtavTQvRdw.png 513w\" sizes=\"auto, (max-width: 153px) 100vw, 153px\" \/><\/a><\/p>\n<p><a class=\"glossary-term\" aria-haspopup=\"dialog\" aria-describedby=\"definition\" href=\"#term_48_1161\">Alternative text<\/a> (alt text) is a description of visual content. Descriptions can be provided by adjacent text, an image caption, or the alt text field. <span style=\"text-align: initial;font-size: 1em\">Alt text is code that is read by screen reader software to blind and low vision readers. Alt text allows all users to understand the context, purpose and meaning of visual content by relaying critical visual information in text format.<\/span><\/p>\n<p>Alt text is essential to digital accessibility. <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#text-equiv\" target=\"_blank\" rel=\"noopener\">According to WCAG 2.0 Guideline 1.1.1<\/a> : &#8220;All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.&#8221;<\/p>\n<p><strong>On this page:<\/strong><\/p>\n<ul class=\"navbar\">\n<li class=\"navitem\"><a href=\"#where\">Where to Include Alt Text<\/a><\/li>\n<li class=\"navitem\"><a href=\"#decorative\">Decorative Images<\/a><\/li>\n<li class=\"navitem\"><a href=\"#writing\">Writing Alt Text<\/a><\/li>\n<li class=\"navitem\"><a href=\"#platforms\">Common Platform Guides<\/a><\/li>\n<li class=\"navitem\"><a href=\"#without\">View Content Without Images<\/a><\/li>\n<li class=\"navitem\"><a href=\"#Further-reading\">Further Reading<\/a><\/li>\n<\/ul>\n<p>Provide alt text because it is<\/p>\n<div class=\"textbox textbox--exercises\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\">Essential for<\/p>\n<\/header>\n<div class=\"textbox__content\">\n<p>Screen reader users to understand non-text content such as images, diagrams, and other graphics.<\/p>\n<\/div>\n<\/div>\n<div class=\"textbox textbox--examples\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\">But also benefits<\/p>\n<\/header>\n<div class=\"textbox__content\">\n<ul>\n<li>Users with low bandwidth or inconsistent connection.<\/li>\n<li>Users with content blockers that could prevent images from being displayed.\n<ul>\n<li>Alt text provides context, purpose, and information of the image if it does not load.<\/li>\n<\/ul>\n<\/li>\n<li>Creators by providing clues for moved or missing image source.<\/li>\n<li>Creators by incorporating a review of why an image is being included. Is it decorative? Does it contribute useful information? If not, is it necessary?<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p>Images and diagrams are excellent compliments to text and vice-versa. Including visuals can break up large block of texts and increase understanding. However, do not overly rely on any single format alone.<\/p>\n<h2><a id=\"where\"><\/a>Where to Include Alt Text<\/h2>\n<p>Add alt text to visual elements that contain information. This is essential to provide a text equivalent of visuals, including:<\/p>\n<ul>\n<li>Images and graphics<\/li>\n<li>Diagrams and charts<\/li>\n<li>Images of text<\/li>\n<li>Important logos<\/li>\n<li>Linked images<\/li>\n<li>Buttons styled with a graphic<\/li>\n<\/ul>\n<p>Use this tool to determine when to use alt text (including some tips for writing alt text based on image type) or when to mark an image as <a class=\"glossary-term\" aria-haspopup=\"dialog\" aria-describedby=\"definition\" href=\"#term_48_1291\">decorative<\/a>.<\/p>\n<p><code><\/p>\n<div id=\"h5p-73\">\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-73\" class=\"h5p-iframe\" data-content-id=\"73\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"Alt Text Decision Tree\"><\/iframe><\/div>\n<\/div>\n<p><\/code><\/p>\n<h2><a id=\"decorative\"><\/a>Decorative Images<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-6598\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/chrome_BtavTQvRdw.png\" alt=\"\" width=\"331\" height=\"275\" srcset=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/chrome_BtavTQvRdw.png 513w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/chrome_BtavTQvRdw-300x249.png 300w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/chrome_BtavTQvRdw-65x54.png 65w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/chrome_BtavTQvRdw-225x187.png 225w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/chrome_BtavTQvRdw-350x291.png 350w\" sizes=\"auto, (max-width: 331px) 100vw, 331px\" \/>Useful alt text is important. Knowing when to mark a graphic as decorative is equally important. Visual elements that are included purely for aesthetic purposes and do not contribute any meaningful information should be marked as decorative. Additionally, a graphic should be marked as decorative if the information in the visual element is available in another format such as a figure caption or adjacent text. Use images and text to support and reinforce each other to make content more accessible and easier for all to understand.<\/p>\n<p>Mark decorative images with built-in tools (often a checkbox labelled &#8220;mark image as decorative&#8221; or similar) or with alt=\u201c&#8221; in HTML markup.<\/p>\n<div class=\"textbox--disclaimer\">\n<div class=\"imgcontainer\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"noborder alignleft wp-image-6958\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Untitled-design-5-254x300.png\" alt=\"\" width=\"76\" height=\"89\" srcset=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Untitled-design-5-254x300.png 254w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Untitled-design-5-867x1024.png 867w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Untitled-design-5-768x907.png 768w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Untitled-design-5-65x77.png 65w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Untitled-design-5-225x266.png 225w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Untitled-design-5-350x414.png 350w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Untitled-design-5.png 914w\" sizes=\"auto, (max-width: 76px) 100vw, 76px\" \/><\/p>\n<div class=\"imgtext\">If in doubt, err on the side of adding alt text. It is better someone consume content twice than miss out altogether.<\/div>\n<\/div>\n<\/div>\n<h3>Image Attribution<\/h3>\n<p>When adding an image attribution (copyright license etc.) to a decorative image, ensure the caption is also marked as decorative. If it is not, assistive technology would not announce the image, but would read the succeeding attribution text. This would lead the reader to believe they may have missed an important image.<\/p>\n<p>To add a caption to a decorative image in:<\/p>\n<details>\n<summary>Word<\/summary>\n<ol>\n<li>Right-click on an image and select\u00a0<strong>Insert Caption&#8230;<\/strong><\/li>\n<li>Or select the image, move to the\u00a0<strong>References<\/strong>\u00a0tab and select\u00a0<strong>Insert Caption.<\/strong><\/li>\n<li>Enter your caption and select\u00a0<strong>Ok.<\/strong><\/li>\n<li>Right-click the image and choose\u00a0<strong>Edit Alt Text&#8230;<\/strong><\/li>\n<li>Check\u00a0<strong>Mark as decorative.<\/strong><\/li>\n<\/ol>\n<\/details>\n<details>\n<summary>PowerPoint<\/summary>\n<ol>\n<li>Move to\u00a0<strong>Insert<\/strong>\u00a0and select<strong>\u00a0Insert Textbox.<\/strong><\/li>\n<li>Place the textbox under the image and type your caption.<\/li>\n<li><strong>Control\u00a0<\/strong>(<strong>Command<\/strong>\u00a0on macOS) and click, or click and drag over, the image and the textbox.<\/li>\n<li>Right-click the image and select\u00a0<strong>Group &gt; Group.<\/strong><\/li>\n<li>Or, on the\u00a0<strong>Home\u00a0<\/strong>tab, select\u00a0<strong>Arrange &gt; Group &gt; Group.<\/strong><\/li>\n<li>Select your new group and copy (right-click &gt;\u00a0<strong>Copy<\/strong>\u00a0or\u00a0<strong>Control\u00a0<\/strong>[<strong>Command\u00a0<\/strong>on macOS] and\u00a0<strong>c<\/strong>).<\/li>\n<li>On the\u00a0<strong>Home\u00a0<\/strong>tab, choose\u00a0<strong>Paste &gt; Paste Special.<\/strong><\/li>\n<li>Choose\u00a0<strong>Picture (PNG)<\/strong>\u00a0and select\u00a0<strong>Ok.<\/strong><\/li>\n<li>Right-click on newly grouped image and select\u00a0<strong>Edit Alt Text&#8230;<\/strong><\/li>\n<li>Check\u00a0<strong>Mark as decorative.<\/strong><\/li>\n<li>Remove old image and textbox.<\/li>\n<\/ol>\n<\/details>\n<details>\n<summary>PDF<\/summary>\n<p>The image caption should be marked as an artifact along with the image.<\/p>\n<\/details>\n<details>\n<summary>Webpage<\/summary>\n<ol>\n<li>Use <code>&lt;figure&gt;<\/code> for proper formatting to include a caption via <code>&lt;figcaption&gt;<\/code><\/li>\n<li>Enter an alt attribute of alt=&#8221;&#8221; for the image.<\/li>\n<li>Use <code>aria-hidden=\"true\"<\/code> to ensure a screen reader will not read the <code>&lt;figcaption&gt;<\/code> tag.<\/li>\n<\/ol>\n<p>Wrap the <code>&lt;figcaption&gt;<\/code> in a <code>&lt;div&gt;<\/code>, for example:<\/p>\n<p><code>&lt;figure&gt;<\/code><\/p>\n<p><code>&lt;img src=\"example.png\"\u00a0alt=\"\"\u00a0width=\"500\"\u00a0height=\"600\"&gt;<\/code><\/p>\n<p><code>&lt;div aria-hidden=\"true\"&gt;<\/code><\/p>\n<p><code>&lt;figcaption&gt;Image caption to be hidden from screen readers&lt;\/figcaption&gt;<\/code><\/p>\n<p><code>&lt;\/div&gt;<\/code><\/p>\n<p><code>&lt;\/figure&gt;<\/code><\/p>\n<\/details>\n<h2><a id=\"writing\"><\/a>Writing Alt Text<\/h2>\n<p>Before writing alt text, consider the <strong>context<\/strong> (information around image in content), <strong>purpose<\/strong> (what the image contributes), and <strong>meaning<\/strong> (the message the image conveys).<\/p>\n<p>Understand that graphics can be informative, functional, or decorative. An informative graphic includes information and must be accompanied by a text description. A functional image performs an action like a link or button; the alt text must indicate what the action will be when the graphic is activated. A decorative image is purely for aesthetic purposes such as a border or background. Note, when accompanied by alt text or a figure caption, informative images can be marked as decorative.<\/p>\n<p>To begin writing alt text, consider how you would describe the image to someone over the phone.<\/p>\n<p><a href=\"https:\/\/www.scribely.com\/\">Caroline Desrosiers<\/a> offers a formula to write alt text:<\/p>\n<ol>\n<li>Identify the image <strong>type<\/strong> (if not a photo)\n<ol>\n<li>Indicate if an image is a diagram, map, symbol, gif, drawing, cartoon, etc. The added context will orient users and aid their understanding.<\/li>\n<\/ol>\n<\/li>\n<li>Describe the <strong>focus<\/strong> of the image\n<ol>\n<li>What is the most important information in the image.<\/li>\n<\/ol>\n<\/li>\n<li>Add relevant <strong>details<\/strong>\n<ol>\n<li>Add details that contribute information or meaning but are not the focus.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p>Let&#8217;s consider this example:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2125 size-medium alignleft\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/12\/UN_emblem_blue.svg_-300x255.png\" alt=\"Graphic of north pole centered globe surrounded by olive branches.\" width=\"300\" height=\"255\" srcset=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/12\/UN_emblem_blue.svg_-300x255.png 300w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/12\/UN_emblem_blue.svg_-1024x870.png 1024w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/12\/UN_emblem_blue.svg_-768x653.png 768w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/12\/UN_emblem_blue.svg_-1536x1305.png 1536w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/12\/UN_emblem_blue.svg_-2048x1741.png 2048w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/12\/UN_emblem_blue.svg_-65x55.png 65w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/12\/UN_emblem_blue.svg_-225x191.png 225w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/12\/UN_emblem_blue.svg_-350x297.png 350w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><strong>Type<\/strong> = graphic<\/p>\n<p><strong>Focus<\/strong> = north pole centered globe<\/p>\n<p><strong>Details<\/strong> = surrounded by olive branches. This is the United Nations logo.<\/p>\n<p>So, that provides us with alt text that would read &#8220;Graphic of north pole centered globe surrounded by olive branches. This is the United Nations logo.&#8221;<\/p>\n<div class=\"clearfix\"><\/div>\n<p>Alt text should be succinct and accurate, including punctuation and grammar. There is no limit to the length of alternative text but aim for a sentence or two at most to provide a pleasant reading experience.<\/p>\n<p>Other types of images might be suited to a different formula. Object &#8211; Action &#8211; Context (Chen, 2020) is a method similar to type, focus, detail mentioned above.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4571 alignleft\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ExampleChart-300x175.png\" alt=\"A line graph that shows the amount of alt text written increasing and the difficulty in writing alt text decreasing over time. The lines meet before and after the second time period as writing becomes more difficult and then easier.\" width=\"500\" height=\"292\" srcset=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ExampleChart-300x175.png 300w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ExampleChart-1024x598.png 1024w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ExampleChart-768x448.png 768w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ExampleChart-1536x897.png 1536w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ExampleChart-65x38.png 65w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ExampleChart-225x131.png 225w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ExampleChart-350x204.png 350w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ExampleChart.png 1982w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><strong>Object<\/strong> = Line graph<\/p>\n<p><strong>Action<\/strong> = graph shows the amount of alt text written and the difficulty encountered in writing alt text over time.<\/p>\n<p><strong>Context<\/strong> = The difficulty in writing alt text rises briefly before quickly declining over time as the amount of alt text written increases consistently after an initial dip.<\/p>\n<p>This method provides us with the alt text &#8220;A line graph that shows the amount of alt text written and the difficulty in writing alt text over time. The difficulty in writing alt text rises briefly before quickly declining over time as the amount of alt text written increases consistently after an initial dip.&#8221;<\/p>\n<h3>Use Relational Terms<\/h3>\n<p>Describe the relative size and scale of elements in the graphic. Describe elements relative to the subject, one another, or to a common object.<\/p>\n<p>Describe the directional and positional information of objects in the graphic relative to the frame, such as &#8220;on the right&#8221; or &#8220;near the top left corner.&#8221;<\/p>\n<p>Depending on context, terms like &#8220;partial view,&#8221; &#8220;bird&#8217;s-eye view,&#8221; or &#8220;close-up&#8221; can be crucial.<\/p>\n<p>Materials, mediums, and textures can be identified by name where possible.<\/p>\n<p>For an image of a recognizable person or place, name them directly but also describe any relevant details.<\/p>\n<h3>What to Avoid<\/h3>\n<p>If a photo, do not include &#8220;photo of&#8230;&#8221; or &#8220;image of&#8230;&#8221;<\/p>\n<ul>\n<li>However, \u201cScreenshot of&#8230;\u201d, &#8220;diagram&#8230;&#8221;, &#8220;map of&#8230;&#8221;, &#8220;cartoon drawing&#8230;&#8221; are useful information to orient users.<\/li>\n<\/ul>\n<p>Do not include:<\/p>\n<ul>\n<li>Copyright information or attribution.\n<ul>\n<li>Copyright information should be included in a caption below the image or in a list of references.<\/li>\n<\/ul>\n<\/li>\n<li>Emoticons.<\/li>\n<li>Hashtags.<\/li>\n<li>SEO keywords.<\/li>\n<li>Promotional material.<\/li>\n<li>Links.<\/li>\n<\/ul>\n<p>Do not repeat information contained in adjacent text or included in a visible caption.<\/p>\n<ul>\n<li>If the relevant information of an image is include in a caption or adjacent text, you can mark the image as decorative.<\/li>\n<li>If graphic element has a descriptive caption and is labelled with &#8220;Figure 1&#8221; for example, alt text could read &#8220;Figure 1, image caption contains description.&#8221;<\/li>\n<li>Image captions are useful for copyright, attribution, more information, or links.<\/li>\n<\/ul>\n<p>Do not editorialize or include your own feelings or bias. Only include the important information to provide an accurate description.<\/p>\n<p>Do not make any assumptions about gender or ethnicity. Prefer &#8220;they,&#8221; &#8220;them,&#8221; or &#8220;person&#8221; unless details are verifiable.<\/p>\n<p>AI has improved the accuracy of machine-generated alternative text. Keep in mind that even an accurate description will provide no context or purpose. AI generated alt text may be useful as a starting point to be edited by a human.<\/p>\n<h2><a id=\"platforms\"><\/a>Common Platform Guides<\/h2>\n<p>Introductory resources on adding alt text in common platforms:<\/p>\n<details>\n<summary>Microsoft Office<\/summary>\n<p>To add alt text in Word and PowerPoint:<\/p>\n<ol>\n<li>Right click on an image and select <strong>Edit Alt Text&#8230;<\/strong> <strong>(View Alt Text&#8230;<\/strong> on macOS, <strong>Edit Picture Alt Text<\/strong> on Office 365)<\/li>\n<li>Or, use the <strong>Picture Format<\/strong> Tab and select <strong>Alt Text<\/strong><\/li>\n<li>Type an image description<\/li>\n<\/ol>\n<p>Read more about adding <a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/word-accessibility-3\/#alt\">alt text in Word<\/a> and <a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/powerpoint-accessibility-3\/#alttext\">PowerPoint<\/a>.<\/p>\n<\/details>\n<details>\n<summary>Brightspace<\/summary>\n<p>To add alt text to images in Brightspace:<\/p>\n<ol>\n<li>When adding an image, you will be prompted to add alternative text or mark the image as decorative<\/li>\n<li>To add alt text to existing images:\n<ol>\n<li>Select the image<\/li>\n<li>Choose<strong> Image Options<\/strong><\/li>\n<li>Enter alternative text or check <strong>Image is decorative<\/strong><\/li>\n<li>Choose <strong>Save<\/strong><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p>Review the <a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/brightspace-accessibility-3\/#alt-text\">Brightspace Alternative Text<\/a> chapter later in this guide and consult D2L guides on <a href=\"https:\/\/community.d2l.com\/brightspace\/kb\/articles\/1379-alt-text-for-web-page-images\">Alt Text for Brightspace Web Page Images<\/a>.<\/p>\n<\/details>\n<details>\n<summary>H5P<\/summary>\n<p>To add alternative text to H5P images, enter a description in the <strong>Alternative text<\/strong> field or check <strong>Decorative only<\/strong>.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9724\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/h5paltexttool.png\" alt=\"\" width=\"1033\" height=\"567\" srcset=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/h5paltexttool.png 1033w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/h5paltexttool-300x165.png 300w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/h5paltexttool-1024x562.png 1024w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/h5paltexttool-768x422.png 768w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/h5paltexttool-65x36.png 65w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/h5paltexttool-225x123.png 225w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/h5paltexttool-350x192.png 350w\" sizes=\"auto, (max-width: 1033px) 100vw, 1033px\" \/><\/p>\n<p>Read more about <a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/h5p\/#alt\">adding alt text in H5P<\/a>.<\/p>\n<\/details>\n<details>\n<summary>WordPress<\/summary>\n<p>To add alternative text in WordPress or Pressbooks:<br \/>\nWhen uploading an image to WordPress, complete the <strong>Alt Text<\/strong> field in Media Library.<\/p>\n<p>You can also add alt text in the Text\/HTML editor in WordPress with alt=&#8221;description of image&#8221;.<\/p>\n<p>Or, select an image and choose <strong>Edit<\/strong>, complete the alternative text field and choose Update.<\/p>\n<p>Consult the <a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/wordpress-and-pressbooks\/#images\">Pressbooks chapter<\/a> and <a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/wordpress-block-editor\/#alt\">WordPress chapter<\/a> of this guide for more information.<\/p>\n<p>Read more about <a href=\"https:\/\/make.wordpress.org\/accessibility\/handbook\/content\/alternative-text-for-images\/\">alternative text for images<\/a> from WordPress support documents.<\/p>\n<\/details>\n<details>\n<summary>PDF<\/summary>\n<p>To add alt text to PDFs:<\/p>\n<ol>\n<li>Open <strong>Reading Order<\/strong> pane<\/li>\n<li>Open <strong>Reading Order Panel<\/strong><\/li>\n<li>Right click on an image and choose <strong>Edit Alternate text<\/strong><\/li>\n<li>Enter your description and choose <strong>Ok<\/strong><\/li>\n<li>For a decorative image, select the image and choose <strong>Background\/artifact<\/strong><\/li>\n<\/ol>\n<\/details>\n<details>\n<summary>HTML<\/summary>\n<p>Alt text is entered in the <code>&lt;img&gt;<\/code> alt attribute. Decorative images must be marked alt=&#8221;&#8221;<\/p>\n<p>In WordPress and Pressbooks alt text is added to the <strong>Alternative Text<\/strong> field in the Media Library.<\/p>\n<\/details>\n<details>\n<summary>Other platforms<\/summary>\n<p><a href=\"https:\/\/support.google.com\/docs\/answer\/6199477?hl=en\">Google Docs and Sheets support alt text.<\/a><\/p>\n<p><a href=\"https:\/\/help.twitter.com\/en\/using-twitter\/picture-descriptions\">Twitter supports alt text<\/a> for images you post.<\/p>\n<p>Facebook allows users to <a href=\"https:\/\/m.facebook.com\/help\/214124458607871\/?helpref=faq_content\">add alt text on Facebook photos<\/a>.<\/p>\n<p><a href=\"https:\/\/help.instagram.com\/503708446705527\">Instagram adds automatic alt text<\/a> to images. Note that automatic alt text is rarely accurate and should be checked and edited.<\/p>\n<\/details>\n<p>Later platform-specific chapters will cover how to provide equivalent text, add captions, and populate the alt text field in greater detail.<\/p>\n<h2><a id=\"without\"><\/a>View Content Without Images<\/h2>\n<p>If you are not sure about an image, try viewing your content without the image. If no information is lost, you can mark the image as decorative.<\/p>\n<details>\n<summary>To view web content without images:<\/summary>\n<p>In Google Chrome:<\/p>\n<ol>\n<li>Select <strong>View site information<\/strong> (padlock icon on left side of address bar).<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9684 size-large\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages1-1024x595.png\" alt=\"\" width=\"1024\" height=\"595\" srcset=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages1-1024x595.png 1024w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages1-300x174.png 300w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages1-768x446.png 768w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages1-65x38.png 65w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages1-225x131.png 225w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages1-350x203.png 350w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages1.png 1129w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/li>\n<li>Select <strong>Site settings<\/strong>.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9685 size-large\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages2-1024x595.png\" alt=\"\" width=\"1024\" height=\"595\" srcset=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages2-1024x595.png 1024w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages2-300x174.png 300w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages2-768x446.png 768w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages2-65x38.png 65w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages2-225x131.png 225w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages2-350x203.png 350w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages2.png 1129w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/li>\n<li>Beside Images, choose <strong>Block<\/strong>.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9686 size-large\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages3-e1752533483277-1024x508.png\" alt=\"\" width=\"1024\" height=\"508\" srcset=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages3-e1752533483277-1024x508.png 1024w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages3-e1752533483277-300x149.png 300w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages3-e1752533483277-768x381.png 768w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages3-e1752533483277-65x32.png 65w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages3-e1752533483277-225x112.png 225w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages3-e1752533483277-350x174.png 350w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages3-e1752533483277.png 1455w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/li>\n<li>Move back to the website tab and click <strong>Reload<\/strong> or refresh the page.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9687 size-large\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages4-1024x595.png\" alt=\"\" width=\"1024\" height=\"595\" srcset=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages4-1024x595.png 1024w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages4-300x174.png 300w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages4-768x446.png 768w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages4-65x38.png 65w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages4-225x131.png 225w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages4-350x203.png 350w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages4.png 1129w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/li>\n<li>The page will load without images. Verify that no information is lost when images are removed.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9688 size-large\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages5-1024x595.png\" alt=\"\" width=\"1024\" height=\"595\" srcset=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages5-1024x595.png 1024w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages5-300x174.png 300w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages5-768x446.png 768w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages5-1536x893.png 1536w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages5-65x38.png 65w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages5-225x131.png 225w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages5-350x203.png 350w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages5.png 1858w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/li>\n<\/ol>\n<p>To restore images:<\/p>\n<ol>\n<li>Click on image icon with red x in the address bar and select <strong>Always allow [website] to show images<\/strong>.<\/li>\n<li>Click <strong>Done<\/strong>.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9689 size-large\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages6.1-1024x595.png\" alt=\"\" width=\"1024\" height=\"595\" srcset=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages6.1-1024x595.png 1024w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages6.1-300x174.png 300w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages6.1-768x446.png 768w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages6.1-65x38.png 65w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages6.1-225x131.png 225w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages6.1-350x203.png 350w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages6.1.png 1129w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><br \/>\nOr<\/li>\n<li>Select <strong>View site information<\/strong> (padlock icon on left side of address bar) and toggle Images on or click <strong>Reset permission<\/strong>.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9690 size-large\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages6.2-1024x595.png\" alt=\"\" width=\"1024\" height=\"595\" srcset=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages6.2-1024x595.png 1024w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages6.2-300x174.png 300w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages6.2-768x446.png 768w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages6.2-65x38.png 65w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages6.2-225x131.png 225w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages6.2-350x203.png 350w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/ViewWOImages6.2.png 1129w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/li>\n<\/ol>\n<\/details>\n<h2>Nothing New<\/h2>\n<p>Describing an image in text is not a new concept. Consider this postcard by <a href=\"https:\/\/www.flickr.com\/photos\/136379766@N05\/\">Al Harvey<\/a> from the mid-1970s:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8765\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/Vancouver74-77.png\" alt=\"\" width=\"3458\" height=\"2411\" srcset=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/Vancouver74-77.png 3458w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/Vancouver74-77-300x209.png 300w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/Vancouver74-77-1024x714.png 1024w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/Vancouver74-77-768x535.png 768w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/Vancouver74-77-1536x1071.png 1536w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/Vancouver74-77-2048x1428.png 2048w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/Vancouver74-77-65x45.png 65w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/Vancouver74-77-225x157.png 225w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/Vancouver74-77-350x244.png 350w\" sizes=\"auto, (max-width: 3458px) 100vw, 3458px\" \/><\/p>\n<p>On the reverse, note the description:<\/p>\n<figure id=\"attachment_8766\" aria-describedby=\"caption-attachment-8766\" style=\"width: 3473px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-8766\" style=\"border: 1px solid #555\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/Vancouver74-77Back.png\" alt=\"\" width=\"3473\" height=\"2432\" srcset=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/Vancouver74-77Back.png 3473w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/Vancouver74-77Back-300x210.png 300w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/Vancouver74-77Back-1024x717.png 1024w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/Vancouver74-77Back-768x538.png 768w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/Vancouver74-77Back-1536x1076.png 1536w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/Vancouver74-77Back-2048x1434.png 2048w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/Vancouver74-77Back-65x46.png 65w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/Vancouver74-77Back-225x158.png 225w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/08\/Vancouver74-77Back-350x245.png 350w\" sizes=\"auto, (max-width: 3473px) 100vw, 3473px\" \/><figcaption id=\"caption-attachment-8766\" class=\"wp-caption-text\">VANCOUVER, B.C., Canada<br \/>Aerial view of Downtown Vancouver, Burrard Inlet and the North Shore Mountains.<br \/>This aerial view showing Granville Street Bridge in the foreground is a clear testimonial to the exciting skyline and surrounding beauty of this seaport city. The residential areas of West and North Vancouver are seen in the background.<br \/>Photo by Al Harvey<\/figcaption><\/figure>\n<p><span style=\"margin-top: 0\">The inclusion of this description (while not necessarily perfect for alt text) is an excellent example of a figure caption that describes the content of an image. While it is important to always include a text equivalent of an image, this postcard exemplifies why that practice is valuable beyond accessibility considerations and has been common practice for decades.<\/span><\/p>\n<div class=\"textbox textbox--key-takeaways\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\"><a id=\"Further-reading\"><\/a>Further Reading<\/p>\n<\/header>\n<div class=\"textbox__content\">\n<p>Tips for <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/\" target=\"_blank\" rel=\"noopener\">alt text by type of image from W3C Web Accessibility Initiative<\/a>.<\/p>\n<p>W3 <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/decision-tree\/\" target=\"_blank\" rel=\"noopener\">Web Accessibility Initiative\u2019s alt text decision tree<\/a> is useful for narrowing down what your alt text should convey.<\/p>\n<p><a href=\"https:\/\/webaim.org\/techniques\/alttext\/\" target=\"_blank\" rel=\"noopener\">WebAIM offers a comprehensive resource on alt text.<\/a><\/p>\n<p><a href=\"https:\/\/accessibility.huit.harvard.edu\/describe-content-images\">Write helpful Alt Text to describe images.<\/a><\/p>\n<\/div>\n<\/div>\n<h2 class=\"references\">Works Cited<\/h2>\n<p>Chen, Alex. &#8220;<a href=\"https:\/\/uxdesign.cc\/how-to-write-an-image-description-2f30d3bf5546\">How to write an image description<\/a>.&#8221;\u00a0<em>UX Collective &#8211; Medium,<\/em> 2020.<\/p>\n<div class=\"glossary\"><span class=\"screen-reader-text\" id=\"definition\">definition<\/span><template id=\"term_48_1161\"><div class=\"glossary__definition\" role=\"dialog\" data-id=\"term_48_1161\"><div tabindex=\"-1\"><p>Alternative text is a text equivalent of graphics in a document or webpage. Alternative text is coded to be hidden visually, but read to a screen reader user.<\/p>\n<\/div><button><span aria-hidden=\"true\">&times;<\/span><span class=\"screen-reader-text\">Close definition<\/span><\/button><\/div><\/template><template id=\"term_48_8174\"><div class=\"glossary__definition\" role=\"dialog\" data-id=\"term_48_8174\"><div tabindex=\"-1\"><\/div><button><span aria-hidden=\"true\">&times;<\/span><span class=\"screen-reader-text\">Close definition<\/span><\/button><\/div><\/template><template id=\"term_48_1291\"><div class=\"glossary__definition\" role=\"dialog\" data-id=\"term_48_1291\"><div tabindex=\"-1\"><p>An image that does not contain unique information or is used for visual appeal only. Decorative images must be marked as decorative or use alt=\"\"<\/p>\n<\/div><button><span aria-hidden=\"true\">&times;<\/span><span class=\"screen-reader-text\">Close definition<\/span><\/button><\/div><\/template><\/div>","protected":false},"author":1367,"menu_order":10,"template":"","meta":{"pb_show_title":"on","pb_short_title":"Alternative Text","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[48],"contributor":[],"license":[],"class_list":["post-48","chapter","type-chapter","status-publish","hentry","chapter-type-numberless"],"part":6454,"_links":{"self":[{"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapters\/48","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/wp\/v2\/users\/1367"}],"version-history":[{"count":26,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapters\/48\/revisions"}],"predecessor-version":[{"id":10350,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapters\/48\/revisions\/10350"}],"part":[{"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/parts\/6454"}],"metadata":[{"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapters\/48\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/wp\/v2\/media?parent=48"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapter-type?post=48"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/wp\/v2\/contributor?post=48"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/wp\/v2\/license?post=48"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}