{"id":204,"date":"2023-10-24T12:33:28","date_gmt":"2023-10-24T12:33:28","guid":{"rendered":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/?post_type=chapter&p=204"},"modified":"2024-01-19T04:23:37","modified_gmt":"2024-01-19T04:23:37","slug":"decorative-images","status":"publish","type":"chapter","link":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/chapter\/decorative-images\/","title":{"rendered":"Decorative Images and Use of Color"},"content":{"raw":"

<\/a>Decorative images<\/h1>\r\nIf an image does not add meaning, i.e., if it's included for decorative or design purposes only, or if the image is adequately described in the caption and\/or surrounding text, it doesn't need an alt tag. Including alternative text descriptions for decorative images \"simply slows the process down with no benefit because the screen-reading software vocalizes the content of the [alternative text description], whether that alternative text adds value or not.\"[footnote]\"Top 10 Tips for Making Your Website Accessible,\" UC Berkeley: Web Access<\/em>, accessed March 27, 2018, https:\/\/webaccess.berkeley.edu\/resources\/tips\/web-accessibility#accessible-alt.[\/footnote] However, this doesn't mean that you should leave an alt tag blank.\r\n\r\nWhen a screen reader detects an image with a blank alt tag, it will read out the image file location. If The Wong-Baker Faces pain scale didn't have an alt tag, a screen reader would say, \"Graphic: https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/184\/2017\/06\/2049201506_0f9b17182a_o.jpg.\"\r\n\r\nYou can add the null alt attribute to an image tag within Pressbook's Text view.\r\n
    \r\n \t
  1. Click the Text tab.<\/li>\r\n \t
  2. Locate the <img> tag for a decorative image you have just placed.<\/li>\r\n \t
  3. Add a space after the 'src' attribute and write alt=''' with no space between the quotation marks. This should cause the screen reader to not announce that there is a graphic present and skip over it.<\/li>\r\n \t
  4. An example of what this could look like is: <img src=\"images\/flourish.gif\" alt=\"\"><\/li>\r\n<\/ol>\r\n \r\n

    <\/a>Using color<\/h1>\r\n

    Consider what your images would look like if they only displayed in black and white. Would any necessary context or content be lost if the color was \"turned off?\" Images should not rely on color alone to convey information; if your point requires color, you may need to edit or format the image so the concepts presented are not lost to those who are color blind or require high contrast between colors. Use of blue and red color palettes, as opposed to shades of green, are usually better for people who are color blind to tell the difference between the two colors in a data visualization.<\/p>\r\n

    Other techniques you can use to enhance the contrast and separation between images is to use variations on dashed or dotted lines on a line graph, black or white outlines around bars on bar charts. Please also download and use the free tool Color Contrast Analyser<\/a> to check to see if you have enough contrast between colors. Color Contrast Analyser will also show you what colors look like to people with various color blindness, or deficiencies in detecting red, green, or blue light.<\/p>\r\n\r\n

    \r\n

    Example 1: Inaccessible Bar Chart<\/p>\r\n\r\n<\/header>\r\n

    \r\n\r\nIn Chart 1, colour is the only means by which information is conveyed. For students who are colour blind, have poor contrast vision, or are using a black-and-white print copy (see Chart 2), relevant information is lost.\r\n\r\n\r\n\r\n
    \r\n\r\n[caption id=\"attachment_701\" align=\"aligncenter\" width=\"300\"]\"\" Chart 1: In this bar chart, color is the sole means of communicating the data.[\/caption]<\/td>\r\n\r\n\r\n[caption id=\"attachment_702\" align=\"aligncenter\" width=\"300\"]\"Bar Chart 2: This view of the same bar chart displays how the chart might appear to a student who is color blind, or whose device does not display color. All of the meaningful data is lost.[\/caption]<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/div>\r\n<\/div>\r\n

    .<\/span><\/p>\r\n\r\n

    \r\n

    Example 2: Accessible Bar Chart<\/p>\r\n\r\n<\/header>\r\n

    \r\n\r\nStudents who are color blind can distinguish between high-contrast shades. In Chart 3, contextual labels have been added to each bar at the bottom of the chart. Note that the chart will still require an alt tag<\/a>.\r\n\r\n[caption id=\"attachment_703\" align=\"aligncenter\" width=\"300\"]\"Modified Chart 3: In this view of the bar chart, high-contrast colos have been used so that shading differences will still display in grey scale. Text labels have also been added.[\/caption]\r\n\r\n<\/div>\r\n<\/div>","rendered":"

    <\/a>Decorative images<\/h1>\n

    If an image does not add meaning, i.e., if it’s included for decorative or design purposes only, or if the image is adequately described in the caption and\/or surrounding text, it doesn’t need an alt tag. Including alternative text descriptions for decorative images “simply slows the process down with no benefit because the screen-reading software vocalizes the content of the [alternative text description], whether that alternative text adds value or not.”[1]<\/sup><\/a> However, this doesn’t mean that you should leave an alt tag blank.<\/p>\n

    When a screen reader detects an image with a blank alt tag, it will read out the image file location. If The Wong-Baker Faces pain scale didn’t have an alt tag, a screen reader would say, “Graphic: https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/184\/2017\/06\/2049201506_0f9b17182a_o.jpg.”<\/p>\n

    You can add the null alt attribute to an image tag within Pressbook’s Text view.<\/p>\n

      \n
    1. Click the Text tab.<\/li>\n
    2. Locate the <img> tag for a decorative image you have just placed.<\/li>\n
    3. Add a space after the ‘src’ attribute and write alt=”’ with no space between the quotation marks. This should cause the screen reader to not announce that there is a graphic present and skip over it.<\/li>\n
    4. An example of what this could look like is: <img src=”images\/flourish.gif” alt=””><\/li>\n<\/ol>\n

       <\/p>\n

      <\/a>Using color<\/h1>\n

      Consider what your images would look like if they only displayed in black and white. Would any necessary context or content be lost if the color was “turned off?” Images should not rely on color alone to convey information; if your point requires color, you may need to edit or format the image so the concepts presented are not lost to those who are color blind or require high contrast between colors. Use of blue and red color palettes, as opposed to shades of green, are usually better for people who are color blind to tell the difference between the two colors in a data visualization.<\/p>\n

      Other techniques you can use to enhance the contrast and separation between images is to use variations on dashed or dotted lines on a line graph, black or white outlines around bars on bar charts. Please also download and use the free tool Color Contrast Analyser<\/a> to check to see if you have enough contrast between colors. Color Contrast Analyser will also show you what colors look like to people with various color blindness, or deficiencies in detecting red, green, or blue light.<\/p>\n

      \n
      \n

      Example 1: Inaccessible Bar Chart<\/p>\n<\/header>\n

      \n

      In Chart 1, colour is the only means by which information is conveyed. For students who are colour blind, have poor contrast vision, or are using a black-and-white print copy (see Chart 2), relevant information is lost.<\/p>\n\n\n\n
      \n
      \"\"
      Chart 1: In this bar chart, color is the sole means of communicating the data.<\/figcaption><\/figure>\n<\/td>\n
      		\n
      \"Bar
      Chart 2: This view of the same bar chart displays how the chart might appear to a student who is color blind, or whose device does not display color. All of the meaningful data is lost.<\/figcaption><\/figure>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

      .<\/p>\n

      \n
      \n

      Example 2: Accessible Bar Chart<\/p>\n<\/header>\n

      \n

      Students who are color blind can distinguish between high-contrast shades. In Chart 3, contextual labels have been added to each bar at the bottom of the chart. Note that the chart will still require an alt tag<\/a>.<\/p>\n

      \"Modified
      Chart 3: In this view of the bar chart, high-contrast colos have been used so that shading differences will still display in grey scale. Text labels have also been added.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n
      1. \"Top 10 Tips for Making Your Website Accessible,\" UC Berkeley: Web Access<\/em>, accessed March 27, 2018, https:\/\/webaccess.berkeley.edu\/resources\/tips\/web-accessibility#accessible-alt. ↵<\/a><\/li><\/ol><\/div>","protected":false},"author":7,"menu_order":4,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-204","chapter","type-chapter","status-publish","hentry"],"part":33,"_links":{"self":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/204","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/wp\/v2\/users\/7"}],"version-history":[{"count":11,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/204\/revisions"}],"predecessor-version":[{"id":337,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/204\/revisions\/337"}],"part":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/parts\/33"}],"metadata":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/204\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/wp\/v2\/media?parent=204"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapter-type?post=204"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/wp\/v2\/contributor?post=204"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/wp\/v2\/license?post=204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}