2025-05-27 Alt text on this blog
================================

On the web, the alt text is a description of an image to be shown by
browsers when the image cannot be shown – like text browsers or screen
readers. So what about alt text on this blog? What about blog posts
full of photos, specifically? Like the Croatia posts.

I think that alt text should be unnecessary on my blog because the
text should carry the entire message. “Welcome to my Wall of Text!” 😄

On fedi, I like alt text and I both read and write it. I hate clients
that don’t display it. I want to always read it. Therefore, on my
blog, the equivalent of alt text should always be readable. But real
alt text isn’t shown to me – the browser is showing me the pictures,
instead. It makes sense. And on fedi it only works because the
applications and front-ends don't just use the alt text attribute for
images in HTML – they have an extra user-interface to allow me to read
it. Buttons, mouse-over, long-press, whatever it takes.

There are options for this blog, of course. Except I don’t like these
options.

I could reuse the alt text as the image title attribute which is shown
on mouse-over by default. I don’t like being forced to use mouse and I
don’t like duplicating the description.

In Markdown:

    ![alt text](url "title")

I could automatically use the alt text as the title attribute but I
still don’t like to use the mouse to read the title attribute and I
wouldn’t be able to switch Markdown rendering engines as easily if I
hack it. Writing some Javascript to produce extra pop-ups or some
other user-interface element would be even worse, and it would need
extra clicking or keyboard navigation as a reader. No way.

The last option is the best. Just write the description above the
image:

    Description
    
    ![](url)

I’ve tried using the title attribute for some of my recent
picture-heavy blog posts about Croatia and I’ve been checking the
result using Gemini and Gopher, and I’m not happy.

Compare the following two with the web version where I can’t read the
alt text. (Screenshots from Lagrange on my phone.)

The Gemini version looks OK with some text paragraphs being links to
the images.

The Gopher version shows the alt texts as weird disjointed text
paragraphs that sometimes repeat the preceding paragraph and sometimes
don’t.

I guess I could write longer alt texts until the Gopher version looks
good but then the Gemini version looks weird and the web version
continues to not show it.

Now check the Gemini and Gopher output for the page you’re reading
right now!

The Gopher version is OK. The line-breaks don’t look nice on the
phone at the default resolution so ignore that weird line-break. What
we can see is that the empty alt text generated an empty paragraph.
Something I should fix. 😅 But in general, it looks OK and reads well.

The Gemini version still looks OK. It also links to the Gopher and
Gemini versions, so ignore those extra links. 😅 The browser
substitutes the filenames for the missing alt text. That works for me.
I'm not sure what a screen reader would do. Probably say: "Image.
2025-05-27-alt-text-3.jpg"? And I'm not sure what a person with bad
sight would prefer. At this point I'd know that I can skip the image
since I have already read the description above.

And here's the same passage a day later, using the text browser lynx.
The inline links look good, and there's no trace of the screenshots.
This is great! It's as readable as the Gopher version with no extra
line-breaks, and the inline links are inline (unlike in the Gemini
version).

Checking with edbrowse. The inline links are wrapped in bracers,
which looks good, and the images with no alt text are shown as empty
square brackets ([]) which works for me. Ideally, I guess, they'd
just disappear.

All in all, I think this solution is better: Instead of alt text, just
write more text above each image.

What I’m less sure about is whether this automatically implies that
all images are “decorative” and therefore should have an empty alt
text (instead of no alt text). It seems to me that the filename being
shown is a lot of visual clutter, but that only seems to affect
Gemini, not the text browser.

What do you think?

#Web #Gemini #Gopher #Markdown #JavaScript

2025-05-29. I fixed that minor issue in markdown-gopher so that it
skips paragraphs containing just images with no alt text. 😄

2025-05-31. I added a piece of Javascript to copy the alt text to the
title attribute if the alt text is set and the title is not. Perhaps
that'll motivate me to add more alt text.

This is what I added to my view.html template for Oddμ:

    <script type="text/javascript">
    function addTitle() {
      const images = document.getElementsByTagName("img");
      for (let img of images) {
        const alt = img.getAttribute("alt");
        const title = img.getAttribute("title");
        if (alt != null && title == null) {
          img.setAttribute("title", alt);
        }
      }
    }
    window.addEventListener('load', addTitle);
    </script>

2025-06-09. Tweaked the JavaScript. I'm now replacing the img
element with a figure element, moving the img element into the
figure and adding a figcaption element. The caption is rendered
smaller and italic via CSS.

Example

Code:

    function addTitle() {
      const images = document.getElementsByTagName("img");
      for (let img of images) {
        const parent = img.parentNode;
        const figure = document.createElement("figure");
        const figCaption = document.createElement("figcaption");
        parent.replaceChild(figure, img);
        figure.append(img);
        figure.append(figCaption);
        const alt = img.getAttribute("alt");
        const title = img.getAttribute("title");
        figCaption.textContent = alt;
        if (alt != null && title == null) {
          img.setAttribute("title", alt);
        }
      }
    }
    window.addEventListener('load', addTitle);

2025-07-03. More fiddling. No figure and figure caption for inline
images such as the RSS icon RSS

    function addTitle() {
      const images = document.getElementsByTagName("img");
      for (let img of images) {
        const alt = img.getAttribute("alt");
        const title = img.getAttribute("title");
        if (alt != null && title == null) {
          img.setAttribute("title", alt);
        }
        let onlyPics = true;
        const children = img.parentNode.childNodes;
        for (let child of children) {
          // ignore whitespace text nodes, too
          if (!(child.tagName == "IMG"
                || child.tagName == "FIGURE"
                || child.nodeValue != null && child.nodeValue.match(/\s*/))) {
            onlyPics = false;
          }
        }
        if (onlyPics) {
          const parent = img.parentNode;
          const figure = document.createElement("figure");
          const figCaption = document.createElement("figcaption");
          parent.replaceChild(figure, img);
          figure.append(img);
          figure.append(figCaption);
          figCaption.textContent = alt;
        }
      }
    }
    window.addEventListener('load', addTitle);