{"id":2655,"date":"2020-06-24T22:06:57","date_gmt":"2020-06-24T22:06:57","guid":{"rendered":"https:\/\/courses.lumenlearning.com\/suny-newpaltz-engcomp1\/?post_type=chapter&p=2655"},"modified":"2020-07-01T20:08:35","modified_gmt":"2020-07-01T20:08:35","slug":"web-pages-images-to-avoid-and-ada-issues","status":"web-only","type":"chapter","link":"https:\/\/courses.lumenlearning.com\/suny-newpaltz-engcomp1\/chapter\/web-pages-images-to-avoid-and-ada-issues\/","title":{"raw":"Web Pages: Visuals and Accessibility","rendered":"Web Pages: Visuals and Accessibility"},"content":{"raw":"
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n

You Can\u2019t Write for the Web without Working with Visuals<\/h2>\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\nWhat would the web be without images? Pretty boring, right? Consider using relevant visuals on your web pages to enhance the meaning of the copy that you have written. Here are a few important tips to follow:\r\n
    \r\n \t
  • There are three main file formats<\/em><\/strong>\u00a0for images that you can currently use on the web: GIF, JPG, and PNG. GIFs work well for icons and other graphics with large areas of simple colors, but because GIFs are limited to 256 colors, they are a poor choice for photographs. JPEG (or JPG, as they are commonly called) is a\u00a0lossy format\u00a0(like MP3s) that supports millions of colors and can work well for photographs. In fact, JPG is likely the default file format that your digital camera uses. Beware. The more JPGs are compressed to reduce file size, the more image quality (information) they lose. PNG is a lossless format that can support both a small range of colors, like GIFs and millions of colors in photographs, like JPGs, only without any visual quality loss (but larger file size).<\/li>\r\n<\/ul>\r\n
      \r\n \t
    • Make sure your visuals are appropriate and relevant<\/em><\/strong>\u00a0to what the rest of the text says on the page. Don\u2019t pick a visual just because it looked \u201ccool\u201d when you found it. Visuals should enhance the meaning.<\/li>\r\n<\/ul>\r\n
        \r\n \t
      • Make sure your images are good quality.<\/em><\/strong>\u00a0JPG \u201cartifacts\u201d and pixelated images (caused by making a very small original image larger) look unprofessional and sloppy. A good rule of thumb is to stick with the \u201chigh\u201d setting (60 or more) when saving JPGs.<\/li>\r\n<\/ul>\r\n
          \r\n \t
        • Beware of stretching images\u00a0out of proportion<\/strong> if you prepare them in an image manipulation program. Don\u2019t make your images look like they came from a distorted reflection in a fun house mirror.<\/li>\r\n<\/ul>\r\n
            \r\n \t
          • Provide captions\u00a0<\/strong>when using multiple visuals in longer web texts. Captions will orient the reader to your reason for including the visual. Otherwise, readers have to guess your intentions.<\/li>\r\n<\/ul>\r\n

            Copyright Issues<\/h2>\r\nThis is a warning from the TechSoup website about\u00a0 using images:\r\n

            \"It wouldn't be morally or legally right to take someone else's e-book and put it on your website to attract new readers. In the same way, you can't simply grab someone else's graphics or photos and use them for your own means. In simple terms, doing so could be copyright infringement. You need to find out whether the image is licensed under Creative Commons or whether it's in the public domain. If it isn't either of these, then you could face a pretty hefty fine.<\/p>\r\nThankfully, there are numerous websites that feature images that are either free or low cost. Here is a very small list of those sites:\r\n

            Creative Commons: Images<\/h3>\r\n

            Pixabay<\/h3>\r\n

            Unsplash<\/h3>\r\n

            Flickr<\/h3>\r\nPexels\r\n\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n

            Making Your Visuals Accessible<\/span><\/span><\/h2>\r\n
            \r\n
            \r\n
            \r\n
            \r\n
            \r\n
            \r\n
            \r\n
            \r\n\r\nBecause you have enhanced the meanings of your texts using images and visual design, you have to think about how that will impact readers with visual impairment. Although many people with disabilities use devices or software to assist them, there are still things you can do as a web writer to improve their reading experience. For instance, minimally, any images should have captions or \u201calt\u201d text (alternative text)<\/strong> to describe the image for those that cannot see it.\r\n\r\nIt is particularly critical that any image that does rhetorical work in your web pages have an alt tag.<\/strong>\u00a0For example, here is a photograph of Hugo the Hawk, SUNY New Paltz's mascot. I want to include it on a web page such as this one. So, in the line marked Alt Text,<\/strong> I write a description of the photograph:\r\n\r\n[caption id=\"attachment_2690\" align=\"alignnone\" width=\"348\"]\"A How to format an Alt Text[\/caption]\r\n\r\n \r\n

            An automated assessment tool like<\/strong>\u00a0WAVE: Web Accessibility Evaluation*\u00a0<\/span>can help HTML coders determine the accessibility of their web pages. Still, WAVE is only going to get you so far if you don\u2019t understand the principles of how to design for accessibility.<\/h2>\r\n

            For an introduction on how to make your website accessible, consult the United States' government website\u00a0Developing Accessible Web Content.*\u00a0<\/span><\/h2>\r\nAnother source of important information about Web Accessibility is:\u00a0Web Content Accessibility Guidelines (WCAG)*\u00a0<\/span><\/strong>\r\n\r\nNote:<\/strong> Also, keep in mind that videos that you may embed on your web page should have closed captions<\/strong><\/span> for visitors to your site who may be hard of hearing or otherwise may have trouble understanding the audio portion of the video.\r\n\r\nCaptions often make it easier for all people<\/strong> <\/em>to understand and process videos.\r\n\r\n*<\/span>Due to technical issues, the links to these pages are not provided; however, you can easily find these pages by doing a search on the web.<\/em>\r\n\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n

            One Final Point\u2014Animated GIFs Aren\u2019t Cool Anymore?<\/h2>\r\n
            \r\n
            \r\n
            \r\n
            \r\n
            \r\n
            \r\n
            \r\n\r\nWhat\u2019s considered cliche in the world of web writing?<\/em><\/strong>\r\n\r\nAnimated GIFs are cute, but they can slow down page loading times considerably. While they were immensely popular in the 1990s, today they are usually only found on MySpace pages, fan web sites, and signature lines in forum posts in some online communities. Animated GIFs do not show up on smart phones, and they are usually limited to certain interface elements.\r\n\r\nAnd while we\u2019re at it, Flash can be uncool too, especially when it\u2019s used to create a slow-to-load, super-fancy introduction screen that does little but keep users from getting to the content they want.\r\n\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>","rendered":"
            \n
            \n
            \n
            \n
            \n
            \n
            \n

            You Can\u2019t Write for the Web without Working with Visuals<\/h2>\n
            \n
            \n
            \n
            \n
            \n
            \n
            \n

            What would the web be without images? Pretty boring, right? Consider using relevant visuals on your web pages to enhance the meaning of the copy that you have written. Here are a few important tips to follow:<\/p>\n

              \n
            • There are three main file formats<\/em><\/strong>\u00a0for images that you can currently use on the web: GIF, JPG, and PNG. GIFs work well for icons and other graphics with large areas of simple colors, but because GIFs are limited to 256 colors, they are a poor choice for photographs. JPEG (or JPG, as they are commonly called) is a\u00a0lossy format\u00a0(like MP3s) that supports millions of colors and can work well for photographs. In fact, JPG is likely the default file format that your digital camera uses. Beware. The more JPGs are compressed to reduce file size, the more image quality (information) they lose. PNG is a lossless format that can support both a small range of colors, like GIFs and millions of colors in photographs, like JPGs, only without any visual quality loss (but larger file size).<\/li>\n<\/ul>\n
                \n
              • Make sure your visuals are appropriate and relevant<\/em><\/strong>\u00a0to what the rest of the text says on the page. Don\u2019t pick a visual just because it looked \u201ccool\u201d when you found it. Visuals should enhance the meaning.<\/li>\n<\/ul>\n
                  \n
                • Make sure your images are good quality.<\/em><\/strong>\u00a0JPG \u201cartifacts\u201d and pixelated images (caused by making a very small original image larger) look unprofessional and sloppy. A good rule of thumb is to stick with the \u201chigh\u201d setting (60 or more) when saving JPGs.<\/li>\n<\/ul>\n
                    \n
                  • Beware of stretching images\u00a0out of proportion<\/strong> if you prepare them in an image manipulation program. Don\u2019t make your images look like they came from a distorted reflection in a fun house mirror.<\/li>\n<\/ul>\n
                      \n
                    • Provide captions\u00a0<\/strong>when using multiple visuals in longer web texts. Captions will orient the reader to your reason for including the visual. Otherwise, readers have to guess your intentions.<\/li>\n<\/ul>\n

                      Copyright Issues<\/h2>\n

                      This is a warning from the TechSoup website about\u00a0 using images:<\/p>\n

                      “It wouldn’t be morally or legally right to take someone else’s e-book and put it on your website to attract new readers. In the same way, you can’t simply grab someone else’s graphics or photos and use them for your own means. In simple terms, doing so could be copyright infringement. You need to find out whether the image is licensed under Creative Commons or whether it’s in the public domain. If it isn’t either of these, then you could face a pretty hefty fine.<\/p>\n

                      Thankfully, there are numerous websites that feature images that are either free or low cost. Here is a very small list of those sites:<\/p>\n

                      Creative Commons: Images<\/h3>\n

                      Pixabay<\/h3>\n

                      Unsplash<\/h3>\n

                      Flickr<\/h3>\n

                      Pexels<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

                      Making Your Visuals Accessible<\/span><\/span><\/h2>\n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n

                      Because you have enhanced the meanings of your texts using images and visual design, you have to think about how that will impact readers with visual impairment. Although many people with disabilities use devices or software to assist them, there are still things you can do as a web writer to improve their reading experience. For instance, minimally, any images should have captions or \u201calt\u201d text (alternative text)<\/strong> to describe the image for those that cannot see it.<\/p>\n

                      It is particularly critical that any image that does rhetorical work in your web pages have an alt tag.<\/strong>\u00a0For example, here is a photograph of Hugo the Hawk, SUNY New Paltz’s mascot. I want to include it on a web page such as this one. So, in the line marked Alt Text,<\/strong> I write a description of the photograph:<\/p>\n

                      \"A<\/p>\n

                      How to format an Alt Text<\/p>\n<\/div>\n

                       <\/p>\n

                      An automated assessment tool like<\/strong>\u00a0WAVE: Web Accessibility Evaluation*\u00a0<\/span>can help HTML coders determine the accessibility of their web pages. Still, WAVE is only going to get you so far if you don\u2019t understand the principles of how to design for accessibility.<\/h2>\n

                      For an introduction on how to make your website accessible, consult the United States’ government website\u00a0Developing Accessible Web Content.*\u00a0<\/span><\/h2>\n

                      Another source of important information about Web Accessibility is:\u00a0Web Content Accessibility Guidelines (WCAG)*\u00a0<\/span><\/strong><\/p>\n

                      Note:<\/strong> Also, keep in mind that videos that you may embed on your web page should have closed captions<\/strong><\/span> for visitors to your site who may be hard of hearing or otherwise may have trouble understanding the audio portion of the video.<\/p>\n

                      Captions often make it easier for all people<\/strong> <\/em>to understand and process videos.<\/p>\n

                      *<\/span>Due to technical issues, the links to these pages are not provided; however, you can easily find these pages by doing a search on the web.<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

                      One Final Point\u2014Animated GIFs Aren\u2019t Cool Anymore?<\/h2>\n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n

                      What\u2019s considered cliche in the world of web writing?<\/em><\/strong><\/p>\n

                      Animated GIFs are cute, but they can slow down page loading times considerably. While they were immensely popular in the 1990s, today they are usually only found on MySpace pages, fan web sites, and signature lines in forum posts in some online communities. Animated GIFs do not show up on smart phones, and they are usually limited to certain interface elements.<\/p>\n

                      And while we\u2019re at it, Flash can be uncool too, especially when it\u2019s used to create a slow-to-load, super-fancy introduction screen that does little but keep users from getting to the content they want.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":274624,"menu_order":10,"template":"","meta":{"_candela_citation":"[]","CANDELA_OUTCOMES_GUID":"","pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-2655","chapter","type-chapter","status-web-only","hentry"],"part":2585,"_links":{"self":[{"href":"https:\/\/courses.lumenlearning.com\/suny-newpaltz-engcomp1\/wp-json\/pressbooks\/v2\/chapters\/2655","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/courses.lumenlearning.com\/suny-newpaltz-engcomp1\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/courses.lumenlearning.com\/suny-newpaltz-engcomp1\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/courses.lumenlearning.com\/suny-newpaltz-engcomp1\/wp-json\/wp\/v2\/users\/274624"}],"version-history":[{"count":12,"href":"https:\/\/courses.lumenlearning.com\/suny-newpaltz-engcomp1\/wp-json\/pressbooks\/v2\/chapters\/2655\/revisions"}],"predecessor-version":[{"id":2856,"href":"https:\/\/courses.lumenlearning.com\/suny-newpaltz-engcomp1\/wp-json\/pressbooks\/v2\/chapters\/2655\/revisions\/2856"}],"part":[{"href":"https:\/\/courses.lumenlearning.com\/suny-newpaltz-engcomp1\/wp-json\/pressbooks\/v2\/parts\/2585"}],"metadata":[{"href":"https:\/\/courses.lumenlearning.com\/suny-newpaltz-engcomp1\/wp-json\/pressbooks\/v2\/chapters\/2655\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/courses.lumenlearning.com\/suny-newpaltz-engcomp1\/wp-json\/wp\/v2\/media?parent=2655"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/courses.lumenlearning.com\/suny-newpaltz-engcomp1\/wp-json\/pressbooks\/v2\/chapter-type?post=2655"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/courses.lumenlearning.com\/suny-newpaltz-engcomp1\/wp-json\/wp\/v2\/contributor?post=2655"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/courses.lumenlearning.com\/suny-newpaltz-engcomp1\/wp-json\/wp\/v2\/license?post=2655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}