diff --git a/files/en-us/learn/accessibility/css_and_javascript/index.md b/files/en-us/learn/accessibility/css_and_javascript/index.md index 592977ed2b7e28f..6b4a63820deb527 100644 --- a/files/en-us/learn/accessibility/css_and_javascript/index.md +++ b/files/en-us/learn/accessibility/css_and_javascript/index.md @@ -117,7 +117,7 @@ You will however rarely need to style emphasis elements in any significant way. An element that allows an abbreviation, acronym, or initialization to be associated with its expansion: ```html -

Web content is marked up using HTML.

+

Web content is marked up using Hypertext Markup Language, or HTML.

``` Again, you might want to style it in some simple way: diff --git a/files/en-us/learn/forms/form_validation/index.md b/files/en-us/learn/forms/form_validation/index.md index aa638904ab9596f..04c8d0a56c24bd5 100644 --- a/files/en-us/learn/forms/form_validation/index.md +++ b/files/en-us/learn/forms/form_validation/index.md @@ -315,7 +315,7 @@ First, some HTML:

- Do you have a driver's license?* + Do you have a driver's license?* @@ -334,7 +334,7 @@ First, some HTML: pattern="\d+">

- + diff --git a/files/en-us/learn/forms/how_to_structure_a_web_form/example/index.md b/files/en-us/learn/forms/how_to_structure_a_web_form/example/index.md index ddf40932695e156..76862201dfee09a 100644 --- a/files/en-us/learn/forms/how_to_structure_a_web_form/example/index.md +++ b/files/en-us/learn/forms/how_to_structure_a_web_form/example/index.md @@ -19,7 +19,7 @@ This the example for a basic payment form for the article [How to structure an H ```html

Payment form

-

Required fields are followed by *.

+

Required fields are followed by *.

Contact information

@@ -48,21 +48,21 @@ This the example for a basic payment form for the article [How to structure an H

@@ -82,14 +82,14 @@ This the example for a basic payment form for the article [How to structure an H

diff --git a/files/en-us/learn/forms/how_to_structure_a_web_form/index.md b/files/en-us/learn/forms/how_to_structure_a_web_form/index.md index 924b163fd26e0b7..b5f162ea1ee162a 100644 --- a/files/en-us/learn/forms/how_to_structure_a_web_form/index.md +++ b/files/en-us/learn/forms/how_to_structure_a_web_form/index.md @@ -137,13 +137,13 @@ Strictly speaking, you can put multiple labels on a single widget, but this is n Let's consider this example: ```html -

Required fields are followed by *.

+

Required fields are followed by *.

@@ -151,13 +151,13 @@ Let's consider this example:
- +
``` @@ -209,7 +209,7 @@ Let's put these ideas into practice and build a slightly more involved form — ```html

Payment form

-

Required fields are followed by *.

+

Required fields are followed by *.

``` 5. Next we'll add a larger section of code into the form, below our previous entry. Here you'll see that we are wrapping the contact information fields inside a distinct {{htmlelement("section")}} element. Moreover, we have a set of three radio buttons, each of which we are putting inside its own list ({{htmlelement("li")}}) element. We also have two standard text {{htmlelement("input")}}s and their associated {{htmlelement("label")}} elements, each contained inside a {{htmlelement("p")}}, and a password input for entering a password. Add this code to your form: @@ -243,21 +243,21 @@ Let's put these ideas into practice and build a slightly more involved form —

@@ -289,14 +289,14 @@ Let's put these ideas into practice and build a slightly more involved form —

diff --git a/files/en-us/learn/html/introduction_to_html/advanced_text_formatting/index.md b/files/en-us/learn/html/introduction_to_html/advanced_text_formatting/index.md index 2eac7321ac4b981..d812fea83fb55ed 100644 --- a/files/en-us/learn/html/introduction_to_html/advanced_text_formatting/index.md +++ b/files/en-us/learn/html/introduction_to_html/advanced_text_formatting/index.md @@ -431,19 +431,21 @@ textarea.onkeyup = function(){ ## Abbreviations -Another fairly common element you'll meet when looking around the Web is {{htmlelement("abbr")}} — this is used to wrap around an abbreviation or acronym, and provide a full expansion of the term (included inside a {{htmlattrxref("title")}} attribute.) +Another fairly common element you'll meet when looking around the Web is {{htmlelement("abbr")}} — this is used to wrap around an abbreviation or acronym. When including either, provide a full expansion of the term in plain text on first use, along with the `` to mark up the abbreviation. This provides a hint to user agents on how to announce/display the content while informing all users what the abbreviation means. + +If providing the expansion in addition to the abbreviation makes little sense, and the abbreviation or acronym is a fairly shortened term, provide the full expansion of the term as the value of {{htmlattrxref("title")}} attribute: ### Abbreviation example Let's look at an example. ```html -

We use HTML to structure our web documents.

+

We use HTML, Hypertext Markup Language, to structure our web documents.

I think Rev. Green did it in the kitchen with the chainsaw.

``` -These will come out looking something like this (the expansion will appear in a tooltip when the term is hovered over): +These will come out looking something like this: {{EmbedLiveSample('Abbreviation_example', '100%', '150')}} @@ -463,7 +465,7 @@ For this simple active learning assignment, we'd like you to mark up an abbrevia

Press Esc to move focus away from the code area (Tab inserts a tab character).

@@ -525,7 +527,7 @@ solution.addEventListener('click', function() { updateCode(); }); -const htmlSolution = '

NASA sure does some exciting work.

'; +const htmlSolution = '

NASA, the National Aeronautics and Space Administration, sure does some exciting work.

'; let solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); diff --git a/files/en-us/web/accessibility/aria/attributes/index.md b/files/en-us/web/accessibility/aria/attributes/index.md index 826c25e72bf8bb5..48edf299d4ab2ff 100644 --- a/files/en-us/web/accessibility/aria/attributes/index.md +++ b/files/en-us/web/accessibility/aria/attributes/index.md @@ -10,9 +10,9 @@ tags: - States - Properties --- -This page lists reference pages covering all the WAI-ARIA attributes discussed on MDN. +This page lists reference pages covering all the WAI-ARIA attributes discussed on MDN. -ARIA attributes enable modifying an element's states and properties as defined in the accessibility tree. +ARIA attributes enable modifying an element's states and properties as defined in the accessibility tree. > **Note:** ARIA only modifies the accessibility tree, modifying how assistive technology presents the content to your users. ARIA doesn't change anything about an element's function or behavior. When not using semantic HTML elements for their intended purpose and default functionality, you must use JavaScript to manage behavior, focus, and ARIA states. @@ -112,7 +112,7 @@ By "specifically disallowed," all the above attributes are global except for the ## States and properties defined on MDN -The following are the reference pages covering the WAI-ARIA states and properties discussed on MDN. +The following are the reference pages covering the WAI-ARIA states and properties discussed on MDN. {{SubpagesWithSummaries}} @@ -122,7 +122,7 @@ The following are the reference pages covering the WAI-ARIA states and propertie