From 38cdfeff63f67ebea8effa2866d5a18efdf7e62a Mon Sep 17 00:00:00 2001 From: Chauncey McAskill Date: Sat, 31 Aug 2024 13:57:02 -0400 Subject: [PATCH] Move and fix Accessibility sections for HTML element pages (#35658) * Rename accessibility section in HTML input element page * Move and rename accessibility section for HTML root element page * 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. * Move accessibility section for HTML input element page --- files/en-us/web/html/element/abbr/index.md | 2 +- files/en-us/web/html/element/html/index.md | 18 ++++---- files/en-us/web/html/element/input/index.md | 42 +++++++++---------- .../web/html/element/input/text/index.md | 2 +- 4 files changed, 32 insertions(+), 32 deletions(-) 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

``` -{{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. 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 `` 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 `` 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 `` 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 ``` -## Accessibility concerns - -While HTML does not require authors to specify `` 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 `` 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 `` 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 diff --git a/files/en-us/web/html/element/input/index.md b/files/en-us/web/html/element/input/index.md index 366422b8158c2cf..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 `
@@ -1408,27 +1429,6 @@ Firefox uses the following heuristics to determine the locale to validate the us
-## Accessibility concerns - -### 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 `