improved accessibility

I gave all the <img>s alt attributes, which makes reveal.js a lot more accessible

diff --git a/index.html b/index.html
index 1fc4b772e8145f6afaf7a4131cc54f009c5ac966..d047f4a75d6d7976dc150e277cf0fd41d7e05d43 100644 (file)
--- a/index.html
+++ b/index.html
@@ -66,7 +66,7 @@
                                                        try pressing <a href="#/2/1">down</a>.
                                                </p>
                                                <a href="#/2/1" class="image">
-                                                       <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png">
+                                                       <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
                                                </a>
                                        </section>
                                        <section>
@@ -77,14 +77,14 @@
                                                <h2>Basement Level 2</h2>
                                                <p>Cornify</p>
                                                <a class="test" href="http://cornify.com">
-                                                       <img width="280" height="326" src="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif">
+                                                       <img width="280" height="326" src="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" alt="Unicorn">
                                                </a>
                                        </section>
                                        <section>
                                                <h2>Basement Level 3</h2>
                                                <p>That's it, time to go back up.</p>
                                                <a href="#/2" class="image">
-                                                       <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" style="-webkit-transform: rotate(180deg);">
+                                                       <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);">
                                                </a>
                                        </section>
                                </section>
@@ -158,19 +158,19 @@
                                                        apply broader style changes, like switching the background.
                                                </p>
                                                <a href="#/7/1" class="image">
-                                                       <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png">
+                                                       <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
                                                </a>
                                        </section>
                                        <section data-state="blackout">
                                                <h2>"blackout"</h2>
                                                <a href="#/7/2" class="image">
-                                                       <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png">
+                                                       <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
                                                </a>
                                        </section>
                                        <section data-state="soothe">
                                                <h2>"soothe"</h2>
                                                <a href="#/7/0" class="image">
-                                                       <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" style="-webkit-transform: rotate(180deg);">
+                                                       <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);">
                                                </a>
                                        </section>
                                </section>
@@ -241,7 +241,7 @@ function linkify( selector ) {
                                <section>
                                        <h2>Spectacular image!</h2>
                                        <a class="image" href="http://hakim.se/experiments/html5/breakdom/" target="_blank">
-                                               <img width="320" height="412" src="https://s3.amazonaws.com/hakim-static/reveal-js/breakdom.png">
+                                               <img width="320" height="412" src="https://s3.amazonaws.com/hakim-static/reveal-js/breakdom.png" alt="BreakDOM game screenshot">
                                        </a>
                                </section>