Developing an alt text button for images on my website

It really is not complicated. See the documentation on MDN, it even has a live playground to test things out.

If you want to see it in the wild, my online resume is stuffed with it. It is a simple way to combine overviews with detailed descriptions.

Yes, sorry. I was thinking everyone can just look at it using developer tools, to see it rendered.

That site makes heavy use of web components rendered based on ActivityPub JavaScript objects.

If someone’s provided a useful description of an image I’d like to read it even though I can see the image itself (I’ve learned the original source movies/TV shows for a lot of memes that way). But on my phone or tablet I have no way to “hover” and trigger the normal display of the alt text.

I suspect this is why several social media sites now have an explicit item you can tap to show the text without needing to turn on assistive technology on your device.

The alt attribute is there, but I think the point is that browsers don’t commonly display its content unless you’re using assistive technology, so a button like the one OP created is helpful for reading the alt text without looking at the source code.

I haven’t finished the article yet, but for me, when the image is successfully loaded or assistive tech is not used, alt text is hidden from the user, but it can be still be useful for sighted users. As a sighted person, I like reading alt text on Bluesky and enjoy them a lot. And I find them useful when reading a comic strip for example, and I can’t comprehend something. (This has happened with Haus of Decline comics (who writes excellent alt text by the way) when I don’t pay a lot of attention, or when there’s a known figure but I don’t recognize them.)

I tried to reproduce without any additional markup, but couldn’t use the img[alt] attribute (without JS):

• the img tag cannot have a child (so no img::after)
• enclosing it in picture doesn’t help much: content cannot retrieve alt of the child

If duplicating the alt attribute is acceptable, here is how it could look like: (using `:hover’, maybe it is possible to make it clickable?)

<picture alt="Fernande with a Black Mantilla, one of my favourite paintings">
  <img alt="Fernande with a Black Mantilla, one of my favourite paintings" src="https://www.guggenheim.org/wp-content/uploads/1905/01/91.3914_ph_web-1.jpg">
</picture>

img {
	width: 15em;
}

picture{
	position: relative;
}
picture::after{
	content: attr(alt);
	display: block;
	position: absolute;
	bottom:0;
	left:0;
	right:0;
	padding:.75rem;
	background-color: rgba(255,255,255,0.7);
	opacity:0;
	max-height: 5em;
	overflow-y:auto;
	font-size:80%;
}
picture:hover::after{
	opacity:1;
}

This is additional to alternate texts.

The HTML reference on MDN notes the following accessibility concerns with the title attribute:

Use of the title attribute is highly problematic for:

• People using touch-only devices
• People navigating with keyboards
• People navigating with assistive technology such as screen readers or magnifiers
• People experiencing fine motor control impairment
• People with cognitive concerns

This is due to inconsistent browser support, compounded by the additional assistive technology parsing of the browser-rendered page. If a tooltip effect is desired, it is better to use a more accessible technique that can be accessed with the above browsing methods.

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/title

Great question! The title attribute is visually hidden unless you know to hover, and doesn’t work on mobile. Title definitely has uses but I wanted this to be a prominent feature accessible across all devices.