This article explains how to retrieve the text of an image caption using JavaScript and assign it to the Alt attribute (alternative text) (using ChatGPT).

On the other hand, the original purpose of the Alt attribute is to provide alternative text in case the image is read aloud or cannot be displayed.

The original function of the Alt attribute was to provide alternative information for an image when the image itself cannot be displayed (Craven, 2006), but it is also used to help visually impaired people understand images through sound (Bigham et al., 2010).

The Alt attribute in HTML It is specified as an "attribute" of the element.

The HTML source code has the following structure:

However, this alone might not explain why it's necessary to specify both the caption and alt attributes.

This is because the content of the Alt attribute is now used as part of search engine optimization ( SEO ) and is considered to potentially influence search results.

Search engines like Google Search use crawlers such as Googlebot to programmatically collect information from the web. Research has shown that Google Search uses these crawlers to reference Alt attributes, which are then reflected in the search results (Ferraz, 2015).

On the other hand, captions are not considered to have much of an impact and are seen as playing a role in improving the user experience by making it easier for site visitors to read articles.

In short, in modern times, captions are for the user (human) who is viewing the content, while alt attributes are for crawlers (machines like Googlebot) that are roaming the site.

In other words, by specifying the Alt attribute, image search sites such as Google Image Search may be able to display your website's images more accurately.

Therefore, it is generally considered beneficial to specify both options. It also contributes to improved accessibility.

However, there are many uncertainties about whether crawlers actually ignore captions, and I haven't seen any articles that verify this, so personally, I can't say for sure that the Alt attribute has any influence.

Furthermore, as of the time of the aforementioned paper, it was found that Yahoo!, Bing , and DuckDuckGo do not refer to the Alt attribute (Ferraz, 2015).

How to implement JavaScript in WordPress

However, if there's even the slightest impact, it's preferable to specify both options with minimal effort.

Unfortunately, my knowledge of JavaScript's DOM (Document Object Model) is still limited, making it difficult to write the code from scratch. Therefore, I decided to create it while making modifications along with ChatGPT 3.5.

The following code was obtained:

var images = document.querySelectorAll('figure img');
images.forEach(function (img) {
  if (!img.alt) {
    var figcaption = img.parentElement.querySelector('figcaption');
    if (figcaption) {
      img.alt = figcaption.textContent || figcaption.innerText;
    }
  }
});

The content is surprisingly simple, so I think it's highly versatile.

In Japanese, the following operations are being performed:

1. This function retrieves all img elements from all figure ` elements on the page. The retrieved elements are stored in the images variable as a NodeList object.
2. The forEach method is used on the images variable to execute the specified function for each element.
3. The code performs branching processing if the Alt attribute is not present for each img element.
4. parentElement and querySelector methods are used on the img element to obtain the figcaption element, which is the parent element of the `<img>` element, and the first element found within it is stored in the figcaption variable.
5. This process is executed if figcaption variable exists.
6. The Alt attribute of img element is set to the text content of the figcaption element. If textContent exists, it is used; otherwise, innerText is used. This is because some browsers only support one of them.

In the case of WordPress, you can make this script work by going to "Appearance" → "Theme File Editor" in the menu bar on the left side of the editing screen, and pasting it into "javascript.js" under the heading "Theme Files".

Note that if you are using a CMS (Content Management System) such as WordPress, the HTML code will be enormous, so the id attribute containing the main content will be as follows:

document.addEventListener('DOMContentLoaded', function () {
  var main = document.getElementById('main');
  if (main) {
    var images = main.querySelectorAll('figure img');
    images.forEach(function (img) {
      if (!img.alt) {
        var figcaption = img.parentElement.querySelector('figcaption');
        if (figcaption) {
          img.alt = figcaption.textContent || figcaption.innerText;
        }
      }
    });
  }
});