From de43f2790bc2f3b3f665915fcfed00685d0a6cfc Mon Sep 17 00:00:00 2001 From: Matt Begent Date: Thu, 31 Oct 2024 11:39:57 +0000 Subject: [PATCH 1/2] Alt decision tree document --- README.md | 3 +- documentation/alt-decision-tree-developers.md | 45 +++++++++++++++++++ 2 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 documentation/alt-decision-tree-developers.md diff --git a/README.md b/README.md index 0a803b8..db1c765 100644 --- a/README.md +++ b/README.md @@ -4,4 +4,5 @@ This repository is used by the Accessibility Guild to draft and write documentio ## Documentation -- [Accessibility Guild Mission Statement](/documentation/mission-statment.md) \ No newline at end of file +- [Accessibility Guild Mission Statement](/documentation/mission-statment.md) +- [Alt Decision Tree For Umbraco Developers](/documentation/alt-decision-tree-developers.md) \ No newline at end of file diff --git a/documentation/alt-decision-tree-developers.md b/documentation/alt-decision-tree-developers.md new file mode 100644 index 0000000..4863e65 --- /dev/null +++ b/documentation/alt-decision-tree-developers.md @@ -0,0 +1,45 @@ +# Alt Decision Tree For Umbraco Developers + +This decision tree describes how Umbraco developers should use the `alt` attribute of the `` element in various situations. + +Before getting into the tree there are two main rules: + +1) Please do not put alt text as a field against images in the Umbraco Media Library. Alt text on images is all about context, so if it's needed please add alt text fields where users are adding their content. + +2) If no alt text is provided by the user for an image, output an empty `alt` attribute on the image, so the image can be ignored by assistive technologies. + +## Will the image likely contain text? + +No: +Continue + +Yes: +Provide an alt text field explaining to users that they should provide the text of the image unless the image is purely decorative. + +## Is the image used in a link or a button? + +No: +Continue + +Yes: +Provide an alt text field explaining to users that they should communicate the destination of the link or action taken. + +## Will the image contribute meaning to the current page or context? + +No: +Continue + +Yes: +Provide an alt text field explaining to users what good alt text looks like. + +## Is the image purely decorative or not intended for users? + +No: +Continue + +Yes: +Don't have an alt text field, but do output an empty `alt` attribute on the `` element. e.g. `` + +## Your image doesn't fit any of these + +Don't panic. Have a read about images on the W3C Web Accessibility Initiative (WAI) website https://www.w3.org/WAI/tutorials/images/. From 48ce881fbec402e1f6dab0671a1874715ba26720 Mon Sep 17 00:00:00 2001 From: bkclerke Date: Thu, 7 Nov 2024 19:57:08 -0800 Subject: [PATCH 2/2] update text and format --- documentation/alt-decision-tree-developers.md | 48 ++++++++----------- 1 file changed, 21 insertions(+), 27 deletions(-) diff --git a/documentation/alt-decision-tree-developers.md b/documentation/alt-decision-tree-developers.md index 4863e65..7c785af 100644 --- a/documentation/alt-decision-tree-developers.md +++ b/documentation/alt-decision-tree-developers.md @@ -2,44 +2,38 @@ This decision tree describes how Umbraco developers should use the `alt` attribute of the `` element in various situations. -Before getting into the tree there are two main rules: +## Key Rules Before You Begin -1) Please do not put alt text as a field against images in the Umbraco Media Library. Alt text on images is all about context, so if it's needed please add alt text fields where users are adding their content. +**1. Avoid Using Alt Text Fields in the Umbraco Media Library** +Alt text should not be added as a field for images directly in the Media section. The context in which the image is used will determine if alt text is necessary, and therefore alt text fields should be placed where users are adding content. -2) If no alt text is provided by the user for an image, output an empty `alt` attribute on the image, so the image can be ignored by assistive technologies. +**2. If No Alt Text is Provided** +If the user does not provide alt text for an image, the image should have an empty `alt` attribute, so that it can be ignored by assistive technologies. Example: ``. -## Will the image likely contain text? +--- -No: -Continue +## How to Use Alt Text -Yes: -Provide an alt text field explaining to users that they should provide the text of the image unless the image is purely decorative. +### Is the image likely to contain text? -## Is the image used in a link or a button? +* **No:** Continue +* **Yes:** Provide an alt text field explaining to users that they should provide the text of the image unless the image is purely decorative. -No: -Continue +### Is the image used in a link or a button? -Yes: -Provide an alt text field explaining to users that they should communicate the destination of the link or action taken. +* **No:** Continue +* **Yes:** Provide an alt text field explaining to users that they should communicate the destination of the link or action taken. -## Will the image contribute meaning to the current page or context? +### Will the image provide meaning or context to the content of the page? -No: -Continue +* **No:** Continue +* **Yes:** Provide an alt text field explaining to users what good alt text looks like. -Yes: -Provide an alt text field explaining to users what good alt text looks like. +### Is the image purely decorative or not intended for users? -## Is the image purely decorative or not intended for users? +* **No:** Continue +* **Yes:** Don't have an alt text field, but do output an empty `alt` attribute on the `` element. e.g. `` -No: -Continue +### If the image doesn’t fit into any of these categories: -Yes: -Don't have an alt text field, but do output an empty `alt` attribute on the `` element. e.g. `` - -## Your image doesn't fit any of these - -Don't panic. Have a read about images on the W3C Web Accessibility Initiative (WAI) website https://www.w3.org/WAI/tutorials/images/. +Don’t worry! For additional guidance on how to determine whether an image needs alt text, refer to the [W3C Web Accessibility Initiative (WAI) website](https://www.w3.org/WAI/tutorials/images/).