From d06db91e2ac39f3fe9ee41447350b3940182ae9e Mon Sep 17 00:00:00 2001 From: Chauncey McAskill <chauncey@mcaskill.ca> Date: Tue, 23 Jul 2024 11:48:18 -0400 Subject: [PATCH 1/4] Rename accessibility section in HTML input element page --- files/en-us/web/html/element/input/index.md | 2 +- files/en-us/web/html/element/input/text/index.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/html/element/input/index.md b/files/en-us/web/html/element/input/index.md index 366422b8158c2cf..e4bcf5e2aa68e60 100644 --- a/files/en-us/web/html/element/input/index.md +++ b/files/en-us/web/html/element/input/index.md @@ -1408,7 +1408,7 @@ Firefox uses the following heuristics to determine the locale to validate the us </tbody> </table> -## Accessibility concerns +## Accessibility ### Labels diff --git a/files/en-us/web/html/element/input/text/index.md b/files/en-us/web/html/element/input/text/index.md index 6499feb9e19fd3e..f9b61e364d92bfb 100644 --- a/files/en-us/web/html/element/input/text/index.md +++ b/files/en-us/web/html/element/input/text/index.md @@ -59,7 +59,7 @@ The `placeholder` attribute is a string that provides a brief hint to the user a If the control's content has one directionality ({{Glossary("LTR")}} or {{Glossary("RTL")}}) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see [How to use Unicode controls for bidi text](https://www.w3.org/International/questions/qa-bidi-unicode-controls) for more information. > [!NOTE] -> Avoid using the `placeholder` attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See [`<input>` accessibility concerns](/en-US/docs/Web/HTML/Element/input#accessibility_concerns) for more information. +> Avoid using the `placeholder` attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See [`<input>` accessibility concerns](/en-US/docs/Web/HTML/Element/input#accessibility) for more information. ### `readonly` From 9fcc93fc353afd421d29779e35261db235a41f8c Mon Sep 17 00:00:00 2001 From: Chauncey McAskill <chauncey@mcaskill.ca> Date: Sat, 31 Aug 2024 13:25:04 -0400 Subject: [PATCH 2/4] Move and rename accessibility section for HTML root element page --- files/en-us/web/html/element/html/index.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/files/en-us/web/html/element/html/index.md b/files/en-us/web/html/element/html/index.md index f84dc8b8af150ca..41a7f8c13a6c320 100644 --- a/files/en-us/web/html/element/html/index.md +++ b/files/en-us/web/html/element/html/index.md @@ -18,6 +18,15 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib - `xmlns` - : Specifies the {{glossary("XML")}} {{glossary("Namespace")}} of the document. Default value is `"http://www.w3.org/1999/xhtml"`. This is required in documents parsed with XML {{glossary("parser", "parsers")}}, and optional in text/html documents. +## Accessibility + +While HTML does not require authors to specify `<html>` element start and ending tags, it is important for authors to do so as it will allow them to specify the [`lang`](/en-US/docs/Web/HTML/Global_attributes#lang) for the webpage. Providing a `lang` attribute with a valid language tag according to {{RFC(5646, "Tags for Identifying Languages (also known as BCP 47)")}} on the `<html>` element will help screen reading technology determine the proper language to announce. The identifying language tag should describe the language used by the majority of the content of the page. Without it, screen readers will typically default to the operating system's set language, which may cause mispronunciations. + +Including a valid `lang` declaration on the `<html>` element also ensures that important metadata contained in the page's {{HTMLElement("head")}}, such as the page's {{HTMLElement("title")}}, are also announced properly. + +- [MDN Understanding WCAG, Guideline 3.1 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.1_%e2%80%94_readable_make_text_content_readable_and_understandable) +- [Understanding Success Criterion 3.1.1 | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/language-of-page.html) + ## Example ```html @@ -32,15 +41,6 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib </html> ``` -## Accessibility concerns - -While HTML does not require authors to specify `<html>` element start and ending tags, it is important for authors to do so as it will allow them to specify the [`lang`](/en-US/docs/Web/HTML/Global_attributes#lang) for the webpage. Providing a `lang` attribute with a valid language tag according to {{RFC(5646, "Tags for Identifying Languages (also known as BCP 47)")}} on the `<html>` element will help screen reading technology determine the proper language to announce. The identifying language tag should describe the language used by the majority of the content of the page. Without it, screen readers will typically default to the operating system's set language, which may cause mispronunciations. - -Including a valid `lang` declaration on the `<html>` element also ensures that important metadata contained in the page's {{HTMLElement("head")}}, such as the page's {{HTMLElement("title")}}, are also announced properly. - -- [MDN Understanding WCAG, Guideline 3.1 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.1_%e2%80%94_readable_make_text_content_readable_and_understandable) -- [Understanding Success Criterion 3.1.1 | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/language-of-page.html) - ## Technical summary <table class="properties"> From 69fc87ce15525150858cbf5ddf6aa8ce1fffc9cf Mon Sep 17 00:00:00 2001 From: Chauncey McAskill <chauncey@mcaskill.ca> Date: Sat, 31 Aug 2024 13:37:43 -0400 Subject: [PATCH 3/4] Fix embed under accessibility section in HTML abbr element page In order to match the section heading. Previously only worked because the macro is located within the same section as the sample code. --- files/en-us/web/html/element/abbr/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/html/element/abbr/index.md b/files/en-us/web/html/element/abbr/index.md index ad85571a54d3da2..cc2cccf6a0ea9ff 100644 --- a/files/en-us/web/html/element/abbr/index.md +++ b/files/en-us/web/html/element/abbr/index.md @@ -55,7 +55,7 @@ Only include a `title` if expanding the abbreviation or acronym in the text is n </p> ``` -{{EmbedLiveSample("Accessibility_concerns")}} +{{EmbedLiveSample("Accessibility")}} This is especially helpful for people who are unfamiliar with the terminology or concepts discussed in the content, people who are new to the language, and people with cognitive concerns. From 85848f0321f341764e68d730219aa5b0a7d4130a Mon Sep 17 00:00:00 2001 From: Chauncey McAskill <chauncey@mcaskill.ca> Date: Sat, 31 Aug 2024 13:52:51 -0400 Subject: [PATCH 4/4] Move accessibility section for HTML input element page --- files/en-us/web/html/element/input/index.md | 42 ++++++++++----------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/files/en-us/web/html/element/input/index.md b/files/en-us/web/html/element/input/index.md index e4bcf5e2aa68e60..8b1c897f119dd86 100644 --- a/files/en-us/web/html/element/input/index.md +++ b/files/en-us/web/html/element/input/index.md @@ -1227,6 +1227,27 @@ Firefox uses the following heuristics to determine the locale to validate the us - Try the language specified by any `Content-Language` HTTP header. Or, - If none specified, use the browser's locale. +## Accessibility + +### Labels + +When including inputs, it is an accessibility requirement to add labels alongside. This is needed so those who use assistive technologies can tell what the input is for. Also, clicking or touching a label gives focus to the label's associated form control. This improves the accessibility and usability for sighted users, increases the area a user can click or touch to activate the form control. This is especially useful (and even needed) for radio buttons and checkboxes, which are tiny. For more information about labels in general see [Labels](#labels) . + +The following is an example of how to associate the `<label>` with an `<input>` element in the above style. You need to give the `<input>` an `id` attribute. The `<label>` then needs a `for` attribute whose value is the same as the input's `id`. + +```html +<label for="peas">Do you like peas?</label> +<input type="checkbox" name="peas" id="peas" /> +``` + +### Size + +Interactive elements such as form input should provide an area large enough that it is easy to activate them. This helps a variety of people, including people with motor control issues and people using non-precise forms of input such as a stylus or fingers. A minimum interactive size of 44×44 [CSS pixels](https://www.w3.org/TR/WCAG21/#dfn-css-pixels) is recommended. + +- [Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html) +- [Target Size and 2.5.5 | Adrian Roselli](https://adrianroselli.com/2019/06/target-size-and-2-5-5.html) +- [Quick test: Large touch targets - The A11Y Project](https://www.a11yproject.com/posts/large-touch-targets/) + ## Technical summary <table class="properties"> @@ -1408,27 +1429,6 @@ Firefox uses the following heuristics to determine the locale to validate the us </tbody> </table> -## Accessibility - -### Labels - -When including inputs, it is an accessibility requirement to add labels alongside. This is needed so those who use assistive technologies can tell what the input is for. Also, clicking or touching a label gives focus to the label's associated form control. This improves the accessibility and usability for sighted users, increases the area a user can click or touch to activate the form control. This is especially useful (and even needed) for radio buttons and checkboxes, which are tiny. For more information about labels in general see [Labels](#labels) . - -The following is an example of how to associate the `<label>` with an `<input>` element in the above style. You need to give the `<input>` an `id` attribute. The `<label>` then needs a `for` attribute whose value is the same as the input's `id`. - -```html -<label for="peas">Do you like peas?</label> -<input type="checkbox" name="peas" id="peas" /> -``` - -### Size - -Interactive elements such as form input should provide an area large enough that it is easy to activate them. This helps a variety of people, including people with motor control issues and people using non-precise forms of input such as a stylus or fingers. A minimum interactive size of 44×44 [CSS pixels](https://www.w3.org/TR/WCAG21/#dfn-css-pixels) is recommended. - -- [Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html) -- [Target Size and 2.5.5 | Adrian Roselli](https://adrianroselli.com/2019/06/target-size-and-2-5-5.html) -- [Quick test: Large touch targets - The A11Y Project](https://www.a11yproject.com/posts/large-touch-targets/) - ## Specifications {{Specifications}}