This post is part of the IndieWeb Carnival, a monthly blog carnival where one person decides on a broad theme that others should blog about. I haven’t done one of these before, but the topic for March 2024 — Accessibility in the Small Web — appealed to me, so here we go.

When I rebuilt this site from scratch in the autumn of last year I tried to make sure it was as accessible as possible. I tested quite a few of the key pages using PageSpeed Insights and Lighthouse and got 100% in the “Accessibility” category on all of them, so job done? Nope.

Automated testing tools can only test some accessibility issues, and they can’t tell the difference between — for example — an alt text attribute that contains a good description of the image and one that says “this is an image”.

“Alt” text and the myth of the character limit

The textual description I’m currently using in the image alt attribute for the primary images of my artwork is, to be honest, crap: I’m just replicating the title of the artwork. The alt text should be a description of the image, not the title of the image.

So I started doing some investigation as to how verbose I could/should be, and I started finding web pages (some on .edu domains about the university’s accessibility guidelines, so seemingly authoritative!) claiming that there is a limit on the length of the text in the alt attribute of around 140 characters.

The reason claimed for this supposed character limit is that a screen reader will stop reading the text after 140 characters.

This seemed odd, so I took this question to social media, soliciting the first-hand experience of accessibility experts and people who actually use screen readers, and the results were unanimous: the supposed character limit is not true.

Myth busted: there is no character limit on “alt” text.

Apparently, some screen readers may historically have split the alt text up into chunks of 140 characters, but they certainly never stopped reading it out at 140 characters.

So you’re free to use as many characters in your alt text as is necessary to describe an image, but it’s also worth remembering that someone using a screen reader apparently cannot skip listening to the alt text if it feels like it’s going on forever, so try not to be unnecessarily verbose.

But is the alt attribute the right place to put a long (possibly well over 1000 characters) description of a piece of artwork?

In other words, if a picture does indeed paint a thousand words, and a thousand words could well be considered to be a bit verbose for use in the alt attribute, then how do I make images of visual artwork accessible?

Complex Images

The W3C WAI tutorial on images defines seven types of images: informative images, decorative images, functional images, images of text, complex images, groups of images, and image maps.

Based on the definitions on that page, a piece of artwork which is not being used for purely illustrative or decorative purposes, and conveys more than can be expressed in a short phrase or sentence comes under “Complex Images”.

Looking at the WAI page for Complex Images we see that these sorts of images, according to the WAI definitions:

…contain substantial information – more than can be conveyed in a short phrase or sentence. These are typically:

• graphs and charts, including flow charts and organizational charts;
• diagrams and illustrations where the page text relies on the user being able to understand the image;
• maps showing locations or other information such as weather systems.

In these cases, a two-part text alternative is required. The first part is the short description to identify the image and, where appropriate, indicate the location of the long description. The second part is the long description – a textual representation of the essential information conveyed by the image. The following examples show different approaches that can be used to provide such short and long descriptions.

Well, the W3C WAI has clearly not considered visual artwork, or at least it hasn’t cited it as an example — too many engineers and not enough artists involved! — but to me this feels like it describes a piece of visual artwork that is the main focus of the page, especially if we consider the primary image of a piece of artwork on a page being a situation …where the page text relies on the user being able to understand the image.

The general advice is to make long descriptions available to everyone to reach a wider audience with your content. For example, show the description as part of the main content.

So for Complex Images there’s no simple attribute that needs to be populated. Instead the page suggests a number of approaches to populate the alt attribute with a short note, and a further way to indicate where a more detailed description can be found in the HTML.

You can see all the approaches on that page, but the one I’ve chosen is:

1. to structurally associate the image and its detailed description by putting the detailed description inside the element of the
   surrounding the image, and
2. to use the image alt attribute to tell someone using a screen reader that the full description can be found under a specific header.

    
        ...
        alt="TITLE OF ARTWORK - image described in detail below under the heading Image Description" src="...">
    
    
        
 class="image-description-header">Image Description
        
 class="image-description">
            
                I can be as verbose as I like here, describing the image in full detail, using mark-up such as multiple paragraphs when necessary…
            
        
    

Thumbnail galleries

What I’ve described above is my solution to the primary image of a piece of visual artwork on a page about that specific artwork.

I also have a few pages such as the homepage and the gallery pages that display multiple smaller images of artwork that link through to the pages about the specific piece of artwork.

On these images I’m using the title of the artwork in the alt attribute like this:

alt="TITLE OF ARTWORK - a full text description of this image can be found on the page that this image is linked to" src="...">

I don’t see any need for a multi-paragraph description under a smaller “thumbnail” image because thumbnails visually show less detail than a large image, and this can be reflected in less descriptive text. Instead anyone using a screen reader will know from the alt attribute of the thumbnail image that a full visual description can be found if they follow the link attached to that thumbnail image to the main page for that piece of artwork.

Implementation

There are over 900 pieces of artwork on this website, so it’s going to take some time to go through them all to add a fully detailed description. I’m starting with the thirty pieces of artwork displayed on the home page, and am going to work backwards from there. You can see a safe-for-work example here.

At the moment the Image Description is just a text area beneath the image, but in the future I may add a show/hide control next to it, and have it hidden by default. In the meantime it’s fine as it is.

Thanks

My thanks go to all the users of screen readers and the accessibility experts who responded to my poll/questions on Mastodon.