Skip to content

Instantly share code, notes, and snippets.

@deathbearbrown
Last active April 27, 2017 20:33
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save deathbearbrown/ef21581530943468a522 to your computer and use it in GitHub Desktop.
Save deathbearbrown/ef21581530943468a522 to your computer and use it in GitHub Desktop.
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