{"id":87,"date":"2023-07-31T16:12:17","date_gmt":"2023-07-31T16:12:17","guid":{"rendered":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/?post_type=chapter&p=87"},"modified":"2024-01-12T21:33:36","modified_gmt":"2024-01-12T21:33:36","slug":"images-how-to-add-a-simple-informative-image-with-alt-text-to-a-page-and-the-media-library","status":"publish","type":"chapter","link":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/chapter\/images-how-to-add-a-simple-informative-image-with-alt-text-to-a-page-and-the-media-library\/","title":{"rendered":"Images: Add a simple informative image with alt text to a page and the media library"},"content":{"raw":"The process below shows the steps you would take when inserting a simple image that conveys meaning to a Pressbook chapter\/page.\r\n
    \r\n \t
  1. With the cursor at the spot in the page where you want to insert an image, click the Add Media button.\r\n\"Add<\/li>\r\n \t
  2. You will be taken to the Add Media screen. Click the Upload files tab.\r\n\"Upload<\/li>\r\n \t
  3. Click the Select Files button. Navigate to where the image is on your hard drive, select it, and click Open to upload the image.\r\n\"Add<\/li>\r\n \t
  4. Once the image has uploaded to the Media Library, you will see it selected with a check mark and blue outline. You can now begin filling out the details about the image in the pane on the right.\r\n\"Image<\/li>\r\n \t
  5. Enter the short (125 characters or less) alt text description in the Alt Text field. This is what a screen reader will read to someone who is blind. Be sure the information conveys the same meaning image has to a person who is sighted. In this example, we use the following as an alt text description, \"U.S. flag mounted over the entrance to the New York Stock Exchange.\"Artificial intelligence in PowerPoint currently identifies this image as, \"A flag on a building.\" However, if we are putting this image in a history or economics text book, the type of flag and the identity of the building is important and relevant in this case. It's better to go with the more specific description. You can fill out other fields when adding an image. A Title will show when a user hovers their mouse over the image. It should be short and concise. A Caption will show below the image, within the page. The Description is information that is internal to the Media Library, such as information shared with other authors or editors. It is not seen within the page. The image below shows these fields filled in.\r\n\"Image<\/li>\r\n \t
  6. Scroll downward in the image details on the right. Enter Attributions for the image. In this case, we are using an openly licensed image found on Flickr. The page where the image is within Flickr is the Source URL. The photographer's name is entered into the Author field. The Creative Commons license he chose for the image, i.e. CC BY-NC, is selected from the drop down menu in the License field. You can also select image alignment within the page. If you are uploading a Word or PDF, you can select, \"Link To\" and select the file for attachment.\r\n\"Pressbook's<\/li>\r\n \t
  7. Click the Insert into Chapter button. Below shows how the image now shows in the editor.\"The<\/li>\r\n \t
  8. Once you Create the page, you can click the Preview button to see what it looks like in a browser.\r\n\"Pressbook<\/li>\r\n \t
  9. The browser view is displayed below. You can note the Caption text displays below the image.\r\n\"Browser<\/li>\r\n<\/ol>","rendered":"

    The process below shows the steps you would take when inserting a simple image that conveys meaning to a Pressbook chapter\/page.<\/p>\n

      \n
    1. With the cursor at the spot in the page where you want to insert an image, click the Add Media button.
      \n\"Add<\/li>\n
    2. You will be taken to the Add Media screen. Click the Upload files tab.
      \n\"Upload<\/li>\n
    3. Click the Select Files button. Navigate to where the image is on your hard drive, select it, and click Open to upload the image.
      \n\"Add<\/li>\n
    4. Once the image has uploaded to the Media Library, you will see it selected with a check mark and blue outline. You can now begin filling out the details about the image in the pane on the right.
      \n\"Image<\/li>\n
    5. Enter the short (125 characters or less) alt text description in the Alt Text field. This is what a screen reader will read to someone who is blind. Be sure the information conveys the same meaning image has to a person who is sighted. In this example, we use the following as an alt text description, “U.S. flag mounted over the entrance to the New York Stock Exchange.”Artificial intelligence in PowerPoint currently identifies this image as, “A flag on a building.” However, if we are putting this image in a history or economics text book, the type of flag and the identity of the building is important and relevant in this case. It’s better to go with the more specific description. You can fill out other fields when adding an image. A Title will show when a user hovers their mouse over the image. It should be short and concise. A Caption will show below the image, within the page. The Description is information that is internal to the Media Library, such as information shared with other authors or editors. It is not seen within the page. The image below shows these fields filled in.
      \n\"Image<\/li>\n
    6. Scroll downward in the image details on the right. Enter Attributions for the image. In this case, we are using an openly licensed image found on Flickr. The page where the image is within Flickr is the Source URL. The photographer’s name is entered into the Author field. The Creative Commons license he chose for the image, i.e. CC BY-NC, is selected from the drop down menu in the License field. You can also select image alignment within the page. If you are uploading a Word or PDF, you can select, “Link To” and select the file for attachment.
      \n\"Pressbook's<\/li>\n
    7. Click the Insert into Chapter button. Below shows how the image now shows in the editor.\"The<\/li>\n
    8. Once you Create the page, you can click the Preview button to see what it looks like in a browser.
      \n\"Pressbook<\/li>\n
    9. The browser view is displayed below. You can note the Caption text displays below the image.
      \n\"Browser<\/li>\n<\/ol>\n","protected":false},"author":7,"menu_order":3,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":["hcaprette"],"pb_section_license":""},"chapter-type":[],"contributor":[59],"license":[],"class_list":["post-87","chapter","type-chapter","status-publish","hentry","contributor-hcaprette"],"part":33,"_links":{"self":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/87","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":14,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/87\/revisions"}],"predecessor-version":[{"id":298,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/87\/revisions\/298"}],"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\/87\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/wp\/v2\/media?parent=87"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapter-type?post=87"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/wp\/v2\/contributor?post=87"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/wp\/v2\/license?post=87"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}