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 `