========= Images: Alt-text and Image Descriptions =========

Reading systems and screenreaders can usually convert text to speech, but they cannot convert images to text. We use alt text ("alternative text") to replace the image for screenreaders.

A screenreader will stop on the image and read the Alt-text that you have written. This Alt-text is not visual, but is embedded in the code of the ebook. Part of your job is to write these descriptions. The content of the Alt-text depends on the type/purpose of the image.

The following is a video demo of how a screenreader reads an image description:
{{ :public:nnels:etext:alt-text-screenreader-demo.mp4 |}}

The term image description is an umbrella term referring to the concept of offering descriptions of images in text form. An image description conveys the same or equivalent information that a sighted reader would get when they look at a picture to someone with a print disability such as those who are blind or visually impaired. Image descriptions can be included in digital content in two forms: 
  * Alt-text for simple and medium complexity images
  * Alt-text and long description for complex images

Remember, you are replacing visual information with text, not just describing an image. It is very important you follow these guidelines so your descriptions are clear to the reader and do not cause any confusion or cognitive issues.

There are no hard rules on how long Alt-text should be, but they usually around 2-6 sentences long. This is to help avoid cognitive overload. Cognitive overload can also happen if the description is not direct or concise. The description should walk the reader through the image and be very clear and direct. This can be a bit of an artform, so don’t stress out if you feel overwhelmed. This documentation is designed to help you learn how to write Alt-text and Long Descriptions. 

<note>Alt-text is **done a bit differently** for Children's Picture Books and Comics. Please visit their respective pages [[public:nnels:etext:kids-books:kb_alt-text|Alt-text for Picture Books]] and [[public:nnels:etext:comics|Comic Book/Graphic Novel Description: Introduction]] for more information.</note>

<note important>Every image **must** have a description unless it is solely decorative. If you come across words that are images please refer to the section "Working with Images of Words and Different Alphabets" on the [[https://bclc.wiki.libraries.coop/doku.php?id=public:nnels:etext:language#working_with_images_of_words_and_different_alphabets|Languages]] page and [[.images:text_and_images]].</note>

<note>This documentation is pulled from the DAISY knowledge base, Benetech, and our own inhouse research and development with our Analysts that have lived experiences. Some of our guidelines will be a bit different from what you find out on the internet, as we are not creating an EPUB from scratch. We are reformatting an EPUB, so our guidelines may be slightly different.</note>

Part of your job is to produce accessible versions of the titles you are assigned. Alt-text is an essential part of accessibility. You should be able to write Alt-text with little to no edits and feedback after 3 months of work.

It can take longer to learn how to write image descriptions than the other parts of reformatting an ebook, and we are here to help and support you on this journey. Even after you have gotten a handle on how to describe images, there will always be times when you struggle and need assistance. Go to [[public:nnels:etext:pa-outline-expectations|Job Outline and Expectations]] for more information.

======First Steps======

<note>Steps for [[public:nnels:etext:human-narration-alt-text|Human Narration Image Description]] are different.</note>

Remove all decorative images including:

  * publisher/other logo (text equivalent = name of publisher/company)
  * [[http://www.thebookdesigner.com/wp-content/uploads/2014/03/Running-heads-Croissants.png|decorative image]] (no text equivalent required)
  * author photo (no text equivalent required)

If unsure, ask [[public:nnels:etext:images:alt-text_q_a|in the Q and A section]].

<note>If the decorative image is a Content Break we replace it with a line. See [[public:nnels:etext:text-breaks|Content Breaks]] for more information.</note>

<note tip>You can search for all images by using the "Find" function and search with ''^g'' (for "graphic")</note>

Ensure that the image (and caption if present) is set to ''inline with text'' so that the text does not flow around the image and between paragraphs (i.e. not breaking up the middle of a sentence or paragraph). 

To set the wrapping style as ''in-line with text'':
  * right click the image
  * select ''Wrap Text'' > ''In Line with Text''

Software can only detect and properly read the Alt-text associated with an image when it is placed ''In Line with Text''.

For large images, resize them so they fit on the page with their caption and surrounding text. See [[https://support.office.com/en-us/article/Change-the-size-of-a-picture-shape-text-box-or-WordArt-98929cf6-8eab-4d20-87e9-95f2d33c1dde|How to Resize Images in Word]] for how to do this.

<note important>If your document is missing images, you can extract the images from the publisher file. See the section on [[public:nnels:etext:extracting_images_ebooks|How to Extract An Image]].</note>

=====Basics: Add Alt-text and Caption to Image=====
Below are directions on how to insert captions and Alt-text using Microsoft Word.

<note important>For guidelines on how to write Alt-text go to the ''How to Write Alt-text'' section further down the page.</note>

====Add Captions====

If a caption exists in the original ebook, then you must insert it for the corresponding image in the Word doc file. See [[public:nnels:etext:captions|Captions]] for instructions.

====Add Alt-text====

To add Alt-text to an image:

  - Right click on the image
  - Select ''Format Picture''
  - Click on ''Alt Text''
  - Enter a description in the alt text ''description'' field (leave the title field blank)

<note>Add all images to a ''Word Doc'' and enter your image descriptions below each image. This is three fold:

  - it is easier to work in another document as opposed to the Alt-text box,
  - the Production Coordinator will be able to edit and provide full feedback
  - it is easier for you to do revisions.

When you have completed the document:
  * Uploaded it to the shared folder on OneDrive titled: ''Alt-text Documents for EPUB Titles''
  * Once it is uploaded it is automatically shared with the Production Coordinator
  * Make a note in the RT ticket the Alt-text document is in the shared folder

When you are going through the feedback and doing your revisions, please remember to accept all previous edits, and resolve or answer comments as needed.

Here is a video showing you how to create an upload a [[https://screenpal.com/watch/cZnDD7Vd7Ij|Word Doc to the Shared OneDrive]].</note>

=======How to Write Alt-text=======

The following documentation will walk you through how to describe different types of images you will come across.
=====Introduction=====
  * [[.images:general_guidelines|General Guidelines]]: start here! These guidelines apply to all image descriptions
  * [[public:nnels:etext:do_s_and_don_t|Alt-Text Review: Do's and Don't]]: review of guidelines and best practices
  * [[.images:common_mistakes_for_beginners|Common Mistakes for Beginners]]
  * [[.images:writing_tip_point_form|Writing Tip for Image Descriptions]]: how to get started using the point form technique if you are struggling to write your first draft.
  * [[.images:how_to_edit_alt-text|Editing Alt-Text]]: tips and tricks to edit your work before you submit
  * [[Image Description Checklist]]: general checklist for describing an image.
  * [[.images:alt-text_q_a|Alt-text Q&A]]: when in doubt, ask!

=====Images by Type=====
     * [[.images:simple_images|Simple Images]]
     * [[.images:medium_images|Medium Images]]
     * [[.images:covers|Covers]]
     * [[.images:text_and_images|Text and Images]]
     * [[.images:complex_images|Complex Images and Long Descriptions]]
     * [[.images:multiple_images|Multiple Images: Two Page Spreads, Images in Sequence, Repeated Images and Grouped Images]]

=====The Finer Details=====
  * [[.images:skin_tone_gender_and_age|Skin tone, Gender, and Age]]
  * [[.images:facial_features|Facial Features and Expressions]]: coming soon
  * [[.images:images_and_colour|Describing Colour in Images]]: How to describe colour vs black and white

=====Image Heavy Books=====
  * [[public:nnels:etext:kids-books:kb_alt-text|Children's Picture Books & Illustrated Books]]
  * [[public:nnels:etext:comics|Comics and Graphic Novels]]
  * [[public:nnels:etext:human-narration-alt-text|Human Narration: Image Description]]

=====Examples and Additional Resources=====
  * [[public:nnels:etext:images:alt_text_examples|Examples of Alt-text]]: examples of image descriptions
  * [[public:nnels:etext:glossary_of_terms|Glossary of Alt-text Terms]]: Words and Synonyms for Writing Alt-text
  * [[extracting_images_ebooks|How to Extract Images from eBooks]]: If your DOC file is missing images
  * [[.images:resources|Resources]]: webinars, websites, and other useful information to learn more about Alt-text!

<note>Alt-text is **done a bit differently** for Children's Picture Books and Comics. Please visit their respective pages [[public:nnels:etext:kids-books:kb_Alt-text|Alt-text for Picture Books]] and [[public:nnels:etext:comics|Comic Book/Graphic Novel Description: Introduction]] for more information.</note>

[[public:nnels:etext:start|Return to main eText Page]]