From 904b9b2c64a80e4223689db97654b233d86fc150 Mon Sep 17 00:00:00 2001 From: Brian Elton Date: Mon, 20 Mar 2023 17:24:02 -0400 Subject: [PATCH 01/36] adding tip about responsive design and tables --- content/tables/tips.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/content/tables/tips.md b/content/tables/tips.md index 4128133c..b99c3e16 100755 --- a/content/tables/tips.md +++ b/content/tables/tips.md @@ -31,6 +31,8 @@ support: Developed by the Education and Outreach Working Group (` cells. Screen readers may read aloud all `` cells in a column, resulting in confusion. [Start a new `` when the topic changes.](/tutorials/tables/multi-level/#split-up-multi-level-tables) From e7ae6043c8a47d4cb1c94e40fa1eaeb40ada5d38 Mon Sep 17 00:00:00 2001 From: Ed Ball Date: Fri, 29 Sep 2023 09:23:04 +0100 Subject: [PATCH 03/36] Update multi-level.md Changes empty th elements to td elements --- content/tables/multi-level.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/tables/multi-level.md b/content/tables/multi-level.md index 774370eb..464d0022 100755 --- a/content/tables/multi-level.md +++ b/content/tables/multi-level.md @@ -67,7 +67,7 @@ In the table below, the headers for the top half of the tables are different to Supplier contacts - + @@ -87,7 +87,7 @@ In the table below, the headers for the top half of the tables are different to - + From b5e59076dce81aacb1abbca02bd6bc2147d428d4 Mon Sep 17 00:00:00 2001 From: Brian Elton Date: Tue, 7 Nov 2023 08:16:09 -0500 Subject: [PATCH 04/36] Update multi-page.md --- content/forms/multi-page.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/content/forms/multi-page.md b/content/forms/multi-page.md index 6a834af2..b0fe3705 100755 --- a/content/forms/multi-page.md +++ b/content/forms/multi-page.md @@ -201,9 +201,11 @@ progress { /* Apple Safari and Google Chrome */ progress::-webkit-progress-bar { + background-color: #FFF; +} +progress::-webkit-progress-value { background-color: #036; } - /* Mozilla Firefox */ progress::-moz-progress-bar { background-color: #036; From ede7a8fe5f7e62be96641f5cca63d17a109f9b76 Mon Sep 17 00:00:00 2001 From: Brian Elton Date: Tue, 7 Nov 2023 08:23:49 -0500 Subject: [PATCH 05/36] Update multi-page.md --- content/forms/multi-page.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/forms/multi-page.md b/content/forms/multi-page.md index b0fe3705..fa61274f 100755 --- a/content/forms/multi-page.md +++ b/content/forms/multi-page.md @@ -156,7 +156,9 @@ progress { progress::-webkit-progress-bar { background-color:#036; } - +progress::-webkit-progress-value { + background-color: #036; +} progress::-moz-progress-bar { background-color:#036; } @@ -203,9 +205,7 @@ progress { progress::-webkit-progress-bar { background-color: #FFF; } -progress::-webkit-progress-value { - background-color: #036; -} + /* Mozilla Firefox */ progress::-moz-progress-bar { background-color: #036; From 127db8d4b746214216c845858020e6c1829abc8e Mon Sep 17 00:00:00 2001 From: Brian Elton Date: Tue, 7 Nov 2023 08:25:34 -0500 Subject: [PATCH 06/36] Update multi-page.md --- content/forms/multi-page.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/forms/multi-page.md b/content/forms/multi-page.md index fa61274f..c84fc8e9 100755 --- a/content/forms/multi-page.md +++ b/content/forms/multi-page.md @@ -154,7 +154,7 @@ progress { } progress::-webkit-progress-bar { - background-color:#036; + background-color:#FFF; } progress::-webkit-progress-value { background-color: #036; From 20516e16ad23d095eb026f97a494fa47aee27c18 Mon Sep 17 00:00:00 2001 From: Brian Elton Date: Tue, 7 Nov 2023 08:31:24 -0500 Subject: [PATCH 07/36] Update multi-page.md --- content/forms/multi-page.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/content/forms/multi-page.md b/content/forms/multi-page.md index c84fc8e9..6ac657bb 100755 --- a/content/forms/multi-page.md +++ b/content/forms/multi-page.md @@ -205,7 +205,9 @@ progress { progress::-webkit-progress-bar { background-color: #FFF; } - +progress::-webkit-progress-value { + background-color: #036; +} /* Mozilla Firefox */ progress::-moz-progress-bar { background-color: #036; From 78cebd867f3d7db8bb7379be09d5caa9f02dc908 Mon Sep 17 00:00:00 2001 From: Brian Elton Date: Tue, 7 Nov 2023 08:33:36 -0500 Subject: [PATCH 08/36] Update multi-page.md --- content/forms/multi-page.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/forms/multi-page.md b/content/forms/multi-page.md index 6ac657bb..d3e57451 100755 --- a/content/forms/multi-page.md +++ b/content/forms/multi-page.md @@ -208,6 +208,7 @@ progress::-webkit-progress-bar { progress::-webkit-progress-value { background-color: #036; } + /* Mozilla Firefox */ progress::-moz-progress-bar { background-color: #036; From 676becc39cf32bd2aab12e5961508b1f3dbbe6d6 Mon Sep 17 00:00:00 2001 From: Brian Elton Date: Tue, 7 Nov 2023 08:35:04 -0500 Subject: [PATCH 09/36] Update multi-page.md --- content/forms/multi-page.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/forms/multi-page.md b/content/forms/multi-page.md index d3e57451..deefcf73 100755 --- a/content/forms/multi-page.md +++ b/content/forms/multi-page.md @@ -153,9 +153,9 @@ progress { overflow:hidden; } -progress::-webkit-progress-bar { +/* progress::-webkit-progress-bar { background-color:#FFF; -} +} */ progress::-webkit-progress-value { background-color: #036; } From ca9fffd6c0e21c6b839db51de1715f236d634a12 Mon Sep 17 00:00:00 2001 From: Brian Elton Date: Tue, 7 Nov 2023 08:42:18 -0500 Subject: [PATCH 10/36] Update multi-page.md --- content/forms/multi-page.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/forms/multi-page.md b/content/forms/multi-page.md index deefcf73..d3e57451 100755 --- a/content/forms/multi-page.md +++ b/content/forms/multi-page.md @@ -153,9 +153,9 @@ progress { overflow:hidden; } -/* progress::-webkit-progress-bar { +progress::-webkit-progress-bar { background-color:#FFF; -} */ +} progress::-webkit-progress-value { background-color: #036; } From d2cdcf961bff37272c9868b7573e77c0c24cdfd3 Mon Sep 17 00:00:00 2001 From: Brian Elton Date: Wed, 8 Nov 2023 19:04:11 -0500 Subject: [PATCH 11/36] Update links in labels.md --- content/forms/labels.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/forms/labels.md b/content/forms/labels.md index df872fd1..36e8de68 100755 --- a/content/forms/labels.md +++ b/content/forms/labels.md @@ -61,7 +61,7 @@ Provide labels to identify all form controls, including text fields, checkboxes, {% include_cached toc.html %} -Labels need to describe the purpose of the form control. This section of the tutorial describes how to provide labels that are properly associated with form controls. Later sections explain how to provide [instructions](instructions.html), [validate user input](validation.html), and [provide feedback](notifications.html) to help users complete your form. +Labels need to describe the purpose of the form control. This section of the tutorial describes how to provide labels that are properly associated with form controls. Later sections explain how to provide [instructions](/tutorials/forms/instructions), [validate user input](tutorials/form/validation), and [provide feedback](/tutorials/forms/notifications) to help users complete your form. A label and a form control should be associated with each other either implicitly or explicitly. Web browsers provide the label as a larger clickable area, for example, to select or activate the control. It also ensures that assistive technology can refer to the correct label when presenting a form control. From b99714ff3fa0602bbf19028dcb45a0c708316c61 Mon Sep 17 00:00:00 2001 From: Brian Elton Date: Wed, 8 Nov 2023 19:12:02 -0500 Subject: [PATCH 12/36] Update links in forms section --- content/forms/instructions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/forms/instructions.md b/content/forms/instructions.md index 10e490fc..9792f9b5 100755 --- a/content/forms/instructions.md +++ b/content/forms/instructions.md @@ -200,7 +200,7 @@ Placeholder text provides instructions or an example of the required data format While placeholder text provides valuable guidance for many users, **placeholder text is not a replacement for labels**. Assistive technologies, such as screen readers, do not treat placeholder text as labels. Moreover, at the time of writing this tutorial, placeholder text is not broadly supported across assistive technologies and not displayed in older web browsers. -Note: Section [Hidden labels](labels.html#hidden) of this tutorial describes how to hide information visually but keep it available to assistive technology. This same approach can be used to avoid visual redundancy of displaying both labels and placeholder text. Be aware that this makes it very hard for users to review the form. To avoid this problem, JavaScript can be used to make labels appear visually (in the associated label element) above or beside the input that has focus. +Note: The [Note on hiding elements](/tutorials/forms/labels/#note-on-hiding-elements) section of the Labeling Controls tutorial describes how to hide information visually but keep it available to assistive technology. This same approach can be used to avoid visual redundancy of displaying both labels and placeholder text. Be aware that this makes it very hard for users to review the form. To avoid this problem, JavaScript can be used to make labels appear visually (in the associated label element) above or beside the input that has focus. {::nomarkdown} {% include box.html type="start" title="Example" class="example" %} From 4a8862abfece68f6290bd8734b1c86ce232cd37d Mon Sep 17 00:00:00 2001 From: Brian Elton Date: Wed, 8 Nov 2023 19:14:04 -0500 Subject: [PATCH 13/36] Update instructions.md --- content/forms/instructions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/forms/instructions.md b/content/forms/instructions.md index 9792f9b5..43b75c72 100755 --- a/content/forms/instructions.md +++ b/content/forms/instructions.md @@ -35,7 +35,7 @@ wcag_techniques: - ARIA9 metafooter: true -last_updated: 2019-07-27 +last_updated: 2023-11-08 editors: - Eric Eggert: "https://www.w3.org/People/yatil/" - Shadi Abou-Zahra: "https://www.w3.org/People/shadi/" From 98c378b255f99b921cc40606dfad838d1fe39cae Mon Sep 17 00:00:00 2001 From: Brian Elton Date: Wed, 8 Nov 2023 19:14:30 -0500 Subject: [PATCH 14/36] Update labels.md --- content/forms/labels.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/forms/labels.md b/content/forms/labels.md index 36e8de68..b76856d6 100755 --- a/content/forms/labels.md +++ b/content/forms/labels.md @@ -38,7 +38,7 @@ wcag_techniques: - ARIA16 metafooter: true -last_updated: 2019-07-27 +last_updated: 2023-11-08 editors: - Eric Eggert: "https://www.w3.org/People/yatil/" - Shadi Abou-Zahra: "https://www.w3.org/People/shadi/" From 4fb1c9a3bf56ec449854d0fe5f37225c79fef937 Mon Sep 17 00:00:00 2001 From: Brian Elton Date: Wed, 8 Nov 2023 19:19:56 -0500 Subject: [PATCH 15/36] Update labels.md --- content/forms/labels.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/forms/labels.md b/content/forms/labels.md index b76856d6..990acc36 100755 --- a/content/forms/labels.md +++ b/content/forms/labels.md @@ -61,7 +61,7 @@ Provide labels to identify all form controls, including text fields, checkboxes, {% include_cached toc.html %} -Labels need to describe the purpose of the form control. This section of the tutorial describes how to provide labels that are properly associated with form controls. Later sections explain how to provide [instructions](/tutorials/forms/instructions), [validate user input](tutorials/form/validation), and [provide feedback](/tutorials/forms/notifications) to help users complete your form. +Labels need to describe the purpose of the form control. This section of the tutorial describes how to provide labels that are properly associated with form controls. Later sections explain how to provide [instructions](/tutorials/forms/instructions), [validate user input](tutorials/forms/validation), and [provide feedback](/tutorials/forms/notifications) to help users complete your form. A label and a form control should be associated with each other either implicitly or explicitly. Web browsers provide the label as a larger clickable area, for example, to select or activate the control. It also ensures that assistive technology can refer to the correct label when presenting a form control. From 1b3496715991e4fd31328e595c0427639ea27750 Mon Sep 17 00:00:00 2001 From: Brian Elton Date: Wed, 8 Nov 2023 19:21:26 -0500 Subject: [PATCH 16/36] Update labels.md --- content/forms/labels.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/forms/labels.md b/content/forms/labels.md index 990acc36..fa024a77 100755 --- a/content/forms/labels.md +++ b/content/forms/labels.md @@ -61,7 +61,7 @@ Provide labels to identify all form controls, including text fields, checkboxes, {% include_cached toc.html %} -Labels need to describe the purpose of the form control. This section of the tutorial describes how to provide labels that are properly associated with form controls. Later sections explain how to provide [instructions](/tutorials/forms/instructions), [validate user input](tutorials/forms/validation), and [provide feedback](/tutorials/forms/notifications) to help users complete your form. +Labels need to describe the purpose of the form control. This section of the tutorial describes how to provide labels that are properly associated with form controls. Later sections explain how to provide [instructions](/tutorials/forms/instructions), [validate user input](/tutorials/forms/validation), and [provide feedback](/tutorials/forms/notifications) to help users complete your form. A label and a form control should be associated with each other either implicitly or explicitly. Web browsers provide the label as a larger clickable area, for example, to select or activate the control. It also ensures that assistive technology can refer to the correct label when presenting a form control. From 9305b11f58936ec1f1e1a6ebb33ee2d5b7bd4432 Mon Sep 17 00:00:00 2001 From: Brian Elton Date: Wed, 8 Nov 2023 19:33:21 -0500 Subject: [PATCH 17/36] Update tips.md --- content/tables/tips.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/tables/tips.md b/content/tables/tips.md index 9ebbb8c0..c5186394 100755 --- a/content/tables/tips.md +++ b/content/tables/tips.md @@ -31,7 +31,7 @@ support: Developed by the Education and Outreach Working Group ( Date: Thu, 9 Nov 2023 07:40:49 -0500 Subject: [PATCH 19/36] Update tips.md --- content/tables/tips.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/tables/tips.md b/content/tables/tips.md index 05956470..95ca5307 100755 --- a/content/tables/tips.md +++ b/content/tables/tips.md @@ -31,7 +31,7 @@ support: Developed by the Education and Outreach Working Group ( Date: Wed, 10 Apr 2024 19:50:32 -0400 Subject: [PATCH 22/36] Update labels.md fixing a conflict with master-2.0 --- content/forms/labels.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/forms/labels.md b/content/forms/labels.md index fa024a77..f25f75c9 100755 --- a/content/forms/labels.md +++ b/content/forms/labels.md @@ -61,7 +61,7 @@ Provide labels to identify all form controls, including text fields, checkboxes, {% include_cached toc.html %} -Labels need to describe the purpose of the form control. This section of the tutorial describes how to provide labels that are properly associated with form controls. Later sections explain how to provide [instructions](/tutorials/forms/instructions), [validate user input](/tutorials/forms/validation), and [provide feedback](/tutorials/forms/notifications) to help users complete your form. +Labels need to describe the purpose of the form control. This section of the tutorial describes how to provide labels that are properly associated with form controls. Later sections explain how to provide [instructions](../instructions), [validate user input](../validation), and [provide feedback](../notifications) to help users complete your form. A label and a form control should be associated with each other either implicitly or explicitly. Web browsers provide the label as a larger clickable area, for example, to select or activate the control. It also ensures that assistive technology can refer to the correct label when presenting a form control. From 81cf8e5e78ae551994fdf33f53216dbf930c2dd3 Mon Sep 17 00:00:00 2001 From: Brian Elton Date: Wed, 10 Apr 2024 20:00:17 -0400 Subject: [PATCH 23/36] Update labels.md updating date updated --- content/forms/labels.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/forms/labels.md b/content/forms/labels.md index f25f75c9..c308f00e 100755 --- a/content/forms/labels.md +++ b/content/forms/labels.md @@ -38,7 +38,7 @@ wcag_techniques: - ARIA16 metafooter: true -last_updated: 2023-11-08 +last_updated: 2024-04-10 editors: - Eric Eggert: "https://www.w3.org/People/yatil/" - Shadi Abou-Zahra: "https://www.w3.org/People/shadi/" From 0009df12c5bef3caa4f1377e9df0ece8d56e9268 Mon Sep 17 00:00:00 2001 From: Brian Elton Date: Wed, 10 Apr 2024 20:00:42 -0400 Subject: [PATCH 24/36] Update instructions.md updating date updated --- content/forms/instructions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/forms/instructions.md b/content/forms/instructions.md index 43b75c72..8b62a69e 100755 --- a/content/forms/instructions.md +++ b/content/forms/instructions.md @@ -35,7 +35,7 @@ wcag_techniques: - ARIA9 metafooter: true -last_updated: 2023-11-08 +last_updated: 2024-04-10 editors: - Eric Eggert: "https://www.w3.org/People/yatil/" - Shadi Abou-Zahra: "https://www.w3.org/People/shadi/" From 58943d4972a075013f44fb8fa9b5d8b8ba1ce058 Mon Sep 17 00:00:00 2001 From: Brian Elton Date: Fri, 12 Apr 2024 09:19:52 -0400 Subject: [PATCH 25/36] Update changelog.md for PR 775 --- content/changelog.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/content/changelog.md b/content/changelog.md index c541b8d1..7d6bbe20 100644 --- a/content/changelog.md +++ b/content/changelog.md @@ -27,6 +27,10 @@ This changelog lists substantive content edits. It does **not** list typo fixes {::nomarkdown} {% include box.html type="end" %} {:/} +## April 16 2024 +* Fixing a broken link in https://www.w3.org/WAI/tutorials/forms/instructions/#placeholder-text [#735](https://github.com/w3c/wai-tutorials/pull/735) +* Fixing a color contrast issue in https://www.w3.org/WAI/tutorials/forms/multi-page/#using-the-html5-progress-element [#732](https://github.com/w3c/wai-tutorials/pull/732) +* Fixing a table header issue in https://www.w3.org/WAI/tutorials/tables/multi-level/#table-with-multiple-column-headers-in-each-column (replacing
   Example 1 Ltd Example 2 Co
marie@2co.example.com
   Example 3 Ltd Example 4 Inc
with to follow the pattern described and used throughout) [#726](https://github.com/w3c/wai-tutorials/pull/726) ## February 2023 From 8296437f9f9b9eb5c42aad5eab7ec743ab5c08a5 Mon Sep 17 00:00:00 2001 From: Brian Elton Date: Fri, 12 Apr 2024 09:21:17 -0400 Subject: [PATCH 26/36] Update changelog.md --- content/changelog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/changelog.md b/content/changelog.md index 7d6bbe20..18ca16cd 100644 --- a/content/changelog.md +++ b/content/changelog.md @@ -30,7 +30,7 @@ This changelog lists substantive content edits. It does **not** list typo fixes ## April 16 2024 * Fixing a broken link in https://www.w3.org/WAI/tutorials/forms/instructions/#placeholder-text [#735](https://github.com/w3c/wai-tutorials/pull/735) * Fixing a color contrast issue in https://www.w3.org/WAI/tutorials/forms/multi-page/#using-the-html5-progress-element [#732](https://github.com/w3c/wai-tutorials/pull/732) -* Fixing a table header issue in https://www.w3.org/WAI/tutorials/tables/multi-level/#table-with-multiple-column-headers-in-each-column (replacing with to follow the pattern described and used throughout) [#726](https://github.com/w3c/wai-tutorials/pull/726) +* Fixing a table header issue in https://www.w3.org/WAI/tutorials/tables/multi-level/#table-with-multiple-column-headers-in-each-column [#726](https://github.com/w3c/wai-tutorials/pull/726) ## February 2023 From ffd00e476c5ffc9738c559ef95a3746a2e89b4f6 Mon Sep 17 00:00:00 2001 From: Brian Elton Date: Fri, 12 Apr 2024 14:56:13 -0400 Subject: [PATCH 27/36] Update instructions.md clarifying language for labelling controls page --- content/forms/instructions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/forms/instructions.md b/content/forms/instructions.md index 226073b5..fbd3a144 100755 --- a/content/forms/instructions.md +++ b/content/forms/instructions.md @@ -200,7 +200,7 @@ Placeholder text provides instructions or an example of the required data format While placeholder text provides valuable guidance for many users, **placeholder text is not a replacement for labels**. Assistive technologies, such as screen readers, do not treat placeholder text as labels. Moreover, at the time of writing this tutorial, placeholder text is not broadly supported across assistive technologies and not displayed in older web browsers. -Note: The [Note on hiding elements](/tutorials/forms/labels/#note-on-hiding-elements) section of the Labeling Controls tutorial describes how to hide information visually but keep it available to assistive technology. This same approach can be used to avoid visual redundancy of displaying both labels and placeholder text. Be aware that this makes it very hard for users to review the form. To avoid this problem, JavaScript can be used to make labels appear visually (in the associated label element) above or beside the input that has focus. +Note: The [Note on hiding elements](/tutorials/forms/labels/#note-on-hiding-elements) section of the Labeling Controls page describes how to hide information visually but keep it available to assistive technology. This same approach can be used to avoid visual redundancy of displaying both labels and placeholder text. Be aware that this makes it very hard for users to review the form. To avoid this problem, JavaScript can be used to make labels appear visually (in the associated label element) above or beside the input that has focus. {::nomarkdown} {% include box.html type="start" title="Example" class="example" %} From 0d0add869f9230f37c9c287577a38c9a26b2e178 Mon Sep 17 00:00:00 2001 From: Brian Elton Date: Fri, 12 Apr 2024 15:02:35 -0400 Subject: [PATCH 28/36] Update changelog.md --- content/changelog.md | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/content/changelog.md b/content/changelog.md index 18ca16cd..ddeef2ee 100644 --- a/content/changelog.md +++ b/content/changelog.md @@ -28,9 +28,15 @@ This changelog lists substantive content edits. It does **not** list typo fixes {% include box.html type="end" %} {:/} ## April 16 2024 -* Fixing a broken link in https://www.w3.org/WAI/tutorials/forms/instructions/#placeholder-text [#735](https://github.com/w3c/wai-tutorials/pull/735) -* Fixing a color contrast issue in https://www.w3.org/WAI/tutorials/forms/multi-page/#using-the-html5-progress-element [#732](https://github.com/w3c/wai-tutorials/pull/732) -* Fixing a table header issue in https://www.w3.org/WAI/tutorials/tables/multi-level/#table-with-multiple-column-headers-in-each-column [#726](https://github.com/w3c/wai-tutorials/pull/726) +In [Forms tutorial](https://www.w3.org/WAI/tutorials/forms/) +* Fixing a broken link in [Form Instructions](https://www.w3.org/WAI/tutorials/forms/instructions/#placeholder-text) + * [GitHub PR #735](https://github.com/w3c/wai-tutorials/pull/735) +* Fixing a color contrast issue in [Multi-page Forms](https://www.w3.org/WAI/tutorials/forms/multi-page/#using-the-html5-progress-element) + * [GitHub PR #732](https://github.com/w3c/wai-tutorials/pull/732) + +In [Tables tutorial](https://www.w3.org/WAI/tutorials/tables/) +* Fixing a table header issue in [Tables with Multi-Level Headers](https://www.w3.org/WAI/tutorials/tables/multi-level/#table-with-multiple-column-headers-in-each-column) + * [GitHub PR #726](https://github.com/w3c/wai-tutorials/pull/726) ## February 2023 From 54ca2018eddda3868ac6435149e889430b366d12 Mon Sep 17 00:00:00 2001 From: Brian Elton Date: Mon, 13 May 2024 06:54:02 -0400 Subject: [PATCH 29/36] Adding notes about responsive design/smaller screens (#721) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Adding notes about responsive design/smaller screens * updates based on PR feedback * updating page regions page to use sentence case * Update styling.md * Update styling.md * Update structure.md * Update regions.md * Use relative links * Update last_updated dates * Update changelog * Month only in changelog for consistency --------- Co-authored-by: Rémi Bétin Co-authored-by: Rémi Bétin --- content/carousels/styling.md | 8 ++++++-- content/changelog.md | 18 ++++++++++++------ content/forms/labels.md | 9 ++++++++- content/menus/structure.md | 5 ++++- content/page-structure/regions.md | 9 ++++++--- 5 files changed, 36 insertions(+), 13 deletions(-) diff --git a/content/carousels/styling.md b/content/carousels/styling.md index a59b91ab..0052a3d0 100644 --- a/content/carousels/styling.md +++ b/content/carousels/styling.md @@ -24,7 +24,7 @@ wcag_success_criteria: metafooter: true first_published: "May 2015" -last_updated: 2018-08-30 +last_updated: 2024-05-13 editors: - Eric Eggert: "https://www.w3.org/People/yatil/" - Shadi Abou-Zahra: "https://www.w3.org/People/shadi/" @@ -44,7 +44,7 @@ Use appropriately sized buttons and links, and provide whitespace around them, t ![Example using semi-transparent background colors to ensure sufficient contrast.]({{ "/content-images/wai-tutorials/carousels/carousels-styling-contrast.png" | relative_url }}){:.left} Ensure sufficient contrast between the foreground and the background of text, links, and buttons. This can be a challenge when text or buttons are positioned on top of images. In that case, a (semi-) opaque background color can help to maintain the contrast regardless of the image used. -{% include ednote.html note="The following paragraph was show in a side column before." %}For more information on contrast requirements, see [Provide sufficient contrast between foreground and background](https://www.w3.org/WAI/gettingstarted/tips/designing.html#provide-sufficient-contrast-between-foreground-and-background). +{% include ednote.html note="The following paragraph was show in a side column before." %}For more information on contrast requirements, see [Provide sufficient contrast between foreground and background](/tips/designing/#provide-sufficient-contrast-between-foreground-and-background). ## Indicate Button Status @@ -117,3 +117,7 @@ In the following example, a filled square is used for buttons associated with it {:/} {% include ednote.html note="The following paragraph was show in a side column before." %}A [working demo example](/tutorials/carousels/working-example/) for this code is available. + +## For smaller screens/small viewports +Ensure all text is readable and not cut off or unnecessarily truncated. Make sure that [navigation buttons](/tutorials/carousels/functionality/#add-navigation-buttons) to control the slides are available, since some people cannot use swipe gestures. + diff --git a/content/changelog.md b/content/changelog.md index ddeef2ee..c3e69ccb 100644 --- a/content/changelog.md +++ b/content/changelog.md @@ -27,17 +27,23 @@ This changelog lists substantive content edits. It does **not** list typo fixes {::nomarkdown} {% include box.html type="end" %} {:/} -## April 16 2024 -In [Forms tutorial](https://www.w3.org/WAI/tutorials/forms/) -* Fixing a broken link in [Form Instructions](https://www.w3.org/WAI/tutorials/forms/instructions/#placeholder-text) +## May 2024 +In [Forms tutorial](/tutorials/forms/) +* Fixing a broken link in [Form Instructions](/tutorials/forms/instructions/#placeholder-text) * [GitHub PR #735](https://github.com/w3c/wai-tutorials/pull/735) -* Fixing a color contrast issue in [Multi-page Forms](https://www.w3.org/WAI/tutorials/forms/multi-page/#using-the-html5-progress-element) +* Fixing a color contrast issue in [Multi-page Forms](/tutorials/forms/multi-page/#using-the-html5-progress-element) * [GitHub PR #732](https://github.com/w3c/wai-tutorials/pull/732) -In [Tables tutorial](https://www.w3.org/WAI/tutorials/tables/) -* Fixing a table header issue in [Tables with Multi-Level Headers](https://www.w3.org/WAI/tutorials/tables/multi-level/#table-with-multiple-column-headers-in-each-column) +In [Tables tutorial](/tutorials/tables/) +* Fixing a table header issue in [Tables with Multi-Level Headers](/tutorials/tables/multi-level/#table-with-multiple-column-headers-in-each-column) * [GitHub PR #726](https://github.com/w3c/wai-tutorials/pull/726) +Added notes about responsive design/smaller screen considerations to: +* [Page Structure > Page Regions](/tutorials/page-structure/regions/) +* [Menus > Structure](/tutorials/menus/structure/) +* [Forms > Labeling Controls](/tutorials/forms/labels/) +* [Carousels > Styling](/tutorials/carousels/styling/) + ## February 2023 * In Tables main page, corrected WCAG links under [Related WCAG resources](https://www.w3.org/WAI/tutorials/tables/#related) diff --git a/content/forms/labels.md b/content/forms/labels.md index 33f704e3..c840e689 100755 --- a/content/forms/labels.md +++ b/content/forms/labels.md @@ -38,7 +38,7 @@ wcag_techniques: - ARIA16 metafooter: true -last_updated: 2024-04-10 +last_updated: 2024-05-13 editors: - Eric Eggert: "https://www.w3.org/People/yatil/" - Shadi Abou-Zahra: "https://www.w3.org/People/shadi/" @@ -305,3 +305,10 @@ If the image button (``) is used, the label is set in the `a In left-to-right languages, it is customary to visually position labels to the right of radio buttons and checkboxes, and to the left or directly above other form fields. Maintaining this practice increases predictability and understandability of your form for all users. In general, placing labels above the form fields helps reduce horizontal scrolling for people with low vision and mobile device users. However, the usefulness of this approach depends on other design aspects, such as the proximity of other nearby form fields and content, and needs to be assessed individually. The aim should be to maintain a close and distinct visual relationship between the label and the form control. + + +## Form field controls for mobile +When HTML5 form fields are used, a virtual keyboard appears making it easier to input data. +For example, a `number` field shows a numeric keyboard, a `date` field a native date picker. + +Sometime designers propose not including visual field labels. However, most users prefer or even need visible labels to understand the form. \ No newline at end of file diff --git a/content/menus/structure.md b/content/menus/structure.md index 961bf69b..6a4cb13d 100644 --- a/content/menus/structure.md +++ b/content/menus/structure.md @@ -23,7 +23,7 @@ wcag_techniques: - ARIA11 metafooter: true -last_updated: 2017-04-13 +last_updated: 2024-05-13 editors: - Eric Eggert: "https://www.w3.org/People/yatil/" - Shadi Abou-Zahra: "https://www.w3.org/People/shadi/" @@ -191,3 +191,6 @@ In the following example the link in the navigation points to the main content o {::nomarkdown} {% include box.html type="end" %} {:/} + +## Responsive design +Menu structure should be consistent across screen sizes. Some menu items may be collapsed or even hidden in sub navigation menus, but items that show should appear in the same order and with the same wording and destination. diff --git a/content/page-structure/regions.md b/content/page-structure/regions.md index 776c1b7e..21a92382 100755 --- a/content/page-structure/regions.md +++ b/content/page-structure/regions.md @@ -29,7 +29,7 @@ wcag_techniques: - ARIA11 metafooter: true -last_updated: 2022-02-08 +last_updated: 2024-05-13 editors: - Eric Eggert: "https://www.w3.org/People/yatil/" - Shadi Abou-Zahra: "https://www.w3.org/People/shadi/" @@ -183,9 +183,12 @@ The [Menus tutorial](/tutorials/menus/) provides more details on creating menus. {% include box.html type="end" %} {:/} +## Responsive design +Components may be collapsed or even hidden on smaller screens, but components that show should appear in the same order for a particular view (set size and orientation). If possible, page structure should be consistent across different screen sizes and orientations, though not a specific WCAG requirement. + {% include ednote.html note="Remove or drastically simplify the next two sections." status="proposed" %} -## Page Regions in HTML5 Using WAI-ARIA +## Page regions in HTML5 using WAI-ARIA {:#accessupport} Most current web browsers support the above HTML5 elements and convey the information to assistive technology through the accessibility APIs. However, to maximize compatibility with web browsers and assistive technologies that support WAI-ARIA but do not yet support HTML5, it is currently advisable to use both the HTML5 elements and the corresponding WAI-ARIA roles. @@ -212,7 +215,7 @@ Explore other WAI-ARIA resources: * [WAI-ARIA Overview](https://www.w3.org/WAI/intro/aria) * [Notes on Using ARIA in HTML](https://www.w3.org/TR/aria-in-html/) -## Page Regions in HTML4 Using WAI-ARIA +## Page regions in HTML4 using WAI-ARIA {:#accessupport-html4} If HTML5 cannot be used or if an HTML4 page is retrofitted to improve accessibility, add WAI-ARIA code to `div` elements that function as their HTML5 counterparts, for example: From a5ad9b839dce055b23de487932de91f27a9f25f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20B=C3=A9tin?= Date: Mon, 13 May 2024 13:01:31 +0200 Subject: [PATCH 30/36] Update changelog.md --- content/changelog.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/content/changelog.md b/content/changelog.md index c3e69ccb..c6d1d25e 100644 --- a/content/changelog.md +++ b/content/changelog.md @@ -38,6 +38,9 @@ In [Tables tutorial](/tutorials/tables/) * Fixing a table header issue in [Tables with Multi-Level Headers](/tutorials/tables/multi-level/#table-with-multiple-column-headers-in-each-column) * [GitHub PR #726](https://github.com/w3c/wai-tutorials/pull/726) +In [Images tutorial](/tutorials/images/decision-tree/) +* Updating link text in [An _Alt_ Decision Tree](/tutorials/images/decision-tree/) + Added notes about responsive design/smaller screen considerations to: * [Page Structure > Page Regions](/tutorials/page-structure/regions/) * [Menus > Structure](/tutorials/menus/structure/) From 0c882a6578fa4252c1775a30633e4f1095928f0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20B=C3=A9tin?= Date: Mon, 13 May 2024 13:02:44 +0200 Subject: [PATCH 31/36] Update changelog.md --- content/changelog.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/changelog.md b/content/changelog.md index c6d1d25e..5873a001 100644 --- a/content/changelog.md +++ b/content/changelog.md @@ -40,6 +40,7 @@ In [Tables tutorial](/tutorials/tables/) In [Images tutorial](/tutorials/images/decision-tree/) * Updating link text in [An _Alt_ Decision Tree](/tutorials/images/decision-tree/) + * [GitHub PR #774](https://github.com/w3c/wai-tutorials/pull/774) Added notes about responsive design/smaller screen considerations to: * [Page Structure > Page Regions](/tutorials/page-structure/regions/) From 493a226f6314a6185fd299fec54aff547751569a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20B=C3=A9tin?= Date: Mon, 13 May 2024 13:03:12 +0200 Subject: [PATCH 32/36] Update changelog.md --- content/changelog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/changelog.md b/content/changelog.md index 5873a001..de2375e3 100644 --- a/content/changelog.md +++ b/content/changelog.md @@ -38,7 +38,7 @@ In [Tables tutorial](/tutorials/tables/) * Fixing a table header issue in [Tables with Multi-Level Headers](/tutorials/tables/multi-level/#table-with-multiple-column-headers-in-each-column) * [GitHub PR #726](https://github.com/w3c/wai-tutorials/pull/726) -In [Images tutorial](/tutorials/images/decision-tree/) +In [Images tutorial](/tutorials/images/) * Updating link text in [An _Alt_ Decision Tree](/tutorials/images/decision-tree/) * [GitHub PR #774](https://github.com/w3c/wai-tutorials/pull/774) From 2acf207b13eb39128b9437d6a96f3fc5897dfb79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20B=C3=A9tin?= Date: Mon, 13 May 2024 13:04:40 +0200 Subject: [PATCH 33/36] Fix typo in Alt Decision Tree title in Changelog --- content/changelog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/changelog.md b/content/changelog.md index de2375e3..4cfeb61d 100644 --- a/content/changelog.md +++ b/content/changelog.md @@ -39,7 +39,7 @@ In [Tables tutorial](/tutorials/tables/) * [GitHub PR #726](https://github.com/w3c/wai-tutorials/pull/726) In [Images tutorial](/tutorials/images/) -* Updating link text in [An _Alt_ Decision Tree](/tutorials/images/decision-tree/) +* Updating link text in [An alt Decision Tree](/tutorials/images/decision-tree/) * [GitHub PR #774](https://github.com/w3c/wai-tutorials/pull/774) Added notes about responsive design/smaller screen considerations to: From fa5f3ebd3e51b49f356cd715f6352e1d7724da88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20B=C3=A9tin?= Date: Mon, 13 May 2024 13:07:48 +0200 Subject: [PATCH 34/36] Update last_updated date in Alt Decision Tree --- content/images/decision-tree.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/images/decision-tree.md b/content/images/decision-tree.md index 4e30792d..ccdcbd5a 100644 --- a/content/images/decision-tree.md +++ b/content/images/decision-tree.md @@ -5,7 +5,7 @@ title: "An alt Decision Tree" title_html: "An alt Decision Tree" lang: en # Change "en" to the translated-language shortcode -last_updated: 2024-01-15 # Put the date of this translation YYYY-MM-DD (with month in the middle) +last_updated: 2024-05-13 # Put the date of this translation YYYY-MM-DD (with month in the middle) # translators: # remove from the beginning of this line and the lines below: "# " (the hash sign and the space) # - name: "Translator Name Here" # Add one -name: line for every translator @@ -88,4 +88,4 @@ This decision tree describes how to use the `alt` attribute of the `` eleme - 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} \ No newline at end of file +{:.decision-tree} From 50ab432d32fa0df29c4d9937568033f89524d13b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20B=C3=A9tin?= Date: Mon, 13 May 2024 13:11:13 +0200 Subject: [PATCH 35/36] Update last_updated date in tips.md --- content/tables/tips.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/tables/tips.md b/content/tables/tips.md index 29721df9..b0fefebd 100755 --- a/content/tables/tips.md +++ b/content/tables/tips.md @@ -17,7 +17,7 @@ navigation: previous: /tutorials/tables/caption-summary/ metafooter: true -last_updated: 2023-11-08 +last_updated: 2024-05-13 editors: - Eric Eggert: "https://www.w3.org/People/yatil/" - Shadi Abou-Zahra: "https://www.w3.org/People/shadi/" From 6070d21ba4adcfa8a150e4fcb67abafd4cc1f3a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20B=C3=A9tin?= Date: Mon, 13 May 2024 13:11:54 +0200 Subject: [PATCH 36/36] Update last_updated date in instructions.md --- content/forms/instructions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/forms/instructions.md b/content/forms/instructions.md index fbd3a144..b0879ae3 100755 --- a/content/forms/instructions.md +++ b/content/forms/instructions.md @@ -35,7 +35,7 @@ wcag_techniques: - ARIA9 metafooter: true -last_updated: 2024-04-10 +last_updated: 2024-05-13 editors: - Eric Eggert: "https://www.w3.org/People/yatil/" - Shadi Abou-Zahra: "https://www.w3.org/People/shadi/"