improved accessibility

I gave all the <img>s alt attributes, which makes reveal.js a lot more accessible
This commit is contained in:
Owen Versteeg 2012-08-05 23:52:36 -03:00
parent 51a15b840a
commit 9f2d9691a1

View File

@ -66,7 +66,7 @@
try pressing <a href="#/2/1">down</a>. try pressing <a href="#/2/1">down</a>.
</p> </p>
<a href="#/2/1" class="image"> <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> </a>
</section> </section>
<section> <section>
@ -77,14 +77,14 @@
<h2>Basement Level 2</h2> <h2>Basement Level 2</h2>
<p>Cornify</p> <p>Cornify</p>
<a class="test" href="http://cornify.com"> <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> </a>
</section> </section>
<section> <section>
<h2>Basement Level 3</h2> <h2>Basement Level 3</h2>
<p>That's it, time to go back up.</p> <p>That's it, time to go back up.</p>
<a href="#/2" class="image"> <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> </a>
</section> </section>
</section> </section>
@ -158,19 +158,19 @@
apply broader style changes, like switching the background. apply broader style changes, like switching the background.
</p> </p>
<a href="#/7/1" class="image"> <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> </a>
</section> </section>
<section data-state="blackout"> <section data-state="blackout">
<h2>"blackout"</h2> <h2>"blackout"</h2>
<a href="#/7/2" class="image"> <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> </a>
</section> </section>
<section data-state="soothe"> <section data-state="soothe">
<h2>"soothe"</h2> <h2>"soothe"</h2>
<a href="#/7/0" class="image"> <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> </a>
</section> </section>
</section> </section>
@ -241,7 +241,7 @@ function linkify( selector ) {
<section> <section>
<h2>Spectacular image!</h2> <h2>Spectacular image!</h2>
<a class="image" href="http://hakim.se/experiments/html5/breakdom/" target="_blank"> <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> </a>
</section> </section>