Semantics slides.

Author: fuzzbomb

index.html

@@ -349,16 +349,38 @@ <h3>DEMO</h3>
 <section>
   <section>
     <h2>Semantics Revisited</h2>
+    <p>Re-cap. We already know this stuff...</p>
   </section>
   <section>
     <h3>HTML Elements</h3>
+    <ul>
+      <li>&lt;div&gt; means <em>nothing</em>></li>
+      <li>&lt;span&gt; means <em>nothing</em>></li>
+      <li>&lt;button&gt; - press it, makes something <em>happen</em>.</li>
+      <li>&lt;a href&gt; - hyperlinks direct you <em>elsewhere</em>.</li>
+      <li>Button vs Link. We'll run into that a lot.</li>
+    </ul>
   </section>
   <section>
     <h3>Human-readable semantics</h3>
+    <p>Attributes which often contain rich semantics, but are really only useful to a human audience: developers!</p>
+    <ul>
+      <li>class attribute</li>
+      <li>data-* attributes</li>
+      <li>ng-* attributes</li>
+      <li>Others?</li>
+    </ul>
+    <p>None are understood by screen-readers.</p>
   </section>
   <section>
     <h3>Semantics for screen-readers</h3>
-    <p>Machine-readable semantics</p>
+    <p>We want machine-readable semantics</p>
+    <ul>
+      <li>HTML Elements: headings, tables, forms, ...</li>
+      <li>HTML attributes: disabled, required, checked, ...</li>
+      <li>aria-* attributes</li>
+      <li>SVG, MathML.</li>
+    </ul>
   </section>
 </section>