Rebuild docs

Author: ericwbailey

docs/index.html

@@ -326,23 +326,23 @@ <h4 id="notes-code">Notes:</h4>
   <div id="subsection-symbols" aria-labelledby="subtitle-symbols">
     <h3 id="subtitle-symbols">Symbols</h3>
     <ul>
-      <li><span role="definition" aria-label="Plus">+</span></li>
-      <li><span role="definition" aria-label="Minus">−</span></li>
-      <li><span role="definition" aria-label="Plus or minus">±</span></li>
-      <li><span role="definition" aria-label="Divided by">÷</span></li>
-      <li><span role="definition" aria-label="Multiplied by">×</span></li>
-      <li><span role="definition" aria-label="Less than">&lt;</span></li>
-      <li><span role="definition" aria-label="Less than or equal to">≤</span></li>
-      <li><span role="definition" aria-label="Greater than">&gt;</span></li>
-      <li><span role="definition" aria-label="Greater than or equal to">≥</span></li>
-      <li><span role="definition" aria-label="Equals">=</span></li>
-      <li><span role="definition" aria-label="Approximately equals">≈</span></li>
-      <li><span role="definition" aria-label="Not equals">≠</span></li>
+      <li>+</li>
+      <li>−</li>
+      <li>±</li>
+      <li>÷</li>
+      <li>×</li>
+      <li>&lt;</li>
+      <li>≤</li>
+      <li>&gt;</li>
+      <li>≥</li>
+      <li>=</li>
+      <li>≈</li>
+      <li>≠</li>
     </ul>
 
     <h4 id="notes-symbols">Notes:</h4>
     <p>
-      <small>Certain screen readers will not <a rel="external noopener" href="http://www.deque.com/blog/dont-screen-readers-read-whats-screen-part-1-punctuation-typographic-symbols/">read certain symbols out loud</a>. Use <code translate="no">role="definition"</code> in conjunction with <code translate="no">aria-label</code> to ensure the symbol is read.</small>
+      <small>Certain screen readers will not <a rel="external noopener" href="http://www.deque.com/blog/dont-screen-readers-read-whats-screen-part-1-punctuation-typographic-symbols/">read certain symbols out loud</a>. Use <code translate="no">role="definition"</code> in conjunction with <code translate="no">aria-label</code> to ensure the symbol is read. Use this techique with caution and discretion, as it will affect how the symbol is rendered by things like Braille readers.</small>
     </p>
   </div>
   <!-- End of #subsection-symbols -->
@@ -351,16 +351,16 @@ <h4 id="notes-symbols">Notes:</h4>
   <div id="subsection-emoji" aria-labelledby="subtitle-emoji">
     <h3 id="subtitle-emoji">Emoji</h3>
       <ul>
-        <li><span role="img" aria-label="Peach emoji">🍑</span></li>
-        <li><span role="img" aria-label="Smiling cat face emoji">😺</span></li>
-        <li><span role="img" aria-label="Tophat emoji">🎩</span></li>
-        <li><span role="img" aria-label="Snowman emoji">⛄️</span></li>
-        <li><span role="img" aria-label="Beer emoji">🍺</span></li>
+        <li>🍑</li>
+        <li>😺</li>
+        <li>🎩</li>
+        <li>⛄️</li>
+        <li>🍺</li>
       </ul>
 
       <h4 id="notes-emoji">Notes:</h4>
       <p>
-        <small>Certain screen readers will not <a rel="external noopener" href="http://tink.uk/accessible-emoji/">expose emoji as images in the accessibility treee</a>. Use <code translate="no">role="img"</code> in conjunction with <code translate="no">aria-label</code> to ensure the symbol is read.</small>
+        <small>Certain screen readers will not <a rel="external noopener" href="http://www.deque.com/blog/dont-screen-readers-read-whats-screen-part-1-punctuation-typographic-symbols/">read certain symbols out loud</a>. Use <code translate="no">role="definition"</code> in conjunction with <code translate="no">aria-label</code> to ensure the symbol is read. Use this techique with caution and discretion, as it will affect how the symbol is rendered by things like Braille readers.</small>
       </p>
   </div>
   <!-- End of #subsection-emoji -->
@@ -563,7 +563,7 @@ <h3 id="notes-inline-svg">Notes:</h3>
       <small>Be sure to provide values for the <code translate="no">height</code> and <code translate="no">width</code> attributes so <abbr>SVGs</abbr> won't expand to fill the page if styles don't load.</small>
     </li>
     <li>
-      <small>Different implementations of <abbr>SVG</abbr> have <a rel="external noopener" href="https://css-tricks.com/accessible-svgs/">different approaches for being made accessible</a>.</small>
+      <a>Different implementations of <abbr>SVG</abbr> have different approaches for being made accessible. Reference these articles by <a rel="external noopener" href="https://css-tricks.com/accessible-svgs/"></a>Heather Migliorisi</a> and <a rel="external noopener" href="https://www.deque.com/blog/creating-accessible-svgs/">Carie Fisher</a>.</small>
     </li>
     <li>
       <small>Add whitespace around the <code translate="no">use</code> element in a <abbr>SVG</abbr> icon system to <a rel="external noopener" href="http://simplyaccessible.com/article/7-solutions-svgs/#acc-heading-5">prevent a focus bug with Safari 10</a>.</small>