{"id":1178,"date":"2017-10-18T14:50:27","date_gmt":"2017-10-18T21:50:27","guid":{"rendered":"https:\/\/www.hmc.edu\/communications\/?page_id=1178"},"modified":"2023-05-02T14:12:59","modified_gmt":"2023-05-02T21:12:59","slug":"alt-decision-tree-alternative-text-guide","status":"publish","type":"page","link":"https:\/\/www.hmc.edu\/communications\/accessibility-resources\/alt-decision-tree-alternative-text-guide\/","title":{"rendered":"Alt Decision Tree and Alternative Text Guide"},"content":{"rendered":"\n<p>This page provides guidance on the correct use of alternative text for images within web pages. It uses content from <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/decision-tree\/\">An alt Decision Tree<\/a> by the W3C. Email Peter Hobley (&#112;ho&#98;ley&#64;h&#109;&#99;&#46;e&#100;u) if you require further assistance.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Alt Decision Tree<\/h2>\n\n\n\n<ul class=\"wp-block-list\" id=\"decision-tree\">\n<li><strong>Does the image contain text?<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Yes:<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>\u2026 and the text is also present as real text nearby.<\/strong><br>Use an empty <code>alt<\/code> attribute. See <a href=\"#decorative\">Decorative Images<\/a>.<\/li>\n\n\n\n<li><strong>\u2026 and the text is only shown for visual effects.<\/strong><br>Use an empty <code>alt<\/code> attribute. See <a href=\"#decorative\">Decorative Images<\/a>.<\/li>\n\n\n\n<li><strong>\u2026 and the text has a specific function, for example is an icon.<\/strong><br>Use the <code>alt<\/code> attribute to communicate the function of the image. See <a href=\"#functional\">Functional Images<\/a>.<\/li>\n\n\n\n<li><strong>\u2026 and the text in the image is not present otherwise.<\/strong><br>Use the <code>alt<\/code> attribute to include the text of the image. See <a href=\"#text\">Images of Text<\/a>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>No:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Continue.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Is the image used in a link or a button, and would it be hard or impossible to understand what the link or the button does, if the image wasn\u2019t there?<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Yes:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Use the <code>alt<\/code> attribute to communicate the destination of the link or action taken. See <a href=\"#functional\">Functional Images<\/a>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>No:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Continue.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Does the image contribute meaning to the current page or context?<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Yes:<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>\u2026 and it\u2019s a simple graphic or photograph.<\/strong><br>Use a brief description of the image in a way that conveys that meaning in the <code>alt<\/code> attribute. See <a href=\"#informative\">Informative Images.<\/a><\/li>\n\n\n\n<li><strong>\u2026 and it\u2019s a graph or complex piece of information.<\/strong><br>Include the information contained in the image elsewhere on the page. See <a href=\"#complex\">Complex Images<\/a>.<\/li>\n\n\n\n<li><strong>\u2026 and it shows content that is redundant to real text nearby.<\/strong><br>Use an empty <code>alt<\/code> attribute. See (redundant) <a href=\"#functional\">Functional Images<\/a>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>No:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Continue.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Is the image purely decorative or not intended for the user?<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Yes:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Use an empty <code>alt<\/code> attribute. See <a href=\"#decorative\">Decorative Images<\/a>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>No:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Continue.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Is the image\u2019s use not listed above or it\u2019s unclear what <code>alt<\/code> text to provide?<\/strong>\n<ul class=\"wp-block-list\">\n<li>This decision tree does not cover all cases. Please contact Peter Hobley p&#104;&#111;&#98;&#108;&#101;y&#64;&#104;&#109;c&#46;e&#100;u&#32;f&#111;r further assistance.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"informative\">Informative Images<\/h2>\n\n\n\n<p>Visit <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/informative\/\">W3C&#8217;s Informative Images tutorial<\/a> for a detailed discussion. Its content is summarized below as it applies to the Harvey Mudd website.<\/p>\n\n\n\n<p>Informative images convey a simple concept or information that can be expressed in a short phrase or sentence. The text alternative should convey the meaning or content that is displayed visually, which typically isn\u2019t a literal description of the image.<\/p>\n\n\n\n<p>In some situations a detailed literal description may be needed, but only when the content of the image is all or part of the conveyed information. Whether to treat an image as informative or decorative is a judgment that authors make, based on the reason for including the image on the page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Images Used to Supplement Other Information<\/h3>\n\n\n\n<p>The following image shows the Venus fountain in Hixon Court. It supplements the adjacent text that explains the history of the sculpture. A short text alternative is sufficient to describe the information that is displayed visually but is not explained in the text; in this case, the text alternative is \u201cVenus sculpture standing on pedestal in the middle of a fish pond.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image alignleft\"><img decoding=\"async\" src=\"https:\/\/www.hmc.edu\/communications\/wp-content\/uploads\/sites\/19\/2018\/01\/venus-fountain-199x300.jpg\" alt=\"Venus sculpture standing on pedestal in the middle of a fish pond.\" class=\"wp-image-982\"\/><figcaption class=\"wp-element-caption\">Example<\/figcaption><\/figure>\n\n\n\n<figure class=\"clear html-example\">\n<figcaption>Code Snippet<\/figcaption>\n<pre><code>&lt;p&gt;\n   &lt;img src=\"venus-fountain.jpg\" alt=\"Venus sculpture standing on pedestal in the middle of a fish pond.\"&gt;\n   The Venus Fountain is of the school of Giovani Bologna (1524\u20131608), last of the great sculptors of the Italian Renaissance ...\n&lt;\/p&gt;<\/code><\/pre>\n<\/figure>\n\n\n\n<p><strong>Note:<\/strong> If the text included a description of the fountain itself in Hixon Court, &nbsp;the image might be considered redundant and therefore decorative. As this isn\u2019t mentioned in the text, the image is deemed to be informative.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Images Conveying Succinct Information<\/h3>\n\n\n\n<p>This simple photo illustrates how to operate a fire alarm. The information can be described in a short sentence, so the text alternative \u201cPush in the flap and pull down the lever&#8221; is given in the <code>alt<\/code> attribute.<\/p>\n\n\n\n<figure class=\"wp-block-image alignleft\"><img decoding=\"async\" src=\"https:\/\/www.hmc.edu\/communications\/wp-content\/uploads\/sites\/19\/2018\/01\/fire-alarm-225x300.jpg\" alt=\"Push in the flap and pull down.\" class=\"wp-image-985\"\/><figcaption class=\"wp-element-caption\">Example<\/figcaption><\/figure>\n\n\n\n<figure class=\"clear html-example\">\n<figcaption>Code Snippet<\/figcaption>\n<pre><code>&lt;img src=\"fire-alarm.jpg\" alt=\"Push in the flap and pull down the lever.\"&gt;<\/code><\/pre>\n<\/figure>\n\n\n\n<p><strong>Note 1:<\/strong> An alternative technique would be to provide the instructions within the main content rather than as a text alternative to the image. This technique makes all information available in text for everyone while providing an illustration for people who prefer to view the information visually.<\/p>\n\n\n\n<p><strong>Note 2:<\/strong> If more information than that of the diagram is intended to be conveyed by the image, it may be better to follow one of the approaches described in Complex images. For example, if the fact that this diagram appears on a bottle or if the shape and size of the bottle were relevant pieces of information, use a more detailed alternative text.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Images Conveying an Impression or Emotion<\/h3>\n\n\n\n<p>This photograph shows a gathering at Family Weekend. It\u2019s not of any one person in particular, so there is no need to identify individuals. It\u2019s being used to give the impression that Family Weekend promotes interaction. The text alternative is \u201cFamily Weekend brings everyone together.\u201d as this best describes the intended impression.<\/p>\n\n\n\n<figure class=\"wp-block-image alignleft\"><img decoding=\"async\" src=\"https:\/\/www.hmc.edu\/communications\/wp-content\/uploads\/sites\/19\/2018\/01\/family-weekend-300x200.jpg\" alt=\"Family Weekend brings everyone together\" class=\"wp-image-988\"\/><figcaption class=\"wp-element-caption\">Example<\/figcaption><\/figure>\n\n\n\n<figure class=\"clear html-example\">\n<figcaption>Code Snippet<\/figcaption>\n<pre><code>   &lt;img src=\"family-weekend.jpg\" alt=\"Family Weekend brings everyone together.\"&gt;<\/code><\/pre>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"decorative\">Decorative Images<\/h2>\n\n\n\n<p>Visit <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/decorative\/\">W3C&#8217;s Decorative Images tutorial<\/a> for a detailed discussion. Its content is summarized below as it applies to the Harvey Mudd website.<\/p>\n\n\n\n<p>Decorative images don\u2019t add information to a page&#8217;s content. E.g. the image&#8217;s information may be given in adjacent text; or the image&#8217;s purpose may be to make the page more visually attractive.<\/p>\n\n\n\n<p>In these cases, assistive technologies should be instructed to ignore the image by the use of null (empty) <code>alt<\/code> text should be provided (<code>alt=\"\"<\/code>). The addition of text values for these images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text.<\/p>\n\n\n\n<p>The author must make a judgment about whether or not to treat an image as decorative based on the reason for including the image on the page. Images may be decorative when they are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Supplementary to link text to improve its appearance or increase the clickable area;<\/li>\n\n\n\n<li>Illustrative of adjacent text but not contributing information (\u201ceye-candy\u201d);<\/li>\n\n\n\n<li>Identified and described by surrounding text.<\/li>\n<\/ul>\n\n\n\n<p>The examples below show how to use the <code>alt<\/code> attribute when decorative images are provided using the &lt;img&gt; element.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Decorative Image as Part of a Text Link<\/h3>\n\n\n\n<p>This generic thumbnail photo of the Harvey Mudd campus is used to make the link easier identify and increases the clickable area. It doesn&#8217;t add to the information provided in the adjacent link text (of the same anchor). In this case, use a null (empty) <code>alt<\/code> value for the image.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.hmc.edu\/communications\/wp-content\/uploads\/sites\/19\/2018\/01\/visit-campus-header-150x150.jpg\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Example<\/figcaption><\/figure>\n\n\n\n<figure class=\"html-example\">\n<figcaption>Code Snippet<\/figcaption>\n<pre><code>&lt;a href=\"hmc-no1-engineering.html\"&gt;\n   &lt;img src=\"shanahan-center.jpg\" alt=\"\"&gt;\n   &lt;strong&gt; Harvey Mudd\u2019s Undergraduate Engineering Program Ranked No. 1 in U.S.&lt;\/strong&gt;\n&lt;\/a&gt;<\/code><\/pre>\n<\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Image With Adjacent Text Alternative<\/h3>\n\n\n\n<p>This picture of the Harvey Mudd campus. There is no need to repeat this information, and a null (empty) alt value can be used for this image.<\/p>\n\n\n\n<figure class=\"wp-block-image alignleft\"><img decoding=\"async\" src=\"https:\/\/www.hmc.edu\/communications\/wp-content\/uploads\/sites\/19\/2018\/01\/visit-campus-header-150x150.jpg\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Example<\/figcaption><\/figure>\n\n\n\n<figure class=\"html-example\">\n<figcaption>Code Snippet<\/figcaption>\n<pre><code>&lt;p&gt;\n   &lt;img src=\"shanahan-center.jpg\" alt=\"\"&gt;\n   Harvey Mudd\u2019s campus mixes architecture from the multiple decades along with green spaces and a variety of trees.\n&lt;\/p&gt;<\/code><\/pre>\n<\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Image Used for Ambiance (Eye-candy)<\/h3>\n\n\n\n<p>This image is used only to add ambiance or visual interest to the page.<\/p>\n\n\n\n<figure class=\"wp-block-image alignleft\"><img decoding=\"async\" src=\"https:\/\/www.hmc.edu\/communications\/wp-content\/uploads\/sites\/19\/2018\/01\/visit-campus-header-150x150.jpg\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Example<\/figcaption><\/figure>\n\n\n\n<figure class=\"html-example\">\n<figcaption>Code Snippet<\/figcaption>\n<pre><code>  &lt;p&gt;\n    &lt;img src=\"shanahan-center.jpg\" alt=\"\"&gt; Colleges across the country have seen an increase in applications, leading to many becoming more selective in their admission processes.\n&lt;\/p&gt;<\/code><\/pre>\n<\/figure>\n\n\n\n<p><strong>Note:<\/strong> If the purpose of this image was to identify Harvey Mudd College directly or convey other information (rather than just to improve the look of the page), it should probably be treated as informative. The author determines the purpose for the use of the image.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"functional\">Functional Images<\/h2>\n\n\n\n<p>Visit <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/functional\/\">W3C&#8217;s Functional Images tutorial<\/a> for a detailed discussion. Its content is summarized below as it applies to the Harvey Mudd website.<\/p>\n\n\n\n<p>Functional images initiate actions rather than convey information. They are used in buttons, links and other interactive elements. The text alternative for the image should convey the action that will be initiated (the purpose of the image), rather than a description of the image.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Image Used Alone as a Linked Logo<\/h3>\n\n\n\n<p>The logo image is the only content of a link leading to the College home page. It has the alternative &#8220;Harvey Mudd College home&#8221; to indicate to where the user will be taken.<\/p>\n\n\n\n<figure class=\"wp-block-image alignleft\"><img decoding=\"async\" src=\"https:\/\/www.hmc.edu\/communications\/wp-content\/uploads\/sites\/19\/2013\/11\/HMC-BGW-RGB-150dpi.png\" alt=\"\" class=\"wp-image-996\"\/><figcaption class=\"wp-element-caption\">Example<\/figcaption><\/figure>\n\n\n\n<figure class=\"html-example\">\n<figcaption>Code Snippet<\/figcaption>\n<pre><code>&lt;a href=\"https:\/\/www.hmc.edu\/\"&gt;  \n  &lt;img src=\"hmc-logo.png\" alt=\"Harvey Mudd College home.\"&gt;\n&lt;\/a&gt;<\/code><\/pre>\n<\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Logo Image Within Link Text<\/h3>\n\n\n\n<p>Below, the College logo is used to supplement text within a link that leads to the home page. The image does not represent different functionality or convey other information than that already provided in the link text, so a null (empty) value is applied, (alt=&#8221;&#8221;), to avoid redundancy and repetition. In effect the image is a decorative adjunct or visual cue to the link text:<\/p>\n\n\n\n<figure class=\"wp-block-image alignleft\"><img decoding=\"async\" src=\"https:\/\/www.hmc.edu\/communications\/wp-content\/uploads\/sites\/19\/2013\/11\/HMC-BGW-RGB-150dpi.png\" alt=\"\" class=\"wp-image-996\"\/><figcaption class=\"wp-element-caption\">Example<\/figcaption><\/figure>\n\n\n\n<figure class=\"html-example\">\n<figcaption>Code Snippet<\/figcaption>\n<pre><code>&lt;a href=\"https:\/\/www.hmc.edu\/\"&gt;  \n  &lt;img src=\"hmc-logo.png\" alt=\"\"&gt; Harvey Mudd College Home\n&lt;\/a&gt;<\/code><\/pre>\n<\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Icons Images and Images Used in Buttons<\/h3>\n\n\n\n<p>Content editors will not normally need to insert icons such as printer and search buttons. If you think you have a use-case where this is necessary, please contact Peter Hobley (ph&#111;ble&#121;&#64;&#104;m&#99;.&#101;du) for further guidance.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"text\">Images of Text<\/h2>\n\n\n\n<p>Images of text should not normally be used on web pages. If you think you have a use-case where this is necessary, please contact Peter Hobley (ph&#111;b&#108;&#101;y&#64;&#104;&#109;&#99;.&#101;&#100;&#117;) for further guidance.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"complex\">Complex Images<\/h2>\n\n\n\n<p>Visit <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/complex\/\">W3C&#8217;s Complex Images tutorial<\/a> for a detailed discussion. Its content is summarized below as it applies to the Harvey Mudd website.<\/p>\n\n\n\n<p>Complex images contain more information than can be conveyed in a short phrase or sentence. These are typically:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>graphs and charts, including flow charts and organizational charts;<\/li>\n\n\n\n<li>diagrams and illustrations where the page text relies on the user being able to understand the image;<\/li>\n\n\n\n<li>maps showing locations or other information such as weather systems.<\/li>\n<\/ul>\n\n\n\n<p>In these cases, a two-part text alternative is required:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>a short description to identify the image, and where appropriate, indicate the location of the long description.<\/li>\n\n\n\n<li>the long description \u2013 a textual representation of the essential information conveyed by the image.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Describe the Location of the Long Description in the <code>alt<\/code> Attribute<\/h3>\n\n\n\n<p>While a number of techniques are available, the preferred method is to describe the location of the description within the <code>alt<\/code> attribute of the image.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.hmc.edu\/communications\/wp-content\/uploads\/sites\/19\/2018\/01\/bagel-sales-300x187.png\" alt=\"Bar chart showing monthly visitors for the first quarter 2017. Described under the heading Site visitors Full Text.\" class=\"wp-image-1003\"\/><figcaption class=\"wp-element-caption\">Example<\/figcaption><\/figure>\n\n\n\n<figure class=\"html-example\">\n<figcaption>Code Snippet<\/figcaption>\n<pre><code>&lt;p&gt; \n  &lt;img src=\"bagel-sales.png\" alt=\"Bar chart showing monthly visitors for the first quarter 2017. Described under the heading Site visitors Full Text.\"&gt;\n&lt;\/p&gt;\n&lt;h4&gt;Bagel Sales Full Text&nbsp;Visitors&nbsp;Full&nbsp;Text&lt;\/h4&gt;\n&lt;p&gt;The chart shows average bagel sales by type for the first quarter in the Caf\u00e9. While sales are fairly consistent each month for plain, wheat and blueberry bagels, there is a significant increase in Jalapeno due to [...]\n<\/code><\/pre>\n<\/figure>\n","protected":false},"excerpt":{"rendered":"<p>This page provides guidance on the correct use of alternative text for images within web pages. It uses content from [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1175,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1178","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages\/1178","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/comments?post=1178"}],"version-history":[{"count":1,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages\/1178\/revisions"}],"predecessor-version":[{"id":1607,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages\/1178\/revisions\/1607"}],"up":[{"embeddable":true,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages\/1175"}],"wp:attachment":[{"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/media?parent=1178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}