ABBR: remove title

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
-<p>Web content is marked up using <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
+<p>Web content is marked up using Hypertext Markup Language, or <abbr>HTML</abbr>.</p>
 ```
 
 Again, you might want to style it in some simple way:

files/en-us/learn/forms/form_validation/index.md

@@ -315,7 +315,7 @@ First, some HTML:
 <form>
   <p>
     <fieldset>
-      <legend>Do you have a driver's license?<abbr title="This field is mandatory" aria-label="required">*</abbr></legend>
+      <legend>Do you have a driver's license?<span aria-label="required">*</span></legend>
       <!-- While only one radio button in a same-named group can be selected at a time,
            and therefore only one radio button in a same-named group having the "required"
            attribute suffices in making a selection a requirement -->
@@ -334,7 +334,7 @@ First, some HTML:
            pattern="\d+">
   </p>
   <p>
-    <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory" aria-label="required">*</abbr></label>
+    <label for="t1">What's your favorite fruit?<span aria-label="required">*</span></label>
     <input type="text" id="t1" name="fruit" list="l1" required
            pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
     <datalist id="l1">

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
 <form method="post">
   <h1>Payment form</h1>
-  <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
+  <p>Required fields are followed by <strong><span aria-label="required">*</span></strong>.</p>
   <section>
     <h2>Contact information</h2>
     <fieldset>
@@ -48,21 +48,21 @@ This the example for a basic payment form for the article [How to structure an H
     <p>
       <label for="name">
         <span>Name: </span>
-        <strong><abbr title="required">*</abbr></strong>
+        <strong><span aria-label="required">*</span></strong>
       </label>
       <input type="text" id="name" name="username">
     </p>
     <p>
       <label for="mail">
         <span>E-mail: </span>
-        <strong><abbr title="required">*</abbr></strong>
+        <strong><span aria-label="required">*</span></strong>
       </label>
       <input type="email" id="mail" name="usermail">
     </p>
     <p>
       <label for="pwd">
         <span>Password: </span>
-        <strong><abbr title="required">*</abbr></strong>
+        <strong><span aria-label="required">*</span></strong>
       </label>
       <input type="password" id="pwd" name="password">
     </p>
@@ -82,14 +82,14 @@ This the example for a basic payment form for the article [How to structure an H
     <p>
       <label for="number">
         <span>Card number:</span>
-        <strong><abbr title="required">*</abbr></strong>
+        <strong><span aria-label="required">*</span></strong>
       </label>
       <input type="tel" id="number" name="cardnumber">
     </p>
     <p>
       <label for="expiration">
         <span>Expiration date:</span>
-        <strong><abbr title="required">*</abbr></strong>
+        <strong><span aria-label="required">*</span></strong>
       </label>
       <input type="text" id="expiration" required="true" placeholder="MM/YY" pattern="^(0[1-9]|1[0-2])\/([0-9]{2})$">
     </p>

files/en-us/learn/forms/how_to_structure_a_web_form/index.md

@@ -137,27 +137,27 @@ Strictly speaking, you can put multiple labels on a single widget, but this is n
 Let's consider this example:
 
 ```html
-<p>Required fields are followed by <abbr title="required">*</abbr>.</p>
+<p>Required fields are followed by <span aria-label="required">*</span>.</p>
 
 <!-- So this: -->
 <!--div>
   <label for="username">Name:</label>
   <input id="username" type="text" name="username">
-  <label for="username"><abbr title="required" aria-label="required">*</abbr></label>
+  <label for="username"><span aria-label="required">*</abbr></label>
 </div-->
 
 <!-- would be better done like this: -->
 <!--div>
   <label for="username">
     <span>Name:</span>
     <input id="username" type="text" name="username">
-    <abbr title="required" aria-label="required">*</abbr>
+    <span aria-label="required">*</span>
   </label>
 </div-->
 
 <!-- But this is probably best: -->
 <div>
-  <label for="username">Name: <abbr title="required" aria-label="required">*</abbr></label>
+  <label for="username">Name: <span aria-label="required">*</span></label>
   <input id="username" type="text" name="username">
 </div>
 ```
@@ -209,7 +209,7 @@ Let's put these ideas into practice and build a slightly more involved form —
 
     ```html
     <h1>Payment form</h1>
-    <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
+    <p>Required fields are followed by <strong><span aria-label="required">*</span></strong>.</p>
     ```
 
 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 —
         <p>
           <label for="name">
             <span>Name: </span>
-            <strong><abbr title="required">*</abbr></strong>
+            <strong><span aria-label="required">*</span></strong>
           </label>
           <input type="text" id="name" name="username">
         </p>
         <p>
           <label for="mail">
             <span>E-mail: </span>
-            <strong><abbr title="required">*</abbr></strong>
+            <strong><span aria-label="required">*</span></strong>
           </label>
           <input type="email" id="mail" name="usermail">
         </p>
         <p>
           <label for="pwd">
             <span>Password: </span>
-            <strong><abbr title="required">*</abbr></strong>
+            <strong><span aria-label="required">*</span></strong>
           </label>
           <input type="password" id="pwd" name="password">
         </p>
@@ -289,14 +289,14 @@ Let's put these ideas into practice and build a slightly more involved form —
        <p>
          <label for="number">
            <span>Card number:</span>
-           <strong><abbr title="required">*</abbr></strong>
+           <strong><span aria-label="required">*</span></strong>
          </label>
          <input type="tel" id="number" name="cardnumber">
        </p>
        <p>
          <label for="expiration">
            <span>Expiration date:</span>
-           <strong><abbr title="required">*</abbr></strong>
+           <strong><span aria-label="required">*</span></strong>
          </label>
          <input type="text" id="expiration" required="true" placeholder="MM/YY" pattern="^(0[1-9]|1[0-2])\/([0-9]{2})$">
        </p>

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 `<abbr>` 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
-<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>
+<p>We use <abbr>HTML</abbr>, Hypertext Markup Language, to structure our web documents.</p>
 
 <p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>
 ```
 
-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
 <p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
 
 <textarea id="code" class="input" style="min-height: 50px; width: 95%">
-<p>NASA sure does some exciting work.</p>
+<p>NASA, the National Aeronautics and Space Administration, sure does some exciting work.</p>
 </textarea>
 
 <div class="playable-buttons">
@@ -525,7 +527,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-const htmlSolution = '<p><abbr title="National Aeronautics and Space Administration">NASA</abbr> sure does some exciting work.</p>';
+const htmlSolution = '<p><abbr>NASA</abbr>, the National Aeronautics and Space Administration, sure does some exciting work.</p>';
 let solutionEntry = htmlSolution;
 
 textarea.addEventListener('input', updateCode);

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 <abbr>WAI-ARIA</abbr> attributes discussed on MDN.
 
-ARIA attributes enable modifying an element's states and properties as defined in the accessibility tree.
+<abbr>ARIA</abbr> 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 <abbr title="Mozilla Developer Network">MDN</abbr>.
+The following are the reference pages covering the <abbr>WAI-ARIA</abbr> states and properties discussed on <abbr>MDN</abbr>.
 
 {{SubpagesWithSummaries}}
 
@@ -122,7 +122,7 @@ The following are the reference pages covering the WAI-ARIA states and propertie
 
 <section id="Quick_links">
 
-1. [**WAI-ARIA attributes**](/en-US/docs/Web/Accessibility/ARIA/Attributes)
+1. [**<abbr>WAI-ARIA</abbr> attributes**](/en-US/docs/Web/Accessibility/ARIA/Attributes)
 
     {{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Attributes")}}
 

files/en-us/web/accessibility/aria/roles/index.md

@@ -8,7 +8,7 @@ tags:
   - Reference
   - Roles
 ---
-ARIA roles provide semantic meaning to content, allowing screen readers and other tools to present and support interaction with object in a way that is consistent with user expectations of that type of object. ARIA roles can be used to describe elements that don't natively exist in HTML or exist but don't yet have full browser support.
+ARIA roles provide semantic meaning to content, allowing screen readers and other tools to present and support interaction with object in a way that is consistent with user expectations of that type of object. <abbr>ARIA</abbr> roles can be used to describe elements that don't natively exist in HTML or exist but don't yet have full browser support.
 
 By default, many semantic elements in HTML have a role; for example, `<input type="radio">` has the "radio" role. Non-semantic elements in HTML do not have a role; `<div>` and `<span>` without added semantics return *null*. The `role` attribute can provide semantics.
 
@@ -125,11 +125,11 @@ Avoid using [command](/en-US/docs/Web/Accessibility/ARIA/Roles/command_role), [c
 
 > **Note:** Don't use abstract roles in your sites and applications. They are for use by browsers. They are included for reference only.
 
-> **Warning:** "Abstract roles are used for the ontology. Authors **MUST NOT** use abstract roles in content." - The WAI-ARIA specification
+> **Warning:** "Abstract roles are used for the ontology. Authors **MUST NOT** use abstract roles in content." - The <abbr>WAI-ARIA</abbr> specification
 
 ## Roles defined on MDN
 
-The following are the reference pages covering the WAI-ARIA roles discussed on <abbr title="Mozilla Developer Network">MDN</abbr>.
+The following are the reference pages covering the WAI-ARIA roles discussed on <abbr>MDN</abbr>.
 
 {{SubpagesWithSummaries}}
 

files/en-us/web/accessibility/aria/roles/toolbar_role/index.md

@@ -86,7 +86,7 @@ When the toolbar has focus within it, provide visual cues. When an element withi
 
 ## Examples
 
-[Toolbar example from the <abbr title="world wide web consortium">W3C</abbr>](https://www.w3.org/TR/wai-aria-practices-1.2/examples/toolbar/toolbar.html)
+[Toolbar example from <abbr>W3C</abbr>, the World Wide Web Consortium](https://www.w3.org/TR/wai-aria-practices-1.2/examples/toolbar/toolbar.html)
 
 ## Accessibility Concerns
 

files/en-us/web/accessibility/aria/roles/window_role/index.md

@@ -17,7 +17,7 @@ The `window` role defines a browser or app window.
 
 ## Description
 
-The `window` role, an abstract role, is a superclass for roles defining a browser or app window. The sub-class roles, currently only the [`dialog`](/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role) role, have a window-like <abbr title="graphical user interface">GUI</abbr>, whether it's a full native window or just a section of a document styled to look like a window, where `role="dialog"` would be appropriate.
+The `window` role, an abstract role, is a superclass for roles defining a browser or app window. The sub-class roles, currently only the [`dialog`](/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role) role, have a window-like <abbr>GUI</abbr>, or graphical user interface, whether it's a full native window or just a section of a document styled to look like a window, where `role="dialog"` would be appropriate.
 
 ## Best Practices
 

files/en-us/web/html/element/abbr/index.md

@@ -20,7 +20,11 @@ browser-compat: html.elements.abbr
 
 {{HTMLRef}}
 
-The **`<abbr>`** [HTML](/en-US/docs/Web/HTML) element represents an abbreviation or acronym; the optional {{htmlattrxref("title")}} attribute can provide an expansion or description for the abbreviation. If present, `title` must contain this full description and nothing else.
+The **`<abbr>`** [HTML](/en-US/docs/Web/HTML) element represents an abbreviation or acronym.
+
+When including an abbreviation or acronym, provide a full expansion of the term in plain text on first use, along with the `<abbr>` to mark up the abbreviation. This informs the user what the abbreviation or acronym means. 
+
+The optional {{htmlattrxref("title")}} attribute can provide an expansion for the abbreviation or accronym when a full expansion is not present. This provides a hint to user agents on how to announce/display the content while informing all users what the abbreviation means. If present, `title` must contain this full description and nothing else.
 
 {{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}
 
@@ -94,7 +98,7 @@ Each `<abbr>` element you use is independent from all others; providing a `title
 It's certainly not required that all abbreviations be marked up using `<abbr>`. There are, though, a few cases where it's helpful to do so:
 
 - When an abbreviation is used and you want to provide an expansion or definition outside the flow of the document's content, use `<abbr>` with an appropriate {{htmlattrxref("title")}}.
-- To define an abbreviation which may be unfamiliar to the reader, present the term using `<abbr>` and either a `title` attribute or inline text providing the definition.
+- To define an abbreviation which may be unfamiliar to the reader, present the term using `<abbr>` and inline text providing the definition. Include a `title` attribute only when the inline expansion or definition is not available. 
 - When an abbreviation's presence in the text needs to be semantically noted, the `<abbr>` element is useful. This can be used, in turn, for styling or scripting purposes.
 - You can use `<abbr>` in concert with {{HTMLElement("dfn")}} to establish definitions for terms which are abbreviations or acronyms. See the example [Defining an abbreviation](#defining_an_abbreviation) below.
 
@@ -106,9 +110,8 @@ In languages with {{interwiki("wikipedia", "grammatical number")}} (that is, lan
 
 The purpose of this element is purely for the convenience of the author and all browsers display it inline ({{cssxref('display')}}`: inline`) by default, though its default styling varies from one browser to another:
 
-- Some browsers, like Internet Explorer, do not style it differently than a {{HTMLElement("span")}} element.
-- Opera, Firefox, and some others add a dotted underline to the content of the element.
-- A few browsers not only add a dotted underline, but also put it in small caps; to avoid this styling, adding something like {{cssxref('font-variant')}}`: none` in the CSS takes care of this case.
+
+Some browsers add a dotted underline to the content of the element. Others add a dotted underline while converting the contents to small caps. Others may not style it differently than a {{HTMLElement("span")}} element. To control this styling, use {{cssxref('text-decoration')}} and {{cssxref('font-variant')}}. 
 
 ## Examples
 
@@ -175,7 +178,7 @@ You can use `<abbr>` in tandem with {{HTMLElement("dfn")}} to more formally defi
 of a web page.</p>
 
 <p>A <dfn id="spec">Specification</dfn>
-(<abbr title="Specification">spec</abbr>) is a document that outlines
+(<abbr>spec</abbr>) is a document that outlines
 in detail how a technology or API is intended to function and how it is
 accessed.</p>
 ```
@@ -188,6 +191,8 @@ accessed.</p>
 
 Spelling out the acronym or abbreviation in full the first time it is used on a page is beneficial for helping people understand it, especially if the content is technical or industry jargon.
 
+Only include a `title` if expanding the abbreviation or acronym in the text is not possible.  Having a difference between the announced word or phrase and what is displayed on the screen, especially if it's technical jargon the reader may not be familiar with, can be jarring. 
+
 #### Example
 
 ```html