From 56f619a34918724513e56f7fb598778257fff68d Mon Sep 17 00:00:00 2001 From: jinkai Date: Sat, 16 Nov 2024 18:22:38 +0800 Subject: [PATCH 1/5] fix: init --- .../tutorials/images/decision-tree.zh-hans.md | 91 +++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 pages/design-develop/tutorials/images/decision-tree.zh-hans.md diff --git a/pages/design-develop/tutorials/images/decision-tree.zh-hans.md b/pages/design-develop/tutorials/images/decision-tree.zh-hans.md new file mode 100644 index 00000000000..710bc29d5e6 --- /dev/null +++ b/pages/design-develop/tutorials/images/decision-tree.zh-hans.md @@ -0,0 +1,91 @@ +--- +# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#". +# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:". + +title: "An alt Decision Tree" +title_html: "An alt Decision Tree" +lang: zh-hans # Change "en" to the translated-language shortcode +last_updated: 2024-05-13 # Keep the date of the English version + +translators: +# - name: "Translator Name Here" # Add one -name: line for every translator +# - name: "Jan Doe" # Replace Jan Doe with translator name +# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple translators +# contributors: +# - name: "Jan Doe" # Replace Jan Doe with contributor name, or delete this line if none +# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple contributors + +github: + label: wai-tutorials + +resource: + ref: /tutorials/images/ # Do not change this + +navigation: + previous: /tutorials/images/imagemap/ # Do not change this + next: /tutorials/images/tips/ # Do not change this + +permalink: /tutorials/images/decision-tree/ # Add the language shortcode to the end, with no slash at end, for example: /link/to/page/fr +ref: /tutorials/images/decision-tree/ # Do not change this + +changelog: /tutorials/changelog/ + +# In the footer below: +# Translate the Working Group name. Leave the Working Group acronym in English. +metafooter: true +editors: + - Eric Eggert: "https://www.w3.org/People/yatil/" + - Shadi Abou-Zahra: "https://www.w3.org/People/shadi/" +update_editors: + - Brian Elton +contributing_participants: + - see Acknowledgements +support: Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-ACT project, co-funded by the European Commission IST Programme. + +# Read Translations Notes for this resource at https://github.com/w3c/wai-tutorials#readme +--- + +{::nomarkdown} +{% include box.html type="start" h="2" title="Overview" class="full" %} +{:/} + +This decision tree describes how to use the `alt` attribute of the `` element in various situations. For some types of images, there are alternative approaches, such as using CSS background images for decorative images or web fonts instead of images of text. + +{::nomarkdown} +{% include box.html type="end" %} +{:/} + +- **Does the image contain text?** + - {:.yes} **Yes:** + - **… and the text is also present as *real* text nearby.** + _Use an empty `alt` attribute. See [Decorative Images](/tutorials/images/decorative/)._ + - **… and the text is only shown for visual effects.** + _Use an empty `alt` attribute. See [Decorative Images](/tutorials/images/decorative/)._ + - **… and the text has a specific function, for example is an icon.** + _Use the `alt` attribute to communicate the function of the image. See [Functional Images](/tutorials/images/functional/)._ + - **… and the text in the image is not present otherwise.** _Use the `alt` attribute to include the text of the image. See [Images of Text](/tutorials/images/textual/#styled-text-decorative-effect)._ + - {:.no} **No:** + - Continue. +- **Is the image used in a link or a button, and would it be hard or impossible to understand what the link or the button does, if the image wasn’t there?** + - {:.yes} **Yes:** + - _Use the `alt` attribute to communicate the destination of the link or action taken. See [Functional Images](/tutorials/images/functional/)._ + - {:.no} **No:** + - Continue. +- **Does the image contribute meaning to the current page or context?** + - {:.yes} **Yes:** + - **… and it’s a simple graphic or photograph.** + _Use a brief description of the image in a way that conveys that meaning in the `alt` attribute. See [Informative Images](/tutorials/images/informative/)._ + - **… and it’s a graph or complex piece of information.** + _Include the information contained in the image elsewhere on the page. See [Complex Images](/tutorials/images/complex/)._ + - **… and it shows content that is redundant to *real* text nearby.** + _Use an empty `alt` attribute. See (redundant) [Functional Images](/tutorials/images/functional/#logo-image-within-link-text)._ + - {:.no} **No:** + - Continue. +- **Is the image purely decorative or not intended for users?** + - {:.yes} **Yes:** + - _Use an empty `alt` attribute. See [Decorative Images](/tutorials/images/decorative/)._ + - {:.no} **No:** + - Continue. +- **Is the image’s use not listed above or it’s unclear what `alt` text to provide?** + - {:.yes} This decision tree **does not** cover all cases. For detailed information on the provision of text alternatives refer to the [[Images Tutorials]](/tutorials/images/). +{:.decision-tree} From 60b35accb5e47fad44872a49ca129c7c930186ec Mon Sep 17 00:00:00 2001 From: JinKai <59952672+JinMokai@users.noreply.github.com> Date: Sat, 23 Nov 2024 10:41:03 +0800 Subject: [PATCH 2/5] feat: translate chinese --- .../tutorials/images/decision-tree.zh-hans.md | 82 +++++++++---------- 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/pages/design-develop/tutorials/images/decision-tree.zh-hans.md b/pages/design-develop/tutorials/images/decision-tree.zh-hans.md index 710bc29d5e6..630f7fd0dbf 100644 --- a/pages/design-develop/tutorials/images/decision-tree.zh-hans.md +++ b/pages/design-develop/tutorials/images/decision-tree.zh-hans.md @@ -2,13 +2,13 @@ # Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#". # In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:". -title: "An alt Decision Tree" -title_html: "An alt Decision Tree" +title: "替代决策树" +title_html: "alt 替代决策树" lang: zh-hans # Change "en" to the translated-language shortcode last_updated: 2024-05-13 # Keep the date of the English version translators: -# - name: "Translator Name Here" # Add one -name: line for every translator +- name: "金凯" # Add one -name: line for every translator # - name: "Jan Doe" # Replace Jan Doe with translator name # - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple translators # contributors: @@ -25,7 +25,7 @@ navigation: previous: /tutorials/images/imagemap/ # Do not change this next: /tutorials/images/tips/ # Do not change this -permalink: /tutorials/images/decision-tree/ # Add the language shortcode to the end, with no slash at end, for example: /link/to/page/fr +permalink: /tutorials/images/decision-tree/zh-hans # Add the language shortcode to the end, with no slash at end, for example: /link/to/page/fr ref: /tutorials/images/decision-tree/ # Do not change this changelog: /tutorials/changelog/ @@ -39,53 +39,53 @@ editors: update_editors: - Brian Elton contributing_participants: - - see Acknowledgements -support: Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-ACT project, co-funded by the European Commission IST Programme. + - 参见 致谢 +support: 由教育和外联工作组开发 (EOWG). 在 WAI-ACT project 支持下开发, 并由 欧盟委员会IST 计划共同资助. # Read Translations Notes for this resource at https://github.com/w3c/wai-tutorials#readme --- {::nomarkdown} -{% include box.html type="start" h="2" title="Overview" class="full" %} +{% include box.html type="start" h="2" title="概述" class="full" %} {:/} -This decision tree describes how to use the `alt` attribute of the `` element in various situations. For some types of images, there are alternative approaches, such as using CSS background images for decorative images or web fonts instead of images of text. +这个决策树描述了如何在各种情况下使用``元素的`alt`属性. 对于某些类型的图像，可以采用其他方法，例如使用 CSS 背景图像来制作装饰图像，或使用网络字体来代替文本图像。 {::nomarkdown} {% include box.html type="end" %} {:/} -- **Does the image contain text?** - - {:.yes} **Yes:** - - **… and the text is also present as *real* text nearby.** - _Use an empty `alt` attribute. See [Decorative Images](/tutorials/images/decorative/)._ - - **… and the text is only shown for visual effects.** - _Use an empty `alt` attribute. See [Decorative Images](/tutorials/images/decorative/)._ - - **… and the text has a specific function, for example is an icon.** - _Use the `alt` attribute to communicate the function of the image. See [Functional Images](/tutorials/images/functional/)._ - - **… and the text in the image is not present otherwise.** _Use the `alt` attribute to include the text of the image. See [Images of Text](/tutorials/images/textual/#styled-text-decorative-effect)._ - - {:.no} **No:** - - Continue. -- **Is the image used in a link or a button, and would it be hard or impossible to understand what the link or the button does, if the image wasn’t there?** - - {:.yes} **Yes:** - - _Use the `alt` attribute to communicate the destination of the link or action taken. See [Functional Images](/tutorials/images/functional/)._ - - {:.no} **No:** - - Continue. -- **Does the image contribute meaning to the current page or context?** - - {:.yes} **Yes:** - - **… and it’s a simple graphic or photograph.** - _Use a brief description of the image in a way that conveys that meaning in the `alt` attribute. See [Informative Images](/tutorials/images/informative/)._ - - **… and it’s a graph or complex piece of information.** - _Include the information contained in the image elsewhere on the page. See [Complex Images](/tutorials/images/complex/)._ - - **… and it shows content that is redundant to *real* text nearby.** - _Use an empty `alt` attribute. See (redundant) [Functional Images](/tutorials/images/functional/#logo-image-within-link-text)._ - - {:.no} **No:** - - Continue. -- **Is the image purely decorative or not intended for users?** - - {:.yes} **Yes:** - - _Use an empty `alt` attribute. See [Decorative Images](/tutorials/images/decorative/)._ - - {:.no} **No:** - - Continue. -- **Is the image’s use not listed above or it’s unclear what `alt` text to provide?** - - {:.yes} This decision tree **does not** cover all cases. For detailed information on the provision of text alternatives refer to the [[Images Tutorials]](/tutorials/images/). +- **图像是否包含文字?** + - {:.是} **是：** + - **…并且文本也以*真实*文本的形式呈现在周围。** + _使用空的`alt`属性。 参见 [装饰图像](/tutorials/images/decorative/)._ + - **…并且文字显示只是为了视觉效果。** + _使用空的`alt`属性。 参见 [装饰图像](/tutorials/images/decorative/)。_ + - **…并且文字还有一个特殊功能，例如是一个图标** + _并且使用`alt`属性能传达图像的功能。 参见 [功能性图片](/tutorials/images/functional/)。_ + - **…否则图像中的文字将不存在。** _使用`alt`属性包含图片文本。 参见 [文本图像](/tutorials/images/textual/#styled-text-decorative-effect)._ + - {:.否} **否：** + - 继续。 +- **图片是用于链接还是按钮，如果没有图片，是否很难或无法理解链接或按钮的作用？** + - {:.是} **是：** + - _使用 `alt` 属性传达链接的目的地或采取的行动。 参见 [功能性图片](/tutorials/images/functional/)._ + - {:.否} **否：** + - 继续。 +- **图片对当前页面或上下文是否有意义？** + - {:.是} **是：** + - **…并且是简单的图形或照片。** + _在`alt`属性中使用简明的图片说明，以传递该含义. 参见 [信息图片](/tutorials/images/informative/)。_ + - **…并且是图表或复杂的信息。** + _在页面其他地方包含图片中的信息 参见 [复杂图像](/tutorials/images/complex/)。_ + - **…而且它显示的内容与附近*真实*的文本是多余的** + _使用一个空的`alt`属性. 参见 (多余的) [功能性图片](/tutorials/images/functional/#logo-image-within-link-text)。_ + - {:.否} **否：** + - 继续。 +- **图片是否纯粹是装饰性的，或不是为用户设计的？** + - {:.是} **是：** + - _使用空`alt`属性。 参见 [装饰图像](/tutorials/images/decorative/)._ + - {:.否} **否：** + - 继续。 +- **图片的用途上面没有列出，还是不清楚应该提供什么`alt`文本？** + - {:.是} 这个决策树没有涵盖所有用例。有关提供文本替代方案的详细信息，请参阅 [[图像教程]](/tutorials/images/). {:.decision-tree} From f7c9f92eb685060b34c984ee702933d2f817ca09 Mon Sep 17 00:00:00 2001 From: JinKai <59952672+JinMokai@users.noreply.github.com> Date: Sat, 23 Nov 2024 12:15:55 +0800 Subject: [PATCH 3/5] fix: some text --- .../tutorials/images/decision-tree.zh-hans.md | 45 ++++++++++--------- 1 file changed, 23 insertions(+), 22 deletions(-) diff --git a/pages/design-develop/tutorials/images/decision-tree.zh-hans.md b/pages/design-develop/tutorials/images/decision-tree.zh-hans.md index 630f7fd0dbf..06c2a546b52 100644 --- a/pages/design-develop/tutorials/images/decision-tree.zh-hans.md +++ b/pages/design-develop/tutorials/images/decision-tree.zh-hans.md @@ -9,6 +9,7 @@ last_updated: 2024-05-13 # Keep the date of the English version translators: - name: "金凯" # Add one -name: line for every translator + link: "https://github.com/JinMokai" # - name: "Jan Doe" # Replace Jan Doe with translator name # - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple translators # contributors: @@ -39,8 +40,8 @@ editors: update_editors: - Brian Elton contributing_participants: - - 参见 致谢 -support: 由教育和外联工作组开发 (EOWG). 在 WAI-ACT project 支持下开发, 并由 欧盟委员会IST 计划共同资助. + - 参阅 致谢 +support: 由教育和外联工作组开发 (EOWG)。 在 WAI-ACT project 支持下开发, 并由 欧盟委员会IST 计划共同资助。 # Read Translations Notes for this resource at https://github.com/w3c/wai-tutorials#readme --- @@ -49,43 +50,43 @@ support: 由教育和外联工作组开发 (`元素的`alt`属性. 对于某些类型的图像，可以采用其他方法，例如使用 CSS 背景图像来制作装饰图像，或使用网络字体来代替文本图像。 +这个决策树描述了如何在各种情况下使用``元素的`alt`属性。对于某些类型的图像，可以采用其他方法，例如使用 CSS 背景图像来制作装饰图像，或使用网络字体来代替文本图像。 {::nomarkdown} {% include box.html type="end" %} {:/} - **图像是否包含文字?** - - {:.是} **是：** + - {:.yes} **是：** - **…并且文本也以*真实*文本的形式呈现在周围。** - _使用空的`alt`属性。 参见 [装饰图像](/tutorials/images/decorative/)._ + _使用空的`alt`属性。参阅 [装饰图像](/tutorials/images/decorative/)。_ - **…并且文字显示只是为了视觉效果。** - _使用空的`alt`属性。 参见 [装饰图像](/tutorials/images/decorative/)。_ + _使用空的`alt`属性。参阅 [装饰图像](/tutorials/images/decorative/)。_ - **…并且文字还有一个特殊功能，例如是一个图标** - _并且使用`alt`属性能传达图像的功能。 参见 [功能性图片](/tutorials/images/functional/)。_ - - **…否则图像中的文字将不存在。** _使用`alt`属性包含图片文本。 参见 [文本图像](/tutorials/images/textual/#styled-text-decorative-effect)._ - - {:.否} **否：** + _并且使用`alt`属性能传达图像的功能。参阅 [功能性图片](/tutorials/images/functional/)。_ + - **…否则图像中的文字将不存在。** _使用`alt`属性包含图片文本。参阅 [文本图像](/tutorials/images/textual/#styled-text-decorative-effect)。_ + - {:.no} **否：** - 继续。 - **图片是用于链接还是按钮，如果没有图片，是否很难或无法理解链接或按钮的作用？** - - {:.是} **是：** - - _使用 `alt` 属性传达链接的目的地或采取的行动。 参见 [功能性图片](/tutorials/images/functional/)._ - - {:.否} **否：** + - {:.yes} **是：** + - _使用 `alt` 属性传达链接的目的地或采取的行动。参阅 [功能性图片](/tutorials/images/functional/)._ + - {:.no} **否：** - 继续。 - **图片对当前页面或上下文是否有意义？** - - {:.是} **是：** + - {:.yes} **是：** - **…并且是简单的图形或照片。** - _在`alt`属性中使用简明的图片说明，以传递该含义. 参见 [信息图片](/tutorials/images/informative/)。_ + _在`alt`属性中使用简明的图片说明，以传递该含义。参阅 [信息图片](/tutorials/images/informative/)。_ - **…并且是图表或复杂的信息。** - _在页面其他地方包含图片中的信息 参见 [复杂图像](/tutorials/images/complex/)。_ + _在页面其他地方包含图片中的信息。参阅 [复杂图像](/tutorials/images/complex/)。_ - **…而且它显示的内容与附近*真实*的文本是多余的** - _使用一个空的`alt`属性. 参见 (多余的) [功能性图片](/tutorials/images/functional/#logo-image-within-link-text)。_ - - {:.否} **否：** + _使用一个空的`alt`属性。参阅 (多余的) [功能性图片](/tutorials/images/functional/#logo-image-within-link-text)。_ + - {:.no} **否：** - 继续。 - **图片是否纯粹是装饰性的，或不是为用户设计的？** - - {:.是} **是：** - - _使用空`alt`属性。 参见 [装饰图像](/tutorials/images/decorative/)._ - - {:.否} **否：** + - {:.yes} **是：** + - _使用空`alt`属性。参阅 [装饰图像](/tutorials/images/decorative/)。_ + - {:.no} **否：** - 继续。 -- **图片的用途上面没有列出，还是不清楚应该提供什么`alt`文本？** - - {:.是} 这个决策树没有涵盖所有用例。有关提供文本替代方案的详细信息，请参阅 [[图像教程]](/tutorials/images/). +- **图片的用途上面没有列出，还是不确定应该提供什么`alt`文本？** + - {:.yes} 这个决策树没有涵盖所有用例。有关提供文本替代方案的详细信息，请参阅 [[图像教程]](/tutorials/images/). {:.decision-tree} From 0b7489fb7d572712b9eaae75d200745abc582d17 Mon Sep 17 00:00:00 2001 From: JinKai <59952672+JinMokai@users.noreply.github.com> Date: Sat, 23 Nov 2024 12:24:16 +0800 Subject: [PATCH 4/5] change: dot --- .../design-develop/tutorials/images/decision-tree.zh-hans.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/design-develop/tutorials/images/decision-tree.zh-hans.md b/pages/design-develop/tutorials/images/decision-tree.zh-hans.md index 06c2a546b52..9fa519798d9 100644 --- a/pages/design-develop/tutorials/images/decision-tree.zh-hans.md +++ b/pages/design-develop/tutorials/images/decision-tree.zh-hans.md @@ -69,7 +69,7 @@ support: 由教育和外联工作组开发 ( Date: Sat, 30 Nov 2024 11:07:35 +0800 Subject: [PATCH 5/5] Update pages/design-develop/tutorials/images/decision-tree.zh-hans.md Co-authored-by: Brandon Zhang --- pages/design-develop/tutorials/images/decision-tree.zh-hans.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/design-develop/tutorials/images/decision-tree.zh-hans.md b/pages/design-develop/tutorials/images/decision-tree.zh-hans.md index 9fa519798d9..ae24e9fa4af 100644 --- a/pages/design-develop/tutorials/images/decision-tree.zh-hans.md +++ b/pages/design-develop/tutorials/images/decision-tree.zh-hans.md @@ -78,7 +78,7 @@ support: 由教育和外联工作组开发 (