Template for a button you can add to images on your website to visibly show/hide alt text.
demo.mov
First, download the alt-text-button.css file and include it in your site HTML.
Then, use the following structure for your images:
<figure> <picture> <img alt="A supermarket in Berlin with a sign that reads 'freshly made smiles'." loading="lazy" src="https://jamesg.blog/assets/smiles.avif"> </picture> <details class="alt" aria-label="Show or hide the alt text for the image"> <summary>ALT</summary> <p>A supermarket in Berlin with a sign that reads "freshly made smiles".</p> </details> </figure>This project is licensed under an MIT-0 license.