Default Alt Attribute in Rails Image Tag Helper

If you do not provide content for the alt attribute for your images, by default the image tag helper will use the file name with an initial cap and no file extension. This at first seems rather…um…helpful…but it really isn’t useful alternative text for anyone. And alternative text can be presented in two ways:

  1. As content of the alt attribute of the img element
  2. Within the context or immediately in its vicinity on the same HTML page

In terms of the first bulleted item, the content must describe the content or function of the image. I doubt that the file name of the image without the file extension meets the above criteria. Try it out with someone near you. Turn to the them and say, “hx11xf395?file=thumbnail.” Pretty informative, right? No. The image name in my example comes from an institutional repository (ScholarSphere) that I work on at Penn State. Even if it was “hydra_poster_2016” it still wouldn’t describe the content or the function of the image. It gives you a better clue compared to the actual alt attribute, but not a whole lot more. As for the second bulleted item, it means that the content around the image or near it can provide enough information that you don’t need a “default” alt attribute.

Let’s look at my resource again from the repo. What’s near it? Content! It has a title, description, and other metadata that can provide much deeper information than the filename as a default. So what do you do about the default from the image tag helper? You override it. In my example, I’m overriding the default with alt=“Download the full-sized PDF” because it is a link to download the file. If it wasn’t a link to download the full resource, I’d have the default as alt=“” and let people pass right over it. You can pass the alt attribute as an option whether empty or describing its function right in the image tag helper, for example, img_tag(“hydra_poster_2016.jpg”, alt: “”) or img_tag(“hydra_poster_2016.jpg”, alt: “Download the full PDF”). Or perhaps even better describe the function with the title of the document img_tag(“hydra_poster_2016.jpg”, alt: “Download the full PDF of Hydra Connect 2016”)