top of page

Alternative Text

Several years ago as part of a course I was taking, I needed to choose a book from a list and write a report. I ordered the book from the library, but it was going to be a week or two in coming, so I bought the eBook. Throughout the book there were references to specific photos included in the book. Except, there were no photos. None. It wasn't until I received the printed version that I was able to view the images that were in some cases integral to the narrative.

   My frustration was short term, but this can be a daily experience for those who require assistive technology to help them see. 

   Do your best not to exclude from the eBook any images included in the printed version. These images can be engaging and informative to every reader. By providing a text alternative, assistive technologies can present the information in the format that is needed.

Suppose the following image and caption appear in a book:

Daisies.jpg

An early example of the author's work with still life painting

<figure>

<img class="imgcentre" src="../Images/Daisies.jpg" alt="An acrylic painting of white daisies against a grey background"/>

<figcaption>An early example of the author's work with still life painting</figcaption>

</figure>

  • Wrapping the image, its attributes and the caption in the <figure> element bunches things to together making things easier for assistive technology (and for reading the code)

    • Even if an image does not have a caption, I still wrap it with the <figure> element​

    • Frequently I will include <figcaption></figcaption> even if there is no caption. It is easier to include the full block of code and remove what isn't needed than to remember which have yet to be added

  • class="imgcentre" is used by css to format the image. This is optional. The class name is at the discretion of the developer

  • The alternate text is on average 125 characters but no more than 250. I try to keep them 125 or under.

Happy coding. #epub

For more information about alternative text see Web Content Accessible Guidelines

Angela Googh rhymes with scrooge
bottom of page