{"id":6507,"date":"2024-02-11T22:17:56","date_gmt":"2024-02-12T03:17:56","guid":{"rendered":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/?post_type=chapter&#038;p=6507"},"modified":"2025-09-23T12:57:54","modified_gmt":"2025-09-23T16:57:54","slug":"alt-text-quick-guide","status":"publish","type":"chapter","link":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/alt-text-quick-guide\/","title":{"raw":"Alternative Text Quick Start Guide","rendered":"Alternative Text Quick Start Guide"},"content":{"raw":"<img class=\"noborder alignright wp-image-8446\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Alt-text-logo-2.png\" alt=\"\" width=\"120\" height=\"120\" \/>\r\n<h2 class=\"quickguideh2\">Alternative Text\r\nQuick Start Guide<\/h2>\r\n<div class=\"textbox shaded\">Alternative text (alt text) is an equivalent text description of visual information.<\/div>\r\n<p style=\"margin-bottom: 1em\">Visual elements that include information must have a text-based description. Graphics, such as backgrounds, borders, or visual flourishes that do not contribute information are decorative.<\/p>\r\n\r\n<h3 class=\"list\">Mark decorative images<\/h3>\r\nImages included for purely aesthetic purposes (or that have an adjacent text equivalent or descriptive figure caption) should be marked as decorative.\r\n<div class=\"customrow\">\r\n<div class=\"customcolumn\"><img class=\"alignnone wp-image-6598 size-full\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/chrome_BtavTQvRdw.png\" alt=\"\" width=\"513\" height=\"426\" \/><\/div>\r\n<div class=\"customcolumn\">\r\n<div class=\"textbox\" style=\"margin-top: 0\">If unsure, err on the side of adding alt text. It is better to repeat information than have someone miss out completely.<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"clearfix\"><\/div>\r\n<h3 class=\"list\">Describe informative images<\/h3>\r\nFor visuals that contain information there are three methods to provide alternative text:\r\n<div class=\"flex-grid\">\r\n<div class=\"col\"><strong>Adjacent<\/strong> <strong>text<\/strong> provides details equivalent to the visual information. Use visuals and text to support, reinforce, and reference each other. All users can access important information when presented in plain text.<\/div>\r\n<div class=\"col\"><strong>Figure captions<\/strong> are generally placed below visual elements and provides all users with supplementary information such as citations, accreditation, and contents and are useful to orient all users.<\/div>\r\n<div class=\"col\"><strong>The alt text field<\/strong> presents a concise description of visual content to screen reader software used by blind and low vision users. The alt text field is also where images are marked as decorative when appropriate.<\/div>\r\n<\/div>\r\nDepending on the complexity of the graphic, knowing which <a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/alt-text-for-complex-images\/#beyond\">type of text alternative<\/a> to provide is important. Alt text depends on context and purpose. If equivalent information is present in adjacent text or a figure caption, graphics should be marked as decorative.\r\n<div class=\"customrow\">\r\n<div class=\"customcolumn\">\r\n<div class=\"textbox\" style=\"margin-top: 0;margin-bottom: 1.5em\">\r\n\r\nMarking images as decorative, adding a figure caption, or including alt text will differ depending on platform or software. Refer to later chapters in this guide for instructions to add text equivalents to visuals in specific platforms.\r\n\r\n<\/div>\r\n<\/div>\r\n<div class=\"customcolumn\"><img class=\"alignnone wp-image-6599 size-full\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Screenshot-2024-02-12-at-13.10.12.png\" alt=\"\" width=\"321\" height=\"449\" \/><\/div>\r\n<\/div>\r\n<div class=\"clearfix\"><\/div>\r\n<h3 class=\"list\">Alt text = type + focus + details<\/h3>\r\nTo write alt text: Include the <strong>type<\/strong> of visual, describe the <strong>focus<\/strong>, and add essential <strong>details<\/strong>. Consider how you would describe the image if talking to a friend on the phone. Use proper punctuation and grammar and limit alt text to 2 or 3 brief sentences.\r\n<div class=\"textbox textbox--learning-objectives\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\">Alt Text Example<\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\n<img class=\"alignnone wp-image-7073 size-full\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Satellite_imagery_resolution_diagram-e1709748346837.jpg\" alt=\"Diagram of satellite image resolutions comparing real object shape to 30 metre, 10 metre, and 1 metre resolution images. The diagram explains that as the resolution of a satellite image increases the image will more accurately represent the true shape of an object.\" width=\"1727\" height=\"531\" \/><strong>[type]<\/strong> Diagram of <strong>[focus]\u00a0<\/strong>satellite image resolutions comparing real object shape to satellite images taken at 30 metre, 10 metre, and 1 metre resolutions. <strong>[details]<\/strong> The diagram illustrates that the shape of an object will be more accurately represented as the resolution of a satellite image increases.\r\n\r\n<\/div>\r\n<\/div>\r\n<h3 class=\"list\">Use AI as a starting point<\/h3>\r\n<img class=\"noborder alignleft wp-image-6694\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Copy-of-Untitled-Design-1-300x291.png\" alt=\"\" width=\"107\" height=\"103\" \/>AI has rapidly improved in describing images, particularly the structure of complex images and extracting text from images. Edit AI generated descriptions for accuracy and clarity. Read more about <a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/ai-generated-alt-text\/\">using AI to generate alt text<\/a>.\r\n\r\n&nbsp;\r\n<div class=\"textbox textbox--key-takeaways\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\">Moving forward...<\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\nUnderstand that alternative text is so fundamental to accessibility it is the first <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/non-text-content.html\">Web Content Accessibility Guideline (1.1.1)<\/a>. Writing alt text is somewhat of an art. Including adjacent text equivalents and reinforcing visual information with text is an excellent way to reach everyone. Remember to try your best, ask for help, and try to be as inclusive as possible.\r\n\r\nFor <strong>more information<\/strong> on Alt Text, move to the next page.\r\n\r\n<\/div>\r\n<\/div>","rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"noborder alignright wp-image-8446\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Alt-text-logo-2.png\" alt=\"\" width=\"120\" height=\"120\" srcset=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Alt-text-logo-2.png 1080w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Alt-text-logo-2-300x300.png 300w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Alt-text-logo-2-1024x1024.png 1024w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Alt-text-logo-2-150x150.png 150w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Alt-text-logo-2-768x768.png 768w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Alt-text-logo-2-65x65.png 65w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Alt-text-logo-2-225x225.png 225w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Alt-text-logo-2-350x350.png 350w\" sizes=\"auto, (max-width: 120px) 100vw, 120px\" \/><\/p>\n<h2 class=\"quickguideh2\">Alternative Text<br \/>\nQuick Start Guide<\/h2>\n<div class=\"textbox shaded\">Alternative text (alt text) is an equivalent text description of visual information.<\/div>\n<p style=\"margin-bottom: 1em\">Visual elements that include information must have a text-based description. Graphics, such as backgrounds, borders, or visual flourishes that do not contribute information are decorative.<\/p>\n<h3 class=\"list\">Mark decorative images<\/h3>\n<p>Images included for purely aesthetic purposes (or that have an adjacent text equivalent or descriptive figure caption) should be marked as decorative.<\/p>\n<div class=\"customrow\">\n<div class=\"customcolumn\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6598 size-full\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/chrome_BtavTQvRdw.png\" alt=\"\" width=\"513\" height=\"426\" 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: 513px) 100vw, 513px\" \/><\/div>\n<div class=\"customcolumn\">\n<div class=\"textbox\" style=\"margin-top: 0\">If unsure, err on the side of adding alt text. It is better to repeat information than have someone miss out completely.<\/div>\n<\/div>\n<\/div>\n<div class=\"clearfix\"><\/div>\n<h3 class=\"list\">Describe informative images<\/h3>\n<p>For visuals that contain information there are three methods to provide alternative text:<\/p>\n<div class=\"flex-grid\">\n<div class=\"col\"><strong>Adjacent<\/strong> <strong>text<\/strong> provides details equivalent to the visual information. Use visuals and text to support, reinforce, and reference each other. All users can access important information when presented in plain text.<\/div>\n<div class=\"col\"><strong>Figure captions<\/strong> are generally placed below visual elements and provides all users with supplementary information such as citations, accreditation, and contents and are useful to orient all users.<\/div>\n<div class=\"col\"><strong>The alt text field<\/strong> presents a concise description of visual content to screen reader software used by blind and low vision users. The alt text field is also where images are marked as decorative when appropriate.<\/div>\n<\/div>\n<p>Depending on the complexity of the graphic, knowing which <a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/alt-text-for-complex-images\/#beyond\">type of text alternative<\/a> to provide is important. Alt text depends on context and purpose. If equivalent information is present in adjacent text or a figure caption, graphics should be marked as decorative.<\/p>\n<div class=\"customrow\">\n<div class=\"customcolumn\">\n<div class=\"textbox\" style=\"margin-top: 0;margin-bottom: 1.5em\">\n<p>Marking images as decorative, adding a figure caption, or including alt text will differ depending on platform or software. Refer to later chapters in this guide for instructions to add text equivalents to visuals in specific platforms.<\/p>\n<\/div>\n<\/div>\n<div class=\"customcolumn\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6599 size-full\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Screenshot-2024-02-12-at-13.10.12.png\" alt=\"\" width=\"321\" height=\"449\" srcset=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Screenshot-2024-02-12-at-13.10.12.png 321w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Screenshot-2024-02-12-at-13.10.12-214x300.png 214w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Screenshot-2024-02-12-at-13.10.12-65x91.png 65w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Screenshot-2024-02-12-at-13.10.12-225x315.png 225w\" sizes=\"auto, (max-width: 321px) 100vw, 321px\" \/><\/div>\n<\/div>\n<div class=\"clearfix\"><\/div>\n<h3 class=\"list\">Alt text = type + focus + details<\/h3>\n<p>To write alt text: Include the <strong>type<\/strong> of visual, describe the <strong>focus<\/strong>, and add essential <strong>details<\/strong>. Consider how you would describe the image if talking to a friend on the phone. Use proper punctuation and grammar and limit alt text to 2 or 3 brief sentences.<\/p>\n<div class=\"textbox textbox--learning-objectives\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\">Alt Text Example<\/p>\n<\/header>\n<div class=\"textbox__content\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7073 size-full\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Satellite_imagery_resolution_diagram-e1709748346837.jpg\" alt=\"Diagram of satellite image resolutions comparing real object shape to 30 metre, 10 metre, and 1 metre resolution images. The diagram explains that as the resolution of a satellite image increases the image will more accurately represent the true shape of an object.\" width=\"1727\" height=\"531\" srcset=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Satellite_imagery_resolution_diagram-e1709748346837.jpg 1727w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Satellite_imagery_resolution_diagram-e1709748346837-300x92.jpg 300w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Satellite_imagery_resolution_diagram-e1709748346837-1024x315.jpg 1024w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Satellite_imagery_resolution_diagram-e1709748346837-768x236.jpg 768w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Satellite_imagery_resolution_diagram-e1709748346837-1536x472.jpg 1536w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Satellite_imagery_resolution_diagram-e1709748346837-65x20.jpg 65w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Satellite_imagery_resolution_diagram-e1709748346837-225x69.jpg 225w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Satellite_imagery_resolution_diagram-e1709748346837-350x108.jpg 350w\" sizes=\"auto, (max-width: 1727px) 100vw, 1727px\" \/><strong>[type]<\/strong> Diagram of <strong>[focus]\u00a0<\/strong>satellite image resolutions comparing real object shape to satellite images taken at 30 metre, 10 metre, and 1 metre resolutions. <strong>[details]<\/strong> The diagram illustrates that the shape of an object will be more accurately represented as the resolution of a satellite image increases.<\/p>\n<\/div>\n<\/div>\n<h3 class=\"list\">Use AI as a starting point<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"noborder alignleft wp-image-6694\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Copy-of-Untitled-Design-1-300x291.png\" alt=\"\" width=\"107\" height=\"103\" srcset=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Copy-of-Untitled-Design-1-300x291.png 300w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Copy-of-Untitled-Design-1-65x63.png 65w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Copy-of-Untitled-Design-1-225x218.png 225w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Copy-of-Untitled-Design-1-350x339.png 350w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2024\/02\/Copy-of-Untitled-Design-1.png 455w\" sizes=\"auto, (max-width: 107px) 100vw, 107px\" \/>AI has rapidly improved in describing images, particularly the structure of complex images and extracting text from images. Edit AI generated descriptions for accuracy and clarity. Read more about <a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/ai-generated-alt-text\/\">using AI to generate alt text<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<div class=\"textbox textbox--key-takeaways\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\">Moving forward&#8230;<\/p>\n<\/header>\n<div class=\"textbox__content\">\n<p>Understand that alternative text is so fundamental to accessibility it is the first <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/non-text-content.html\">Web Content Accessibility Guideline (1.1.1)<\/a>. Writing alt text is somewhat of an art. Including adjacent text equivalents and reinforcing visual information with text is an excellent way to reach everyone. Remember to try your best, ask for help, and try to be as inclusive as possible.<\/p>\n<p>For <strong>more information<\/strong> on Alt Text, move to the next page.<\/p>\n<\/div>\n<\/div>\n","protected":false},"author":1655,"menu_order":9,"template":"","meta":{"pb_show_title":"","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-6507","chapter","type-chapter","status-publish","hentry"],"part":6454,"_links":{"self":[{"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapters\/6507","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\/1655"}],"version-history":[{"count":25,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapters\/6507\/revisions"}],"predecessor-version":[{"id":10005,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapters\/6507\/revisions\/10005"}],"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\/6507\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/wp\/v2\/media?parent=6507"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapter-type?post=6507"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/wp\/v2\/contributor?post=6507"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/wp\/v2\/license?post=6507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}