Fixed icon font example.

content/body/img.php

@@ -241,8 +241,9 @@
       <p class="center">Feel free to connect with Killer B Cinema on Social Media!</p>
       <ul class="list-inline">
         <li>
-          <a href="https://www.facebook.com/killerbcinema/" aria-label="The Killer B Cinema Facebook page">
-            <i class="fa fa-facebook fa-2x"></i>
+          <a href="https://www.facebook.com/killerbcinema/" >
+            <i class="fa fa-facebook fa-2x" aria-hidden="true"></i>
+            <span class="sr-only">The Killer B Cinema Facebook page</span>
           </a>
         </li>
         <li>
@@ -263,17 +264,17 @@
   "steps": [{
       "label": "Embed the font using the &lt;i&gt; tag.",
       "highlight": "%OPENCLOSECONTENTTAG%i",
-      "notes": "This is the usual way to embed fonts using Font Awesome.  More information can be read in the article <a href=\"https://www.sitepoint.com/introduction-icon-fonts-font-awesome-icomoon/\">An Introduction to Icon Fonts with Font Awesome and IcoMoon</a>"
+      "notes": "This is the usual way to embed fonts using Font Awesome.  More information can be read in the article <a href=\"https://www.sitepoint.com/introduction-icon-fonts-font-awesome-icomoon/\">An Introduction to Icon Fonts with Font Awesome and IcoMoon</a>."
     },
     {
-      "label": "Code an ARIA-Label if it's interactive and needs context",
-      "highlight": "aria-label",
-      "notes": "As mentioned in on <a href=\"/screen-reader-only-text.php#when-should-i-use-aria-labels-instead---heading\">Enable's screen reader only text page</a>, we should use an aria-label when an accessible label is missing from a control."
+      "label": "Code screen reader text near the icon font",
+      "highlight": "%OPENCLOSECONTENTTAG%span",
+      "notes": "As mentioned in on <a href=\"/screen-reader-only-text.php\">Enable's screen reader only text page</a>, this text will be read out by screen readers, but will be hidden from sighted users.  This acts as the alt text for the first icon font example."
     },
     {
       "label": "Make the decorative icons hidden from screen readers",
       "highlight": "aria-hidden",
-      "notes": "Note that this link already has text inside, so we don't need an aria-label.  We should hide the icon from screen readers, though, in order to prevent the font information from being read."
+      "notes": "Note the <code>aria-hidden=\"true\"</code> ensures the icon will not read out by screen readers.  The second example doesn't need any alt text, since it is decorative due to the supporting text near the icon."
     }
   ]
 }

content/body/screen-reader-only-text.php

@@ -83,6 +83,15 @@ class="enable-example"
   <strong>Be very careful putting ARIA-labels on a <code>div</code> or <code>span</code> tag.</strong>  Sometimes, screen readers like Voiceover will think that those tags with an <code>aria-label</code> imply that the items inside are a group of interactive elements.  Your mileage may vary.
 </p>
 
+<h2>What To Remember When Using Screen Reader Only Text Or Aria-Labels In Production</h2>
+
+<ol>
+  <li>If you are using a content management system (CMS), you should remember that you must make screen reader only text and any aria-labels authorable.  I advise always having a default value for these items in case someone forgets to author them, or better still, make them mandatory for authors to fill out in the CMS (since screen reader only text and aria-labels are sometimes forget by content authors). <strong>This is really important when you have a multilingual website, since hard coding screen reader-only text and aria-labels will result in that text may not be understood by users who don't know the language that hard-coded text is written in</strong>.</li>
+  <li>If you are using a third-party like <a href="https://www.motionpoint.com">MotionPoint</a> to do your translation, you will want to make sure their service logs the translation of screen reader only text, aria-labels and image alt text.</li>
+  <li>You should always use screen-reader only text and aria-labels as a last resort.  If there is any visual text that can be used instead, use <code>aria-labelledby</code> to point to that content instead of using an aria-label.  This is to ensure the screen reader user experience is as close to the visual experience as much as posssible.</li>
+</ol>
+
+
 
 
 <h2>Further Reading</h2>