Add Adding Alt Text To An Image as an html til

README.md

@@ -9,7 +9,7 @@ and pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud).
 
-_881 TILs and counting..._
+_882 TILs and counting..._
 
 ---
 
@@ -262,6 +262,7 @@ _881 TILs and counting..._
 
 ### HTML
 
+- [Adding Alt Text To An Image](html/adding-alt-text-to-an-image.md)
 - [Render Text As Superscript](html/render-text-as-superscript.md)
 - [Submit A Form With A Button Outside The Form](html/submit-a-form-with-a-button-outside-the-form.md)
 

html/adding-alt-text-to-an-image.md

@@ -0,0 +1,27 @@
+# Adding Alt Text To An Image
+
+Images on their own are not accessible to anyone using a screen reader. As the
+people putting content on the web, we can make images more accessible by
+providing _alternative_ text. This is such a standard that linters not only
+flag `<img />` tags that are missing the `alt` attribute, they also admonish
+you for unhelpful description text like "image."
+
+You can appease the linter and make your content accessible with some
+descriptive text:
+
+```html
+<img src="some/image.jpg" alt="a graph with lines trending up" />
+```
+
+When appropriate, you can also choose to include the `alt` attribute with a
+blank value.
+
+> If an image is purely decorative, then we add alt="" to let screen readers
+> know that it’s not important. But if an image is informative, then we need to
+> be supplying a text alternative that describes the picture for anyone who’s
+> using a screen reader or isn’t able to see the image.
+
+Part of accessibility is not putting a bunch of noise in front of your users.
+If the image isn't part of the content, use `alt=""`.
+
+[source](https://24ways.org/2019/twelve-days-of-front-end-testing/)