MINOR: refactor abbr

estelle · estelle · commit b0db71c50b97 · 2022-07-22T12:42:45.000-07:00
diff --git a/html/forms/form-validation/full-example.html b/html/forms/form-validation/full-example.html
@@ -38,7 +38,7 @@
   <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?<spanaria-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 -->
@@ -57,7 +57,7 @@
              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">
diff --git a/html/forms/html-form-structure/payment-form.html b/html/forms/html-form-structure/payment-form.html
@@ -10,7 +10,7 @@
 <body>
     <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 aia-label="required">*</span></strong>.</p>
         <section>
             <h2>Contact information</h2>
             <fieldset>
@@ -39,21 +39,21 @@ <h2>Contact information</h2>
             <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>
@@ -73,14 +73,14 @@ <h2>Payment information</h2>
             <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" name="expiration" required="true" placeholder="MM/YY" pattern="^(0[1-9]|1[0-2])\/([0-9]{2})$">
             </p>
diff --git a/html/forms/html-form-structure/required-labels.html b/html/forms/html-form-structure/required-labels.html
@@ -8,27 +8,27 @@
 
 <body>
     <form>
-        <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 type="text" name="username">
-          <label for="username"><abbr title="required">*</abbr></label>
+          <label for="username"><span aria-label="required">*</span></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">*</abbr>
+            <span aria-label="required">*</span>
           </label>
         </div>-->
 
         <!-- But this is probably best: -->
         <div>
-          <label for="username">Name: <abbr title="required">*</abbr></label>
+          <label for="username">Name: <span aria-label="required">*</span></label>
           <input id="username" type="text" name="username">
         </div>
     </form>
diff --git a/html/introduction-to-html/advanced-text-formatting/other-semantics.html b/html/introduction-to-html/advanced-text-formatting/other-semantics.html
@@ -5,9 +5,9 @@
     <title>Other semantics examples</title>
   </head>
   <body>
-    <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>
+    <p>I think <abbr>Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>
 
     <address>
       <p>Chris Mills, Manchester, The Grim North, UK</p>
diff --git a/html/introduction-to-html/marking-up-a-letter-finished/index.html b/html/introduction-to-html/marking-up-a-letter-finished/index.html
@@ -55,7 +55,7 @@ <h1>Re: Eileen Dover university application</h1>
 
     <p>Dear Eileen,</p>
 
-    <p>Thank you for your recent application to join us at the University of Awesome's science faculty to study as part of your <abbr title="Doctor of Philosophy">PhD</abbr> next year. I will answer your questions one by one, in the following sections.</p>
+    <p>Thank you for your recent application to join us at the University of Awesome's science faculty to study as part of your <abbr>PhD</abbr> (Doctor of Philosophy) next year. I will answer your questions one by one, in the following sections.</p>
 
     <h2>Starting dates</h2>
 
@@ -78,7 +78,7 @@ <h2>Subjects of study</h2>
     <ol>
       <li>Turning H<sub>2</sub>O into wine, and the health benefits of Resveratrol (C<sub>14</sub>H<sub>12</sub>O<sub>3</sub>.)</li>
       <li>Measuring the effect on performance of funk bassplayers at temperatures exceeding 30°C (86°F), when the audience size exponentially increases (effect of 3 × 10<sup>3</sup> increasing to 3 × 10<sup>4</sup>.)</li>
-      <li><abbr title="HyperText Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr> constructs for representing musical scores.</li>
+      <li><abbr>HTML</abbr>, Hypertext Markup Language, and <abbr>CSS</abbr>, Cascading Style Sheets, constructs for representing musical scores.</li>
     </ol>
 
     <p>So please can you provide more information on each of these subjects, including how long you'd expect the research to take, required staff and other resources, and anything else you think we'd need to know? Thanks.</p>
@@ -89,20 +89,20 @@ <h2>Exotic dance moves</h2>
 
     <dl>
       <dt>Polynesian chicken dance</dt>
-      <dd>A little known but <em>very</em> influential dance dating back as far as 300<abbr title="Before Christ">BC</abbr>, a whole village would dance around in a circle like chickens, to encourage their livestock to be "fruitful".</dd>
+      <dd>A little known but <em>very</em> influential dance dating back as far as 300 <abbr>BC</abbr>, a whole village would dance around in a circle like chickens, to encourage their livestock to be "fruitful".</dd>
       <dt>Icelandic brownian shuffle</dt>
       <dd>Before the Icelanders developed fire as a means of getting warm, they used to practice this dance, which involved huddling close together in a circle on the floor, and shuffling their bodies around in imperceptibly tiny, very rapid movements. One of my fellow students used to say that he thought this dance inspired modern styles such as Twerking.</dd>
       <dt>Arctic robot dance</dt>
       <dd>An interesting example of historic misinformation, English explorers in the 1960s believed to have discovered a new dance style characterised by "robotic", stilted movements, being practiced by inhabitants of Northern Alaska and Canada. Later on however it was discovered that they were just moving like this because they were really cold.</dd>
     </dl>
 
-    <p>For more of my research, see my <a href="http://www.example.com" title="Dr Gaye's exotic dance research">exotic dance research page</a>.</p>
+    <p>For more of my research, see my <a href="http://www.example.com" aria-label="Dr Gaye's exotic dance research">exotic dance research page</a>.</p>
 
     <p>Yours sincerely,</p>
 
     <p>Dr Eleanor Gaye</p>
 
 
-    <p>University of Awesome motto: <q>Be awesome to each other.</q> -- <cite>The memoirs of Bill S Preston, <abbr title="Esquire">Esq</abbr></cite></p>
+    <p>University of Awesome motto: <q>Be awesome to each other.</q> -- <cite>The memoirs of Bill S Preston, <abbr>Esq.</abbr></cite></p>
   </body>
 </html>
diff --git a/html/introduction-to-html/tasks/advanced-text/marking.md b/html/introduction-to-html/tasks/advanced-text/marking.md
@@ -30,9 +30,9 @@ The finished code should look like this:
 
 <p>Let's start with a quote:</p>
 
-<blockquote cite="https://developer.mozilla.org/en-US/docs/Learn/Accessibility"><p>By default, <abbr title="Hypertext Markup Language">HTML</abbr> is accessible, if used correctly.</p></blockquote>
+<blockquote cite="https://developer.mozilla.org/en-US/docs/Learn/Accessibility"><p><abbr>HTML</abbr>, Hypertext Markup Language is by default accessible, if used correctly.</p></blockquote>
 
-<p><abbr title="Cascading Style Sheets">CSS</abbr> can also be used to make web pages more, or less, accessible.</p>
+<p><abbr>CSS</abbr>, Cascading Style Sheets, can also be used to make web pages more, or less, accessible.</p>
 
 <p>Chemical Formulae: H<sub>2</sub>O (Water), C<sub>2</sub>H<sub>6</sub>O (Ethanol).</p>
 
