Updated index and bumped the version

Author: ericwbailey

docs/index.html

@@ -41,6 +41,7 @@ <h2 id="title__table-of-contents">Table of Contents</h2>
                 <li><a href="#subsection__links">Links</a></li>
                 <li><a href="#subsection__code">Code</a></li>
                 <li><a href="#subsection__symbols">Symbols</a></li>
+                <li><a href="#subsection__emoji">Emoji</a></li>
             </ul>
         </li>
         <li><a href="#section__tables">Tables</a></li>
@@ -262,23 +263,36 @@ <h3 id="subtitle__code">Code</h3>
     <div id="subsection__symbols" role="region" aria-labelledby="subtitle__symbols"><!-- Start of #subsection__symbols -->
         <h3 id="subtitle__symbols">Symbols</h3>
         <ul>
-            <li><span aria-label="Plus">+</span></li>
-            <li><span aria-label="Minus">−</span></li>
-            <li><span aria-label="Plus or minus">±</span></li>
-            <li><span aria-label="Divided by">÷</span></li>
-            <li><span aria-label="Multiplied by">×</span></li>
-            <li><span aria-label="Less than">&lt;</span></li>
-            <li><span aria-label="Less than or equal to">≤</span></li>
-            <li><span aria-label="Greater than">&gt;</span></li>
-            <li><span aria-label="Greater than or equal to">≥</span></li>
-            <li><span aria-label="Equals">=</span></li>
-            <li><span aria-label="Approximately equals">≈</span></li>
-            <li><span aria-label="Not equals">≠</span></li>
+            <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>
         </ul>
         <p>
-            <small>Note: 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>aria-label</code> to ensure the symbol is read.</small>
+            <small>Note: 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>role="definition"</code> in conjunction with <code>aria-label</code> to ensure the symbol is read.</small>
         </p>
     </div><!-- End of #subsection__symbols -->
+    <div id="subsection__emoji" role="region" aria-labelledby="subtitle__emoji"><!-- Start of #subsection__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>
+        </ul>
+        <p>
+            <small>Note: 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>role="img"</code> in conjunction with <code>aria-label</code> to ensure the symbol is read.</small>
+        </p>
+    </div><!-- End of #subsection__emoji -->
 </section><!-- End of #section__text-level -->
 
 <hr />

package.json

@@ -2,7 +2,7 @@
   "name": "accessible-html-content-patterns",
   "description": "A collection of the full HTML5 Doctor Element Index as well as common markup patterns for quick reference.",
   "homepage": "https://github.com/ericwbailey/accessible-html-content-patterns",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "license": "MIT",
   "author": "Eric Bailey <[email protected]> (http://ericwbailey.com/)",
   "contributors": "Scott Doxey <[email protected]> (https://www.scottdoxey.com/)",