5.8 Inserting Images in HTML: It Matters for Artists too!

As an artist, I want to be able to insert pictures of my art onto my website. Learning from LinkedIn Learning from instructor J. David Eisenberg, I was able to learn the basics of this HTML: Images and Figures. He gave very insightful information as to the image formats and what really was fascinating to me was the usage of the alt attribute. I haven’t thought about how accessibility plays into how artists describe their images. How do they go about doing it by using alt sounds like great research to do!

Image of someone creating art on an IPad. Source: Unsplash

How to Write Alt Text in HTML

First thing about using alt attribute, you need to know how to write it.

<img scr=” path-to-image” alt=”description”>

How to Write Alt Descriptions for Art

I was looking up how alt can describe art for viewers requiring accessibility, and came upon this insightful blog Veronica with Four Eyes run by Veronica Lewis where she covers How to Write Alt Text for Amateur Art and has a variety of other options that can help introduce accessibility for your blog including voice and video descriptions, how to use alt text in social media, and more. Another resource I found useful was from Cooper Hewitt Guidelines for Image Descriptions. It was very insightful to see that long descriptions can be used to describe artworks including photography, objects, and other mediums of artwork. And lastly, the site WebAIM regarding Alternative Text, was very thorough in details and gave lots of examples for imagery.

Overall Alt Descriptions need to be:

  1. Short or long descriptions depending on your website and the artwork
  2. Include the main subject
  3. And capture the essence of the piece

Example

Let’s look at this artwork from Henrik Donnestad from Unsplash. Say we are going to write a description for this image.

 

abstract painting
Painting that is dark blue with horizontal streaks of black, white, and lighter shades of blue.

To describe this in short description, the code it would be:

<img scr=” art by Henrik Donnestad” alt=”Painting that is dark blue with horizontal streaks of black, white, and lighter shades of blue.”>

I hope this helped you as it helped me, and that adding accessibility will help viewers see your artwork or other art that you want to have on your website. Let me know if these resources helped you in the comments below!

NOTE: This chapter is a revised version of a blog post titled “Inserting Images in HTML: It matters for Artists too!” on Web Informant. 

License

Icon for the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

Publishing for the Web Copyright © by TCOM 3335 (Spring 2021 and Fall 2022) at UHD is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, except where otherwise noted.

Share This Book