Complex images can paint a thousand words | Paul Watson

What is the best way to provide descriptive text for images that are both complex and the main focus of a page? Paul has tried to tackle this on pages dedicated to their personal art, and found that the advice isn't necessarily that clear. The tl;dr would be: move the text onto the page itself and reference it from the image (using ARIA or alt attributes, or a combination).

I hadn't realised that the WAI has outlined seven image "types", nor that they have different suggested approaches based on the "type". I initially thought Paul's use of the "complex image" type felt wrong, but reading over the spec I agree; it's weird, but that's the best fit for these kinds of pages/content.

On disproving the weirdly common belief that you can't have more than 140 characters in alt text (this isn't Twitter!):

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

On concerns with overly long alternative text:

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.

On the official guidance from WAI (taken from the WAI tutorial on images):

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.

On how to deal with "Complex Images":

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.

Explore Other Notes

Newer

Use your Mac the way I do

A phenomenally interesting journey through one person's assistive set-up, using only the left mouse button to navigate the web, code websites, play video games, and everything else …

Older

Inclusive glasses frames

I've always struggled to find glasses or sunglasses that fit my weird head, so I was intrigued by a company explicitly targeting body shapes that aren't well catered for. Unfortunately, the selection …

  • <!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>What is the best way to provide descriptive text for images that are both complex and the main focus of a page? Paul has tried to tackle this on pages dedicated to their personal art, and found that …</p> </body> </html>
  • Murray Adcock.
Journal permalink