Add links to w3 "An alt Decision Tree tutorial" in docs (#36357)

* Add links to w3 An alt Decision Tree tutorial in docs

* Apply suggestions from code review

Co-authored-by: Brian Thomas Smith <[email protected]>
Co-authored-by: Dipika Bhattacharya <[email protected]>

* Update files/en-us/mdn/writing_guidelines/howto/images_media/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: Brian Thomas Smith <[email protected]>
Co-authored-by: Dipika Bhattacharya <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

files/en-us/learn/accessibility/html/index.md

@@ -511,7 +511,8 @@ Any personal knowledge or extra description shouldn't be included here, as it is
 One thing to consider is whether your images have meaning inside your content, or whether they are purely for visual decoration, and thus have no meaning. If they are decorative, it is better to write an empty text as a value for `alt` attribute (see [Empty alt attributes](#empty_alt_attributes)) or to just include them in the page as CSS background images.
 
 > [!NOTE]
-> Read [Images in HTML](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML) and [Responsive images](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) for a lot more information about image implementation and best practices.
+> Read [Images in HTML](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML) and [Responsive images](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) for more information about image implementation and best practices.
+> You can also check [An alt Decision Tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) to learn how to use an alt attribute for images in various situations.
 
 If you do want to provide extra contextual information, you should put it in the text surrounding the image, or inside a `title` attribute, as shown above. In this case, most screen readers will read out the alt text, the title attribute, and the filename. In addition, browsers display title text as tooltips when moused over.
 

files/en-us/learn/getting_started_with_the_web/html_basics/index.md

@@ -127,7 +127,7 @@ The keywords for alt text are "descriptive text". The alt text you write should
 Try coming up with some better alt text for your image now.
 
 > [!NOTE]
-> Find out more about accessibility in our [accessibility learning module](/en-US/docs/Learn/Accessibility).
+> Find out more about accessibility in our [accessibility learning module](/en-US/docs/Learn/Accessibility) and [An alt Decision Tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) to learn how to use an alt attribute for images in various situations.
 
 ## Marking up text
 

files/en-us/learn/html/multimedia_and_embedding/images_in_html/index.md

@@ -118,7 +118,7 @@ What exactly should you write inside your `alt` attribute? It depends on _why_ t
 Essentially, the key is to deliver a usable experience, even when the images can't be seen. This ensures all users are not missing any of the content. Try turning off images in your browser and see how things look. You'll soon realize how helpful alt text is if the image cannot be seen.
 
 > [!NOTE]
-> For more information, see our guide to [Text Alternatives](/en-US/docs/Learn/Accessibility/HTML#text_alternatives).
+> For more information, see our guide to [Text Alternatives](/en-US/docs/Learn/Accessibility/HTML#text_alternatives) and [An alt Decision Tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) to learn how to use an alt attribute for images in various situations.
 
 ### Width and height
 

files/en-us/learn/tools_and_testing/cross_browser_testing/accessibility/index.md

@@ -186,7 +186,7 @@ Sometimes it is not possible to avoid losing keyboard accessibility. You might h
 Text alternatives are very important for accessibility — if a person has a visual or hearing impairment that stops them being able to see or hear some content, then this is a problem. The simplest text alternative available is the humble `alt` attribute, which we should include on all images that contain relevant content. This should contain a description of the image that successfully conveys its meaning and content on the page, to be picked up by a screen reader and read out to the user.
 
 > [!NOTE]
-> For more information, read [Text alternatives](/en-US/docs/Learn/Accessibility/HTML#text_alternatives).
+> For more information, read [Text alternatives](/en-US/docs/Learn/Accessibility/HTML#text_alternatives) and [An alt Decision Tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) to learn how to use an alt attribute for images in various situations.
 
 Missing alt text can be tested for in a number of ways, for example using accessibility [Auditing tools](#auditing_tools).
 

files/en-us/mdn/writing_guidelines/howto/images_media/index.md

@@ -91,6 +91,7 @@ Examples:
 ```
 
 While purely decorative images should have an empty `alt`, images added to MDN documentation should have a purpose, and therefore require a non-empty-string description.
+For hints on alt text, see [An alt Decision Tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) to learn how to use an alt attribute for images in various situations.
 
 ## Compressing images
 

files/en-us/web/api/htmlinputelement/alt/index.md

@@ -39,4 +39,5 @@ inputElement.alt = "A much better description";
 - {{HTMLElement("button")}}
 - {{HTMLElement("input")}}
 - {{HTMLElement("img")}}
-- [Writing good alt text](https://www.wcag.com/blog/good-alt-text-bad-alt-text-making-your-content-perceivable/)
+- [Good alt text, bad alt text — Making your content perceivable](https://www.wcag.com/blog/good-alt-text-bad-alt-text-making-your-content-perceivable/) on WCAG.com (2021)
+- [An alt Decision Tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) on W3C Web Accessibility Initiative (WAI)