From 6c444f82ec01ab33ff09dde0c62898a5a1371f6b Mon Sep 17 00:00:00 2001 From: jbranchaud Date: Mon, 2 Dec 2019 12:53:47 -0600 Subject: [PATCH] Add Adding Alt Text To An Image as an html til --- README.md | 3 ++- html/adding-alt-text-to-an-image.md | 27 +++++++++++++++++++++++++++ 2 files changed, 29 insertions(+), 1 deletion(-) create mode 100644 html/adding-alt-text-to-an-image.md diff --git a/README.md b/README.md index 8bf5651..27af9ef 100644 --- a/README.md +++ b/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) diff --git a/html/adding-alt-text-to-an-image.md b/html/adding-alt-text-to-an-image.md new file mode 100644 index 0000000..2cdd8d0 --- /dev/null +++ b/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 `` 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 +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/)