Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Please be accessible, my dudes.

If you have images and you are showing them on the web using an <img> tag, you must ALWAYS include alt text.

If you are writing markdown, you have no excuse not to add alt text.

![Alt text right here buddy](src)

Doing this is lazy. You're better than that.

![](src)

What about decorative images?

Put your decorative images in your css, plz. But if you have to put it in your markup, you can exclude the alt tag. And I am talking decorative. Like background image of repeating pictures of Tom Hardy hugging a puppy, has nothing to do with your website, decorative.

What if I have an embedded file in an iframe, do I need alt text? With iframes, do the following:

<figure>
	<iframe aria-labelledby="embed-caption"></iframe>
	<figcaption id="embed-caption">This am what the thing are</figcaption>
</figure>

What's this figcaption? Can I use figcaption and alt text on an image at THE SAME TIME?

YES you absolutely can!

<figure>
	<img src="…" alt="A rad wolf">
	<figcaption id="embed-caption">Look how dope his shades are; are you even kidding me with the radness of this wolf</figcaption>
</figure>

a11y is important. It's so important COMPANIES HAVE BEEN SUED OVER IT. Please add alt text and figcaptions to your images and embedded files.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.