Demonstrate using the translate attribute

Author: ericwbailey

docs/index.html

@@ -141,10 +141,18 @@ <h3 id="subtitle__content">Content</h3>
         <p>
             Yes, but was it <bdi>possible</bdi> to <bdo>quietly</bdo> sleep <ruby>through</ruby> that <rt>furniture-rattling</rt> noise? <rp>True</rp>, he <span>had not slept</span> peacefully, but <del>probably</del> all the more <ins>deeply</ins> because of that. What should he do now? The next train went at seven; if he were to catch that he would have to rush like mad and the collection of samples was still not packed, and he did not at all feel particularly fresh and lively.
         </p>
-        <h4>Notes:</h4>
         <p>
-            <small><code>&lt;mark&gt;</code>, <code>&lt;ins&gt;</code>, <code>&lt;del&gt;</code>, and <code>&lt;s&gt;</code> elements are not announced by screen readers. Consider <a rel="external noopener" href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">using CSS to indicate their presence</a>.</small>
-            </p>
+            The French phrase, <cite lang="fr" translate="no">C'est le ton qui fait la chanson</cite>, might apply here.
+        </p>
+        <h4>Notes:</h4>
+        <ul>
+            <li>
+                <small><code>&lt;mark&gt;</code>, <code>&lt;ins&gt;</code>, <code>&lt;del&gt;</code>, and <code>&lt;s&gt;</code> elements are not announced by screen readers. Consider <a rel="external noopener" href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">using CSS to indicate their presence</a>.</small>
+            </li>
+            <li>
+                <small>Use the <code>translate</code> attribute to control <a rel="external noopener" href="https://html.spec.whatwg.org/multipage/dom.html#the-translate-attribute">automatic translation by the browser</a>.</small>
+            </li>
+        </ul>
     </div><!-- End of #subsection__content -->
     <div id="subsection__links" aria-labelledby="subtitle__links"><!-- Start of #subsection__links -->
         <h3 id="subtitle__links">Links</h3>

partials/section.text-level.hbs

@@ -17,10 +17,18 @@
         <p>
             Yes, but was it <bdi>possible</bdi> to <bdo>quietly</bdo> sleep <ruby>through</ruby> that <rt>furniture-rattling</rt> noise? <rp>True</rp>, he <span>had not slept</span> peacefully, but <del>probably</del> all the more <ins>deeply</ins> because of that. What should he do now? The next train went at seven; if he were to catch that he would have to rush like mad and the collection of samples was still not packed, and he did not at all feel particularly fresh and lively.
         </p>
-        <h4>Notes:</h4>
         <p>
-            <small><code>&lt;mark&gt;</code>, <code>&lt;ins&gt;</code>, <code>&lt;del&gt;</code>, and <code>&lt;s&gt;</code> elements are not announced by screen readers. Consider <a rel="external noopener" href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">using CSS to indicate their presence</a>.</small>
-            </p>
+            The French phrase, <cite lang="fr" translate="no">C'est le ton qui fait la chanson</cite>, might apply here.
+        </p>
+        <h4>Notes:</h4>
+        <ul>
+            <li>
+                <small><code>&lt;mark&gt;</code>, <code>&lt;ins&gt;</code>, <code>&lt;del&gt;</code>, and <code>&lt;s&gt;</code> elements are not announced by screen readers. Consider <a rel="external noopener" href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">using CSS to indicate their presence</a>.</small>
+            </li>
+            <li>
+                <small>Use the <code>translate</code> attribute to control <a rel="external noopener" href="https://html.spec.whatwg.org/multipage/dom.html#the-translate-attribute">automatic translation by the browser</a>.</small>
+            </li>
+        </ul>
     </div><!-- End of #subsection__content -->
     <div id="subsection__links" aria-labelledby="subtitle__links"><!-- Start of #subsection__links -->
         <h3 id="subtitle__links">Links</h3>