WIP - updating site icons with accessibility best practices

2024-12-26 13:31:30 +08:00 · 2016-04-01 20:28:42 -04:00 · 2016-04-01 20:28:42 -04:00 · 9675ee9a63
commit 9675ee9a63
parent bee2ab4f8c
44 changed files with 268 additions and 218 deletions
--- a/src/_includes/brand-adblock-warning.html
+++ b/src/_includes/brand-adblock-warning.html
@ -1,4 +1,4 @@
-<h4><i class="fa fa-warning"></i> Warning!</h4>
+<h4><i class="fa fa-warning" aria-hidden="true"></i> Warning!</h4>
 Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social
 Media Buttons" setting. We will not use hacks to force them to display. Please
 <a href="https://adblockplus.org/en/bugs" class="alert-link">report an issue with Adblock Plus</a> if you believe this to be
--- a/src/_includes/community/requesting-new-icons.html
+++ b/src/_includes/community/requesting-new-icons.html
@ -23,7 +23,7 @@
      </ul>
    </li>
    <li>
-      Request concrete objects: it's harder to make an icon to represent happiness, it's easier to make a smiley face.  <i class="fa fa-smile-o"></i>
+      Request concrete objects: it's harder to make an icon to represent happiness, it's easier to make a smiley face.  <i class="fa fa-smile-o" aria-hidden="true"></i>
    </li>
  </ol>
 </section>
--- a/src/_includes/examples/accessible.html
+++ b/src/_includes/examples/accessible.html
@ -6,21 +6,27 @@
    <div class="col-md-3 col-sm-4">
      <p>
        <a class="btn btn-default" href="path/to/settings">
-          <i class="fa fa-cog" aria-hidden="true"><span class="sr-only">Settings</span></i>
+          <i class="fa fa-cog" aria-hidden="true"></i>
+          <span class="sr-only">Settings</span>
        </a>

        <a class="btn btn-danger" href="path/to/settings">
-          <i class="fa fa-trash-o" aria-hidden="true"><span class="sr-only">Delete</span></i>
+          <i class="fa fa-trash-o" aria-hidden="true"></i>
+          <span class="sr-only">Delete</span>
        </a>

        <a class="btn btn-primary" href="#navigation-main">
-          <i class="fa fa-bars" aria-hidden="true"><span class="sr-only">Skip to main navigation</span></i>
+          <i class="fa fa-bars" aria-hidden="true"></i>
+          <span class="sr-only">Skip to main navigation</span>
        </a>
      </p>

      <p>
-        <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"><span class="sr-only">Reloading&hellip;</span></i>
-        <i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"><span class="sr-only">Saving. Hang tight!</span></i>
+        <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>
+        <span class="sr-only">Reloading&hellip;</span>
+
+        <i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"></i>
+        <span class="sr-only">Saving. Hang tight!</span>
      </p>

      <p>
@ -42,7 +48,8 @@
      </p>

      <p>
-        <i class="fa fa-battery-half" aria-hidden="true"></i><span class="sr-only">Battery Remaining: 50%;</span>
+        <i class="fa fa-battery-half" aria-hidden="true"></i>
+        <span class="sr-only">Battery Remaining: 50%;</span>
      </p>
    </div>
    <div class="col-md-9 col-sm-8">
@ -52,21 +59,27 @@

 {% highlight html %}
 <a class="btn btn-default" href="path/to/settings">
-  <i class="fa fa-cog" aria-hidden="true"><span class="sr-only">Settings</span></i>
+  <i class="fa fa-cog" aria-hidden="true"></i>
+  <span class="sr-only">Settings</span>
 </a>

 <a class="btn btn-danger" href="path/to/settings">
-  <i class="fa fa-trash-o" aria-hidden="true"><span class="sr-only">Delete</span></i>
+  <i class="fa fa-trash-o" aria-hidden="true"></i>
+  <span class="sr-only">Delete</span>
 </a>

 <a class="btn btn-primary" href="#navigation-main">
-  <i class="fa fa-bars" aria-hidden="true"><span class="sr-only">Skip to main navigation</span></i>
+  <i class="fa fa-bars" aria-hidden="true"></i>
+  <span class="sr-only">Skip to main navigation</span>
 </a>
 {% endhighlight %}

 {% highlight html %}
-<i class="fa fa-refresh fa-spin" aria-hidden="true"><span class="sr-only">Reloading&hellip;</span></i>
-<i class="fa fa-cog fa-spin" aria-hidden="true"><span class="sr-only">Saving. Hang tight!</span></i>
+<i class="fa fa-refresh fa-spin" aria-hidden="true"></i>
+<span class="sr-only">Reloading&hellip;</span>
+
+<i class="fa fa-cog fa-spin" aria-hidden="true"></i>
+<span class="sr-only">Saving. Hang tight!</span>
 {% endhighlight %}

 {% highlight html %}
--- a/src/_includes/examples/animated.html
+++ b/src/_includes/examples/animated.html
@ -9,11 +9,11 @@
  <div class="row">
    <div class="col-md-3 col-sm-4">
      <p>
-        <i class="fa fa-spinner fa-spin fa-3x fa-fw margin-bottom"></i>
-        <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw margin-bottom"></i>
-        <i class="fa fa-refresh fa-spin fa-3x fa-fw margin-bottom"></i>
-        <i class="fa fa-cog fa-spin fa-3x fa-fw margin-bottom"></i>
-        <i class="fa fa-spinner fa-pulse fa-3x fa-fw margin-bottom"></i>
+        <i class="fa fa-spinner fa-spin fa-3x fa-fw margin-bottom" aria-hidden="true"></i>
+        <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw margin-bottom" aria-hidden="true"></i>
+        <i class="fa fa-refresh fa-spin fa-3x fa-fw margin-bottom" aria-hidden="true"></i>
+        <i class="fa fa-cog fa-spin fa-3x fa-fw margin-bottom" aria-hidden="true"></i>
+        <i class="fa fa-spinner fa-pulse fa-3x fa-fw margin-bottom" aria-hidden="true"></i>
      </p>
    </div>
    <div class="col-md-9 col-sm-8">
@ -29,13 +29,13 @@
 <i class="fa fa-spinner fa-pulse"></i>
 {% endhighlight %}
      <p class="alert alert-success">
-        <i class="fa fa-exclamation-triangle fa-lg"></i> 
-        Some browsers on some platforms have issues with animated icons resulting in a jittery wobbling effect. See 
-        <a href="https://github.com/FortAwesome/Font-Awesome/issues/671" class="alert-link" target="_blank">issue #671</a> 
+        <i class="fa fa-exclamation-triangle fa-lg" aria-hidden="true"></i><strong class="sr-only">Note:</strong>
+        Some browsers on some platforms have issues with animated icons resulting in a jittery wobbling effect. See
+        <a href="https://github.com/FortAwesome/Font-Awesome/issues/671" class="alert-link" target="_blank">issue #671</a>
        for examples and possible workarounds.
      </p>
      <p class="alert alert-success">
-        <i class="fa fa-info-circle fa-lg"></i> CSS3 animations aren't supported in IE8 - IE9.
+        <i class="fa fa-info-circle fa-lg" aria-hidden="true"></i><strong class="sr-only">Note:</strong> CSS3 animations aren't supported in IE8 - IE9.
      </p>
    </div>
  </div>
--- a/src/_includes/examples/basic.html
+++ b/src/_includes/examples/basic.html
@ -10,7 +10,8 @@
  <div class="row">
    <div class="col-md-3 col-sm-4">
      <p>
-        <i class="fa fa-camera-retro"></i> fa-camera-retro
+        <i class="fa fa-camera-retro" aria-hidden="true">fa-camera-retro</i>
+        <span class="sr-only">Example: basic icon</span>
      </p>
    </div>
    <div class="col-md-9 col-sm-8">
@ -25,7 +26,8 @@
      <div class="alert alert-success">
        <ul class="fa-ul">
          <li>
-            <i class="fa fa-info-circle fa-lg fa-li"></i>
+            <i class="fa fa-info-circle fa-lg fa-li" aria-hidden="true"></i>
+            <strong class="sr-only">Example: basic icon</strong>
            If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color,
            drop shadow, and anything else that gets inherited using CSS.
          </li>
--- a/src/_includes/examples/bootstrap.html
+++ b/src/_includes/examples/bootstrap.html
@ -4,43 +4,57 @@
    <div class="col-md-3 col-sm-4">
      <p>
        <a class="btn btn-danger" href="#">
-          <i class="fa fa-trash-o fa-lg"></i> Delete</a>
+          <i class="fa fa-trash-o fa-lg"  aria-hidden="true"></i> Delete</a>
        <a class="btn btn-default btn-sm" href="#">
-          <i class="fa fa-cog"></i> Settings</a>
+          <i class="fa fa-cog" aria-hidden="true"></i> Settings</a>
      </p>
      <p>
        <a class="btn btn-lg btn-success" href="#">
-          <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
+          <i class="fa fa-flag fa-2x pull-left" aria-hidden="true"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
      </p>
      <div class="margin-bottom">
        <div class="btn-group">
-          <a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
-          <a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
-          <a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
-          <a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
+          <a class="btn btn-default" href="#">
+            <i class="fa fa-align-left" aria-hidden="true"></i>
+            <span class="sr-only">Align Left</span>
+          </a>
+          <a class="btn btn-default" href="#">
+            <i class="fa fa-align-center" aria-hidden="true"></i>
+            <span class="sr-only">Align Center</span>
+          </a>
+          <a class="btn btn-default" href="#">
+            <i class="fa fa-align-right" aria-hidden="true"></i>
+            <span class="sr-only">Align Right</span>
+          </a>
+          <a class="btn btn-default" href="#">
+            <i class="fa fa-align-justify" aria-hidden="true"></i>
+            <span class="sr-only">Align Justify</span>
+          </a>
        </div>
      </div>
      <div class="margin-bottom">
        <div class="input-group margin-bottom-sm">
-          <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
+          <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span>
          <input class="form-control" type="text" placeholder="Email address">
        </div>
        <div class="input-group">
-          <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
+          <span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
          <input class="form-control" type="password" placeholder="Password">
        </div>
      </div>
      <div class="margin-bottom">
        <div class="btn-group open">
-          <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
+          <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw" aria-hidden="true"></i> User</a>
          <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
-            <span class="fa fa-caret-down"></span></a>
+            <span class="fa fa-caret-down" aria-hidden="true"></span>
+            <span class="sr-only">Toggle dropdown menu</span>
+          </a>
          <ul class="dropdown-menu">
-            <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
-            <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
-            <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
+            <li><a href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Edit</a></li>
+            <li><a href="#"><i class="fa fa-trash-o fa-fw" aria-hidden="true"></i> Delete</a></li>
+            <li><a href="#"><i class="fa fa-ban fa-fw" aria-hidden="true"></i> Ban</a></li>
            <li class="divider"></li>
-            <li><a href="#"><i class="i"></i> Make admin</a></li>
+            <li><a href="#"><i class="fa fa-unlock" aria-hidden="true"></i> Make admin</a></li>
          </ul>
        </div>
      </div>
@ -52,18 +66,30 @@
      </p>
 {% highlight html %}
 <a class="btn btn-danger" href="#">
-  <i class="fa fa-trash-o fa-lg"></i> Delete</a>
+  <i class="fa fa-trash-o fa-lg" aria-hidden="true"></i> Delete</a>
 <a class="btn btn-default btn-sm" href="#">
-  <i class="fa fa-cog"></i> Settings</a>
+  <i class="fa fa-cog" aria-hidden="true"></i> Settings</a>

 <a class="btn btn-lg btn-success" href="#">
-  <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
+  <i class="fa fa-flag fa-2x pull-left" aria-hidden="true"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>

 <div class="btn-group">
-  <a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
-  <a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
-  <a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
-  <a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
+  <a class="btn btn-default" href="#">
+    <i class="fa fa-align-left" aria-hidden="true"></i>
+    <span class="sr-only">Align Left</span>
+  </a>
+  <a class="btn btn-default" href="#">
+    <i class="fa fa-align-center" aria-hidden="true"></i>
+    <span class="sr-only">Align Center</span>
+  </a>
+  <a class="btn btn-default" href="#">
+    <i class="fa fa-align-right" aria-hidden="true"></i>
+    <span class="sr-only">Align Right</span>
+  </a>
+  <a class="btn btn-default" href="#">
+    <i class="fa fa-align-justify" aria-hidden="true"></i>
+    <span class="sr-only">Align Justify</span>
+  </a>
 </div>

 <div class="input-group margin-bottom-sm">
@ -78,13 +104,15 @@
 <div class="btn-group open">
  <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
-    <span class="fa fa-caret-down"></span></a>
+    <span class="fa fa-caret-down"></span>
+    <span class="sr-only">Toggle dropdown menu</span>
+  </a>
  <ul class="dropdown-menu">
-    <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
-    <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
-    <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
+    <li><a href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Edit</a></li>
+    <li><a href="#"><i class="fa fa-trash-o fa-fw" aria-hidden="true"></i> Delete</a></li>
+    <li><a href="#"><i class="fa fa-ban fa-fw" aria-hidden="true"></i> Ban</a></li>
    <li class="divider"></li>
-    <li><a href="#"><i class="i"></i> Make admin</a></li>
+    <li><a href="#"><i class="fa fa-unlock" aria-hidden="true"></i> Make admin</a></li>
  </ul>
 </div>
 {% endhighlight %}
--- a/src/_includes/examples/bordered-pulled.html
+++ b/src/_includes/examples/bordered-pulled.html
@ -9,7 +9,7 @@
  <div class="row">
    <div class="col-md-3 col-sm-4">
      <p>
-        <i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
+        <i class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"></i>
        &hellip;tomorrow we will run faster, stretch out our arms farther&hellip; And then one fine morning—
        So we beat on, boats against the current, borne back ceaselessly into the past.
      </p>
--- a/src/_includes/examples/fixed-width.html
+++ b/src/_includes/examples/fixed-width.html
@ -9,10 +9,10 @@
  <div class="row">
    <div class="col-md-3 col-sm-4">
      <div class="list-group">
-        <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
-        <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
-        <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
-        <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
+        <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidde="true"></i>&nbsp; Home</a>
+        <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidde="true"></i>&nbsp; Library</a>
+        <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidde="true"></i>&nbsp; Applications</a>
+        <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidde="true"></i>&nbsp; Settings</a>
      </div>
    </div>
    <div class="col-md-9 col-sm-8">
--- a/src/_includes/examples/larger.html
+++ b/src/_includes/examples/larger.html
@ -8,11 +8,11 @@
  </h2>
  <div class="row">
    <div class="col-md-3 col-sm-4">
-      <p><i class="fa fa-camera-retro fa-lg"></i> fa-lg</p>
-      <p><i class="fa fa-camera-retro fa-2x"></i> fa-2x</p>
-      <p><i class="fa fa-camera-retro fa-3x"></i> fa-3x</p>
-      <p><i class="fa fa-camera-retro fa-4x"></i> fa-4x</p>
-      <p><i class="fa fa-camera-retro fa-5x"></i> fa-5x</p>
+      <p><i class="fa fa-camera-retro fa-lg" aria-hidden="true"></i> fa-lg</p>
+      <p><i class="fa fa-camera-retro fa-2x" aria-hidden="true"></i> fa-2x</p>
+      <p><i class="fa fa-camera-retro fa-3x" aria-hidden="true"></i> fa-3x</p>
+      <p><i class="fa fa-camera-retro fa-4x" aria-hidden="true"></i> fa-4x</p>
+      <p><i class="fa fa-camera-retro fa-5x" aria-hidden="true"></i> fa-5x</p>
    </div>
    <div class="col-md-9 col-sm-8">
      <p>
--- a/src/_includes/examples/list.html
+++ b/src/_includes/examples/list.html
@ -9,20 +9,20 @@
  <div class="row">
    <div class="col-md-3 col-sm-4">
      <ul class="fa-ul">
-        <li><i class="fa-li fa fa-check-square"></i>List icons</li>
-        <li><i class="fa-li fa fa-check-square"></i>can be used</li>
-        <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
-        <li><i class="fa-li fa fa-square"></i>in lists</li>
+        <li><i class="fa-li fa fa-check-square" aria-hidden="true"></i>List icons</li>
+        <li><i class="fa-li fa fa-check-square" aria-hidden="true"></i>can be used</li>
+        <li><i class="fa-li fa fa-spinner fa-spin" aria-hidden="true"></i>as bullets</li>
+        <li><i class="fa-li fa fa-square" aria-hidden="true"></i>in lists</li>
      </ul>
    </div>
    <div class="col-md-9 col-sm-8">
      <p>Use <code>fa-ul</code> and <code>fa-li</code> to easily replace default bullets in unordered lists.</p>
 {% highlight html %}
 <ul class="fa-ul">
-  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
-  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
-  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
-  <li><i class="fa-li fa fa-square"></i>in lists</li>
+  <li><i class="fa-li fa fa-check-square" aria-hidden="true"></i>List icons</li>
+  <li><i class="fa-li fa fa-check-square" aria-hidden="true"></i>can be used</li>
+  <li><i class="fa-li fa fa-spinner fa-spin" aria-hidden="true"></i>as bullets</li>
+  <li><i class="fa-li fa fa-square" aria-hidden="true"></i>in lists</li>
 </ul>
 {% endhighlight %}
    </div>
--- a/src/_includes/examples/rotated-flipped.html
+++ b/src/_includes/examples/rotated-flipped.html
@ -9,12 +9,12 @@
  <div class="row">
    <div class="col-md-3 col-sm-4">
      <p style="font-size: 18px;">
-        <i class="fa fa-shield"></i>&nbsp; normal<br>
-        <i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
-        <i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
-        <i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br>
-        <i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
-        <i class="fa fa-shield fa-flip-vertical"></i>&nbsp; fa-flip-vertical
+        <i class="fa fa-shield" aria-hidden="true"></i>&nbsp; normal<br>
+        <i class="fa fa-shield fa-rotate-90" aria-hidden="true"></i>&nbsp; fa-rotate-90<br>
+        <i class="fa fa-shield fa-rotate-180" aria-hidden="true"></i>&nbsp; fa-rotate-180<br>
+        <i class="fa fa-shield fa-rotate-270" aria-hidden="true"></i>&nbsp; fa-rotate-270<br>
+        <i class="fa fa-shield fa-flip-horizontal" aria-hidden="true"></i>&nbsp; fa-flip-horizontal<br>
+        <i class="fa fa-shield fa-flip-vertical" aria-hidden="true"></i>&nbsp; fa-flip-vertical
      </p>
    </div>
    <div class="col-md-9 col-sm-8">
--- a/src/_includes/examples/stacked.html
+++ b/src/_includes/examples/stacked.html
@ -9,22 +9,22 @@
  <div class="row">
    <div class="col-md-3 col-sm-4">
      <div class="margin-bottom">
-        <span class="fa-stack fa-lg">
+        <span class="fa-stack fa-lg" aria-hidden="true">
          <i class="fa fa-square-o fa-stack-2x"></i>
          <i class="fa fa-twitter fa-stack-1x"></i>
        </span>
        fa-twitter on fa-square-o<br>
-        <span class="fa-stack fa-lg">
+        <span class="fa-stack fa-lg" aria-hidden="true">
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
        </span>
        fa-flag on fa-circle<br>
-        <span class="fa-stack fa-lg">
+        <span class="fa-stack fa-lg" aria-hidden="true">
          <i class="fa fa-square fa-stack-2x"></i>
          <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
        </span>
        fa-terminal on fa-square<br>
-        <span class="fa-stack fa-lg">
+        <span class="fa-stack fa-lg" aria-hidden="true">
          <i class="fa fa-camera fa-stack-1x"></i>
          <i class="fa fa-ban fa-stack-2x text-danger"></i>
        </span>
--- a/src/_includes/footer.html
+++ b/src/_includes/footer.html
@ -18,7 +18,7 @@
      </a>
    </div>
    <div>
-      <i class="fa fa-flag"></i> Font Awesome {{ site.fontawesome.version }}
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome {{ site.fontawesome.version }}
      <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
      Created by <a href="https://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
    </div>
--- a/src/_includes/icons/brand.html
+++ b/src/_includes/icons/brand.html
@ -9,7 +9,7 @@
    {% assign icons_brand = icons | expand_aliases | category:"Brand Icons" | sort_by:'class' %}

    {% for icon in icons_brand %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
    {% endfor %}
  </div>

--- a/src/_includes/icons/chart.html
+++ b/src/_includes/icons/chart.html
@ -5,7 +5,7 @@
    {% assign icons_chart = icons | expand_aliases | category:"Chart Icons" | sort_by:'class' %}

    {% for icon in icons_chart %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
    {% endfor %}
  </div>

--- a/src/_includes/icons/currency.html
+++ b/src/_includes/icons/currency.html
@ -5,7 +5,7 @@
    {% assign icons_currency = icons | expand_aliases | category:"Currency Icons" | sort_by:'class' %}

    {% for icon in icons_currency %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
    {% endfor %}
  </div>

--- a/src/_includes/icons/directional.html
+++ b/src/_includes/icons/directional.html
@ -5,7 +5,7 @@
    {% assign icons_directional = icons | expand_aliases | category:"Directional Icons" | sort_by:'class' %}

    {% for icon in icons_directional %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
    {% endfor %}
  </div>

--- a/src/_includes/icons/file-type.html
+++ b/src/_includes/icons/file-type.html
@ -5,7 +5,7 @@
    {% assign icons_file_type = icons | expand_aliases | category:"File Type Icons" | sort_by:'class' %}

    {% for icon in icons_file_type %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
    {% endfor %}
  </div>

--- a/src/_includes/icons/form-control.html
+++ b/src/_includes/icons/form-control.html
@ -5,7 +5,7 @@
    {% assign icons_form_control = icons | expand_aliases | category:"Form Control Icons" | sort_by:'class' %}

    {% for icon in icons_form_control %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
    {% endfor %}
  </div>
 </section>
--- a/src/_includes/icons/gender.html
+++ b/src/_includes/icons/gender.html
@ -5,7 +5,7 @@
    {% assign icons_gender = icons | expand_aliases | category:"Gender Icons" | sort_by:'class' %}

    {% for icon in icons_gender %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
    {% endfor %}
  </div>

--- a/src/_includes/icons/hand.html
+++ b/src/_includes/icons/hand.html
@ -5,7 +5,7 @@
    {% assign icons_hand = icons | expand_aliases | category:"Hand Icons" | sort_by:'class' %}

    {% for icon in icons_hand %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
    {% endfor %}
  </div>

--- a/src/_includes/icons/medical.html
+++ b/src/_includes/icons/medical.html
@ -5,7 +5,7 @@
    {% assign icons_medical = icons | expand_aliases | category:"Medical Icons" | sort_by:'class' %}

    {% for icon in icons_medical %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
    {% endfor %}
  </div>

--- a/src/_includes/icons/new.html
+++ b/src/_includes/icons/new.html
@ -11,7 +11,7 @@
    {% assign icons_new = icons | expand_aliases | version:site.fontawesome.minor_version | sort_by:'class' %}

    {% for icon in icons_new %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
    {% endfor %}
  </div>

--- a/src/_includes/icons/payment.html
+++ b/src/_includes/icons/payment.html
@ -5,7 +5,7 @@
    {% assign icons_payment = icons | expand_aliases | category:"Payment Icons" | sort_by:'class' %}

    {% for icon in icons_payment %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
    {% endfor %}
  </div>

--- a/src/_includes/icons/spinner.html
+++ b/src/_includes/icons/spinner.html
@ -4,7 +4,8 @@
  <div class="alert alert-success">
    <ul class="fa-ul">
      <li>
-        <i class="fa fa-info-circle fa-lg fa-li"></i>
+        <i class="fa fa-info-circle fa-lg fa-li" aria-hidden="true"></i>
+        <strong class="sr-only">Note:</strong>
        These icons work great with the <code>fa-spin</code> class. Check out the
        <a href="{{ page.relative_path }}examples/#animated" class="alert-link">spinning icons example</a>.
      </li>
@ -15,7 +16,7 @@
    {% assign icons_spinner = icons | expand_aliases | category:"Spinner Icons" | sort_by:'class' %}

    {% for icon in icons_spinner %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
    {% endfor %}
  </div>
 </section>
--- a/src/_includes/icons/text-editor.html
+++ b/src/_includes/icons/text-editor.html
@ -5,7 +5,7 @@
    {% assign icons_text_editor = icons | expand_aliases | category:"Text Editor Icons" | sort_by:'class' %}

    {% for icon in icons_text_editor %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
    {% endfor %}
  </div>

--- a/src/_includes/icons/transportation.html
+++ b/src/_includes/icons/transportation.html
@ -5,7 +5,7 @@
    {% assign icons_transportation = icons | expand_aliases | category:"Transportation Icons" | sort_by:'class' %}

    {% for icon in icons_transportation %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
    {% endfor %}
  </div>

--- a/src/_includes/icons/video-player.html
+++ b/src/_includes/icons/video-player.html
@ -5,7 +5,7 @@
    {% assign icons_video_player = icons | expand_aliases | category:"Video Player Icons" | sort_by:'class' %}

    {% for icon in icons_video_player %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
    {% endfor %}
  </div>

--- a/src/_includes/icons/web-application.html
+++ b/src/_includes/icons/web-application.html
@ -5,7 +5,7 @@
    {% assign icons_web_application = icons | expand_aliases | category:"Web Application Icons" | sort_by:'class' %}

    {% for icon in icons_web_application %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
    {% endfor %}
  </div>

--- a/src/_includes/jumbotron-carousel.html
+++ b/src/_includes/jumbotron-carousel.html
@ -7,7 +7,7 @@
        <div class="actions">
          <a class="btn btn-default btn-lg" href="#modal-download" data-toggle="modal"
             onClick="_gaq.push(['_trackEvent', 'Launch Modal', 'Launch Download Modal']);">
-            <i class="fa fa-download fa-lg"></i>&nbsp;
+            <i class="fa fa-download fa-lg" aria-hidden="true"></i>&nbsp;
            Download
          </a>
        </div>
@ -24,27 +24,31 @@
        <div id="icon-carousel" class="carousel slide">
          <!-- Carousel items -->
          <div class="carousel-inner">
-            <div class="active item"><div><i class="fa fa-flag"></i></div></div>
-            <div class="item"><div><i class="fa fa-fort-awesome"></i></div></div>
-            <div class="item"><div><i class="fa fa-sticky-note"></i></div></div>
-            <div class="item"><div><i class="fa fa-commenting"></i></div></div>
-            <div class="item"><div><i class="fa fa-map-signs"></i></div></div>
-            <div class="item"><div><i class="fa fa-envelope"></i></div></div>
-            <div class="item"><div><i class="fa fa-send-o"></i></div></div>
-            <div class="item"><div><i class="fa fa-book"></i></div></div>
-            <div class="item"><div><i class="fa fa-fighter-jet"></i></div></div>
-            <div class="item"><div><i class="fa fa-beer"></i></div></div>
-            <div class="item"><div><i class="fa fa-heart-o"></i></div></div>
-            <div class="item"><div><i class="fa fa-thumbs-o-up"></i></div></div>
-            <div class="item"><div><i class="fa fa-pied-piper-alt"></i></div></div>
+            <div class="active item"><div><i class="fa fa-flag" aria-hidden="true"></i><span class="sr-only">flag icon</span></div></div>
+            <div class="item"><div><i class="fa fa-fort-awesome" aria-hidden="true"></i><span class="sr-only">fort awesome icon</span></div></div>
+            <div class="item"><div><i class="fa fa-sticky-note" aria-hidden="true"></i><span class="sr-only">sticky note icon</span></div></div>
+            <div class="item"><div><i class="fa fa-commenting" aria-hidden="true"></i><span class="sr-only">commenting icon</span></div></div>
+            <div class="item"><div><i class="fa fa-map-signs" aria-hidden="true"></i><span class="sr-only">map signs icon</span></div></div>
+            <div class="item"><div><i class="fa fa-envelope" aria-hidden="true"></i><span class="sr-only">envelope icon</span></div></div>
+            <div class="item"><div><i class="fa fa-send-o" aria-hidden="true"></i><span class="sr-only">send icon</span></div></div>
+            <div class="item"><div><i class="fa fa-book" aria-hidden="true"></i><span class="sr-only">book icon</span></div></div>
+            <div class="item"><div><i class="fa fa-fighter-jet" aria-hidden="true"></i><span class="sr-only">fighter jet icon</span></div></div>
+            <div class="item"><div><i class="fa fa-beer" aria-hidden="true"></i><span class="sr-only">beer icon</span></div></div>
+            <div class="item"><div><i class="fa fa-heart-o" aria-hidden="true"></i><span class="sr-only">heart icon</span></div></div>
+            <div class="item"><div><i class="fa fa-thumbs-o-up" aria-hidden="true"></i><span class="sr-only">thumbs up icon</span></div></div>
+            <div class="item"><div><i class="fa fa-pied-piper-alt" aria-hidden="true"></i><span class="sr-only">pied piper icon</span></div></div>
          </div>
          <!-- Carousel nav -->
          <a class="carousel-control left" href="#icon-carousel" data-slide="prev"
             onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Prev']);">
-            <i class="fa fa-arrow-circle-left"></i></a>
+            <i class="fa fa-arrow-circle-left" aria-hidden="true"></i>
+            <span class="sr-only">Previous</span>
+          </a>
          <a class="carousel-control right" href="#icon-carousel" data-slide="next"
             onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Next']);">
-            <i class="fa fa-arrow-circle-right"></i></a>
+            <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
+            <span class="sr-only">Next</span>
+          </a>
        </div>
      </div>
    </div>
--- a/src/_includes/modals/download.html
+++ b/src/_includes/modals/download.html
@ -3,9 +3,9 @@
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times" aria-hidden="true"></i><span class="close"></span></button>
        <h2 class="modal-title" id="modal-download-label">
-          <i class="fa fa-download fa-lg"></i>&nbsp;
+          <i class="fa fa-download fa-lg" aria-hidden="true"></i>&nbsp;
          Download
        </h2>
      </div>
--- a/src/_includes/navbar.html
+++ b/src/_includes/navbar.html
@ -34,10 +34,10 @@
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+        <i class="fa fa-bars fa-lg" aria-hidden="true"></i>
        <span class="sr-only">Toggle navigation</span>
-        <i class="fa fa-bars fa-lg"></i>
      </button>
-      <a class="navbar-brand" href="{{ page.relative_path }}"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
+      <a class="navbar-brand" href="{{ page.relative_path }}"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
    </div>

    <div class="navbar-collapse collapse">
@ -53,33 +53,35 @@
        <li class="dropdown-split-left{% if page.navbar_active == "icons" %} active{% endif %}"><a href="{{ page.relative_path }}icons/">Icons</a></li>
        <li class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == "icons" %} active{% endif %}">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-            <i class="fa fa-caret-down"></i>
+            <i class="fa fa-caret-down" aria-hidden="true"></i>
+            <span class="toggle drop down"></span>
          </a>
          <ul class="dropdown-menu pull-right">
-            <li><a href="{{ page.relative_path }}icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
            <li class="divider"></li>
-            <li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in {{ site.fontawesome.minor_version }}</a></li>
-            <li><a href="{{ page.relative_path }}icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-fort-awesome fa-fw" aria-hidden="true"></i>&nbsp; New Icons in {{ site.fontawesome.minor_version }}</a></li>
+            <li><a href="{{ page.relative_path }}icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#file-type"><i class="fa fa-file-image-o fa-fw" aria-hidden="true"></i>&nbsp; File Type Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#text-editor"><i class="fa fa-file-text-o fa-fw" aria-hidden="true"></i>&nbsp; Text Editor Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#brand"><i class="fa fa-github fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
          </ul>
        </li>
        <li class="dropdown-split-left{% if page.navbar_active == "examples" %} active{% endif %}"><a href="{{ page.relative_path }}examples/">Examples</a></li>
        <li class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == "examples" %} active{% endif %}">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-            <i class="fa fa-caret-down"></i>
+            <i class="fa fa-caret-down" aria-hidden="true"></i>
+            <span class="toggle drop down"></span>
          </a>
          <ul class="dropdown-menu pull-right">
            <li><a href="{{ page.relative_path }}examples/">Examples</a></li>
--- a/src/_includes/new-features.html
+++ b/src/_includes/new-features.html
@ -2,27 +2,27 @@
 <section id="whats-new" class="feature-list">
  <div class="row">
    <div class="col-md-4 col-sm-6">
-      <h4><i class="fa fa-file-text-o"></i> Completely Rewritten</h4>
+      <h4><i class="fa fa-file-text-o" aria-hidden="true"></i> Completely Rewritten</h4>
      Everything re-written from the ground up for speed and simplicity.
    </div>
    <div class="col-md-4 col-sm-6">
-      <h4><i class="fa fa-fighter-jet"></i> CSS Best Practices</h4>
+      <h4><i class="fa fa-fighter-jet" aria-hidden="true"></i> CSS Best Practices</h4>
      New icon base class allows simpler CSS, faster rendering, and easier control.
    </div>
    <div class="col-md-4 col-sm-6">
-      <h4><i class="fa fa-terminal"></i> New Icon Names</h4>
+      <h4><i class="fa fa-terminal" aria-hidden="true"></i> New Icon Names</h4>
      Icons have been renamed to improve consistency and predictability.
    </div>
    <div class="col-md-4 col-sm-6">
-      <h4><i class="fa fa-thumbs-o-up"></i> Bootstrap 3</h4>
+      <h4><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> Bootstrap 3</h4>
      Font Awesome {{ site.fontawesome.minor_version }} is fully tested and compatible with Bootstrap 3.
    </div>
    <div class="col-md-4 col-sm-6">
-      <h4><i class="fa fa-code"></i> Better Compatibility</h4>
+      <h4><i class="fa fa-code" aria-hidden="true"></i> Better Compatibility</h4>
      Font Awesome is now more compatible with all web frameworks, including Foundation.
    </div>
    <div class="col-md-4 col-sm-6">
-      <h4><i class="fa fa-rub"></i> {{ icons | version:site.fontawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}</h4>
+      <h4><i class="fa fa-rub" aria-hidden="true"></i> {{ icons | version:site.fontawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}</h4>
      Requested by the active community on the <a href="{{ site.fontawesome.github.url }}">Font Awesome GitHub project</a>.
    </div>
  </div>
--- a/src/_includes/new-naming.html
+++ b/src/_includes/new-naming.html
@ -12,15 +12,15 @@
      <p class="margin-bottom-sm">Solid icons as the base variant</p>
      <ul class="fa-ul padding-left-sm">
        <li>
-          <i class="fa fa-bookmark fa-li"></i>
+          <i class="fa fa-bookmark fa-li" aria-hidden="true"></i>
          fa-bookmark
        </li>
        <li>
-          <i class="fa fa-comment fa-li"></i>
+          <i class="fa fa-comment fa-li" aria-hidden="true"></i>
          fa-comment
        </li>
        <li>
-          <i class="fa fa-folder fa-li"></i>
+          <i class="fa fa-folder fa-li" aria-hidden="true"></i>
          fa-folder
        </li>
      </ul>
@ -30,15 +30,15 @@
      <p class="margin-bottom-sm">Outlined version of previous modifier</p>
      <ul class="fa-ul padding-left-sm">
        <li>
-          <i class="fa fa-bookmark-o fa-li"></i>
+          <i class="fa fa-bookmark-o fa-li" aria-hidden="true"></i>
          fa-bookmark-o
        </li>
        <li>
-          <i class="fa fa-comment-o fa-li"></i>
+          <i class="fa fa-comment-o fa-li" aria-hidden="true"></i>
          fa-comment-o
        </li>
        <li>
-          <i class="fa fa-folder-o fa-li"></i>
+          <i class="fa fa-folder-o fa-li" aria-hidden="true"></i>
          fa-folder-o
        </li>
      </ul>
@ -48,15 +48,15 @@
      <p class="margin-bottom-sm">Circle under previous modifier</p>
      <ul class="fa-ul padding-left-sm">
        <li>
-          <i class="fa fa-check-circle fa-li"></i>
+          <i class="fa fa-check-circle fa-li" aria-hidden="true"></i>
          fa-check-circle
        </li>
        <li>
-          <i class="fa fa-exclamation-circle fa-li"></i>
+          <i class="fa fa-exclamation-circle fa-li" aria-hidden="true"></i>
          fa-exclamation-circle
        </li>
        <li>
-          <i class="fa fa-plus-circle fa-li"></i>
+          <i class="fa fa-plus-circle fa-li" aria-hidden="true"></i>
          fa-plus-circle
        </li>
      </ul>
@ -66,15 +66,15 @@
      <p class="margin-bottom-sm">Square under previous modifier</p>
      <ul class="fa-ul padding-left-sm">
        <li>
-          <i class="fa fa-check-square fa-li"></i>
+          <i class="fa fa-check-square fa-li" aria-hidden="true"></i>
          fa-check-square
        </li>
        <li>
-          <i class="fa fa-twitter-square fa-li"></i>
+          <i class="fa fa-twitter-square fa-li" aria-hidden="true"></i>
          fa-twitter-square
        </li>
        <li>
-          <i class="fa fa-plus-square fa-li"></i>
+          <i class="fa fa-plus-square fa-li" aria-hidden="true"></i>
          fa-plus-square
        </li>
      </ul>
@ -84,15 +84,15 @@
      <p class="margin-bottom-sm">Directional modifier always at the end</p>
      <ul class="fa-ul padding-left-sm">
        <li>
-          <i class="fa fa-arrow-right fa-li"></i>
+          <i class="fa fa-arrow-right fa-li" aria-hidden="true"></i>
          fa-arrow-right
        </li>
        <li>
-          <i class="fa fa-arrow-circle-right fa-li"></i>
+          <i class="fa fa-arrow-circle-right fa-li" aria-hidden="true"></i>
          fa-arrow-circle-right
        </li>
        <li>
-          <i class="fa fa-angle-double-right fa-li"></i>
+          <i class="fa fa-angle-double-right fa-li" aria-hidden="true"></i>
          fa-angle-double-right
        </li>
      </ul>
@ -102,15 +102,15 @@
      <p class="margin-bottom-sm">Alternative to the original</p>
      <ul class="fa-ul padding-left-sm">
        <li>
-          <i class="fa fa-unlock-alt fa-li"></i>
+          <i class="fa fa-unlock-alt fa-li" aria-hidden="true"></i>
          fa-unlock-alt
        </li>
        <li>
-          <i class="fa fa-list-alt fa-li"></i>
+          <i class="fa fa-list-alt fa-li" aria-hidden="true"></i>
          fa-list-alt
        </li>
        <li>
-          <i class="fa fa-github-alt fa-li"></i>
+          <i class="fa fa-github-alt fa-li" aria-hidden="true"></i>
          fa-github-alt
        </li>
      </ul>
@ -120,33 +120,33 @@
      <p class="margin-bottom-sm">Horizontal &amp; vertical modifiers</p>
      <ul class="fa-ul padding-left-sm">
        <li>
-          <i class="fa fa-arrows-v fa-li"></i>
+          <i class="fa fa-arrows-v fa-li" aria-hidden="true"></i>
          fa-arrows-v
        </li>
        <li>
-          <i class="fa fa-arrows-h fa-li"></i>
+          <i class="fa fa-arrows-h fa-li" aria-hidden="true"></i>
          fa-arrows-h
        </li>
        <li>
-          <i class="fa fa-ellipsis-v fa-li"></i>
+          <i class="fa fa-ellipsis-v fa-li" aria-hidden="true"></i>
          fa-ellipsis-v
        </li>
      </ul>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6">
-      <h4 class="margin-bottom-sm">Combine 'em up...</h4>
+      <h4 class="margin-bottom-sm">Combine 'em up&helip;</h4>
      <p class="margin-bottom-sm">Consistent when strung together</p>
      <ul class="fa-ul padding-left-sm">
        <li>
-          <i class="fa fa-arrow-circle-o-right fa-li"></i>
+          <i class="fa fa-arrow-circle-o-right fa-li" aria-hidden="true"></i>
          fa-arrow-circle-o-right
        </li>
        <li>
-          <i class="fa fa-caret-square-o-right fa-li"></i>
+          <i class="fa fa-caret-square-o-right fa-li" aria-hidden="true"></i>
          fa-caret-square-o-right
        </li>
        <li>
-          <i class="fa fa-hand-o-right fa-li"></i>
+          <i class="fa fa-hand-o-right fa-li" aria-hidden="true"></i>
          fa-hand-o-right
        </li>
      </ul>
--- a/src/_includes/stripe-social.html
+++ b/src/_includes/stripe-social.html
@ -11,7 +11,7 @@
          <button type="submit" class="btn btn-success btn-block margin-bottom-lg"
              data-toggle="popover" data-trigger="hover" data-placement="top" title="Stay up to date with the Awesome"
              data-content="We'll send you updates on new Font Awesome releases, icons, and other stuff that we're working on. We won't spam you. Scout's honor.">
-            Subscribe to Font Awesome Updates&nbsp;&nbsp;<i class="fa fa-envelope"></i>
+            Subscribe to Font Awesome Updates&nbsp;&nbsp;<i class="fa fa-envelope" aria-hidden="true"></i>
          </button>
        </div>
      </div>
--- a/src/_includes/tell-me-thanks.html
+++ b/src/_includes/tell-me-thanks.html
@ -6,7 +6,7 @@
  </p>
  <div class="row">
    <div class="col-md-6 col-sm-6">
-      <h3><a href="https://www.gittip.com/davegandy/"><i class="fa fa-gittip padding-right-sm"></i>Tip me on Gittip</a></h3>
+      <h3><a href="https://www.gittip.com/davegandy/"><i class="fa fa-gittip padding-right-sm" aria-hidden="true"></i>Tip me on Gittip</a></h3>
      <p>
        Gittip is a great way to let developers know you appreciate their work.
      </p>
--- a/src/_includes/tests/rotated-flipped-inside-anchor.html
+++ b/src/_includes/tests/rotated-flipped-inside-anchor.html
@ -1,6 +1,6 @@
-<a href="#"><i class="fa fa-flag"></i>&nbsp; normal</a><br>
-<a href="#"><i class="fa fa-flag fa-rotate-90"></i>&nbsp; fa-rotate-90</a><br>
-<a href="#"><i class="fa fa-flag fa-rotate-180"></i>&nbsp; fa-rotate-180</a><br>
-<a href="#"><i class="fa fa-flag fa-rotate-270"></i>&nbsp; fa-rotate-270</a><br>
-<a href="#"><i class="fa fa-flag fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal</a><br>
-<a href="#"><i class="fa fa-flag fa-flip-vertical"></i>&nbsp; fa-flip-vertical</a>
+<a href="#"><i class="fa fa-flag" aria-hidden="true"></i>&nbsp; normal</a><br>
+<a href="#"><i class="fa fa-flag fa-rotate-90" aria-hidden="true"></i>&nbsp; fa-rotate-90</a><br>
+<a href="#"><i class="fa fa-flag fa-rotate-180" aria-hidden="true"></i>&nbsp; fa-rotate-180</a><br>
+<a href="#"><i class="fa fa-flag fa-rotate-270" aria-hidden="true"></i>&nbsp; fa-rotate-270</a><br>
+<a href="#"><i class="fa fa-flag fa-flip-horizontal" aria-hidden="true"></i>&nbsp; fa-flip-horizontal</a><br>
+<a href="#"><i class="fa fa-flag fa-flip-vertical" aria-hidden="true"></i>&nbsp; fa-flip-vertical</a>
--- a/src/_includes/tests/rotated-flipped-inside-btn.html
+++ b/src/_includes/tests/rotated-flipped-inside-btn.html
@ -1,6 +1,6 @@
-<a class="btn btn-default" href="#"><i class="fa fa-flag"></i>&nbsp; normal</a><br>
-<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-90"></i>&nbsp; fa-rotate-90</a><br>
-<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-180"></i>&nbsp; fa-rotate-180</a><br>
-<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-270"></i>&nbsp; fa-rotate-270</a><br>
-<a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal</a><br>
-<a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-vertical"></i>&nbsp; fa-flip-vertical</a>
+<a class="btn btn-default" href="#"><i class="fa fa-flag" aria-hidden="true"></i>&nbsp; normal</a><br>
+<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-90" aria-hidden="true"></i>&nbsp; fa-rotate-90</a><br>
+<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-180" aria-hidden="true"></i>&nbsp; fa-rotate-180</a><br>
+<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-270" aria-hidden="true"></i>&nbsp; fa-rotate-270</a><br>
+<a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-horizontal" aria-hidden="true"></i>&nbsp; fa-flip-horizontal</a><br>
+<a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-vertical" aria-hidden="true"></i>&nbsp; fa-flip-vertical</a>
--- a/src/_includes/tests/rotated-flipped.html
+++ b/src/_includes/tests/rotated-flipped.html
@ -1,6 +1,6 @@
-<i class="fa fa-flag"></i>&nbsp; normal<br>
-<i class="fa fa-flag fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
-<i class="fa fa-flag fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
-<i class="fa fa-flag fa-rotate-270"></i>&nbsp; fa-rotate-270<br>
-<i class="fa fa-flag fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
-<i class="fa fa-flag fa-flip-vertical"></i>&nbsp; fa-flip-vertical
+<i class="fa fa-flag" aria-hidden="true"></i>&nbsp; normal<br>
+<i class="fa fa-flag fa-rotate-90" aria-hidden="true"></i>&nbsp; fa-rotate-90<br>
+<i class="fa fa-flag fa-rotate-180" aria-hidden="true"></i>&nbsp; fa-rotate-180<br>
+<i class="fa fa-flag fa-rotate-270" aria-hidden="true"></i>&nbsp; fa-rotate-270<br>
+<i class="fa fa-flag fa-flip-horizontal" aria-hidden="true"></i>&nbsp; fa-flip-horizontal<br>
+<i class="fa fa-flag fa-flip-vertical" aria-hidden="true"></i>&nbsp; fa-flip-vertical
--- a/src/_includes/tests/stacked-inside-anchor.html
+++ b/src/_includes/tests/stacked-inside-anchor.html
@ -1,20 +1,20 @@
 <p>
  <a href="#">
-    <span class="fa-stack">
+    <span class="fa-stack" aria-hidden="true">
      <i class="fa fa-square fa-stack-2x"></i>
      <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
    </span>
    Twitter Icon
  </a>
  <a href="#">
-    <span class="fa-stack">
+    <span class="fa-stack" aria-hidden="true">
      <i class="fa fa-square fa-stack-2x"></i>
      <i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
    </span>
    Facebook Icon
  </a>
  <a href="#">
-    <span class="fa-stack">
+    <span class="fa-stack" aria-hidden="true">
      <i class="fa fa-square fa-stack-2x"></i>
      <i class="fa fa-github fa-stack-1x fa-inverse"></i>
    </span>
@ -23,21 +23,21 @@
 </p>
 <p>
  <a href="#">
-    <span class="fa-stack">
+    <span class="fa-stack" aria-hidden="true">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
    </span>
    Twitter Icon
  </a>
  <a href="#">
-    <span class="fa-stack">
+    <span class="fa-stack" aria-hidden="true">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
    </span>
    Facebook Icon
  </a>
  <a href="#">
-    <span class="fa-stack">
+    <span class="fa-stack" aria-hidden="true">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-github fa-stack-1x fa-inverse"></i>
    </span>
@ -46,24 +46,24 @@
 </p>
 <p>
  <a href="#">
-    <span class="fa-stack">
+    <span class="fa-stack" aria-hidden="true">
      <i class="fa fa-circle-o fa-stack-2x"></i>
      <i class="fa fa-twitter fa-stack-1x"></i>
    </span>
    Twitter Icon
  </a>
  <a href="#">
-    <span class="fa-stack">
+    <span class="fa-stack" aria-hidden="true">
      <i class="fa fa-circle-o fa-stack-2x"></i>
      <i class="fa fa-facebook-f fa-stack-1x"></i>
    </span>
    Facebook Icon
  </a>
  <a href="#">
-    <span class="fa-stack">
+    <span class="fa-stack" aria-hidden="true">
      <i class="fa fa-circle-o fa-stack-2x"></i>
      <i class="fa fa-github fa-stack-1x"></i>
    </span>
    GitHub Icon
  </a>
-</p>
+</p>
--- a/src/_includes/tests/stacked-with-text.html
+++ b/src/_includes/tests/stacked-with-text.html
@ -1,4 +1,4 @@
-<span class="fa-stack">
+<span class="fa-stack" aria-hidden="true">
  <i class="fa fa-calendar-o fa-stack-2x"></i>
  <span class="fa-stack-1x padding-top-sm">27</span>
 </span>
--- a/src/_includes/tests/stacked.html
+++ b/src/_includes/tests/stacked.html
@ -1,56 +1,56 @@
 <span style="border: solid 1px #d3d3d3; display: inline-block; text-align: center">
-  <span class="fa-stack">
+  <span class="fa-stack" aria-hidden="true">
    <i class="fa fa-square fa-stack-2x"></i>
    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
  </span><br>Center
 </span>
 <hr>
 <p>
-  <span class="fa-stack">
+  <span class="fa-stack" aria-hidden="true">
    <i class="fa fa-square fa-stack-2x"></i>
    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
  </span>
  Twitter Icon
-  <span class="fa-stack">
+  <span class="fa-stack" aria-hidden="true">
    <i class="fa fa-square fa-stack-2x"></i>
    <i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
  </span>
  Facebook Icon
-  <span class="fa-stack">
+  <span class="fa-stack" aria-hidden="true">
    <i class="fa fa-square fa-stack-2x"></i>
    <i class="fa fa-github fa-stack-1x fa-inverse"></i>
  </span>
  GitHub Icon
 </p>
 <p>
-  <span class="fa-stack">
+  <span class="fa-stack" aria-hidden="true">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
  </span>
  Twitter Icon
-  <span class="fa-stack">
+  <span class="fa-stack" aria-hidden="true">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
  </span>
  Facebook Icon
-  <span class="fa-stack">
+  <span class="fa-stack" aria-hidden="true">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-github fa-stack-1x fa-inverse"></i>
  </span>
  GitHub Icon
 </p>
 <p>
-  <span class="fa-stack">
+  <span class="fa-stack" aria-hidden="true">
    <i class="fa fa-circle-o fa-stack-2x"></i>
    <i class="fa fa-twitter fa-stack-1x"></i>
  </span>
  Twitter Icon
-  <span class="fa-stack">
+  <span class="fa-stack" aria-hidden="true">
    <i class="fa fa-circle-o fa-stack-2x"></i>
    <i class="fa fa-facebook-f fa-stack-1x"></i>
  </span>
  Facebook Icon
-  <span class="fa-stack">
+  <span class="fa-stack" aria-hidden="true">
    <i class="fa fa-circle-o fa-stack-2x"></i>
    <i class="fa fa-github fa-stack-1x"></i>
  </span>
--- a/src/_includes/thanks-to.html
+++ b/src/_includes/thanks-to.html
@ -17,7 +17,7 @@
    </div>
    <div class="col-md-4 col-sm-4">
      <p>
-        Thanks to <a href="http://tracking.maxcdn.com/c/148092/3982/378"><i class="fa fa-maxcdn">&nbsp;</i>MaxCDN</a> for providing the excellent
+        Thanks to <a href="http://tracking.maxcdn.com/c/148092/3982/378"><i class="fa fa-maxcdn" aria-hidden="true">&nbsp;</i>MaxCDN</a> for providing the excellent
        <a href="http://www.bootstrapcdn.com/#fontawesome_tab">BootstrapCDN</a>, the fastest and easiest way to
        <a href="{{ page.relative_path }}get-started/#bootstrapcdn">get started</a> with Font Awesome.
      </p>
--- a/src/_includes/why.html
+++ b/src/_includes/why.html
@ -1,40 +1,40 @@
 <section id="why" class="feature-list">
  <div class="row">
    <div class="col-md-4 col-sm-6">
-      <h4><i class="fa fa-flag"></i> One Font, {{ icons | size }} Icons</h4>
+      <h4><i class="fa fa-flag" aria-hidden="true"></i> One Font, {{ icons | size }} Icons</h4>
      In a single collection, Font Awesome is a pictographic language of web-related actions.
    </div>
    <div class="col-md-4 col-sm-6">
-      <h4><i class="fa fa-ban"></i> No JavaScript Required</h4>
+      <h4><i class="fa fa-ban" aria-hidden="true"></i> No JavaScript Required</h4>
      Fewer compatibility concerns because Font Awesome doesn't require JavaScript.
    </div>
    <div class="col-md-4 col-sm-6">
-      <h4><i class="fa fa-arrows-alt"></i> Infinite Scalability</h4>
+      <h4><i class="fa fa-arrows-alt" aria-hidden="true"></i> Infinite Scalability</h4>
      Scalable vector graphics means every icon looks awesome at any size.
    </div>
    <div class="col-md-4 col-sm-6">
-      <h4><i class="fa fa-microphone"></i> Free, as in Speech</h4>
+      <h4><i class="fa fa-microphone" aria-hidden="true"></i> Free, as in Speech</h4>
      Font Awesome is completely free for commercial use. Check out the <a href="{{ page.relative_path }}license/">license</a>.
    </div>
    <div class="col-md-4 col-sm-6">
-      <h4><i class="fa fa-pencil"></i> CSS Control</h4>
+      <h4><i class="fa fa-pencil" aria-hidden="true"></i> CSS Control</h4>
      Easily style icon color, size, shadow, and anything that's possible with CSS.
    </div>
    <div class="col-md-4 col-sm-6">
-      <h4><i class="fa fa-eye"></i> Perfect on Retina Displays</h4>
+      <h4><i class="fa fa-eye" aria-hidden="true"></i> Perfect on Retina Displays</h4>
      Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
    </div>
    <div class="col-md-4 col-sm-6">
-      <h4><i class="fa fa-gamepad"></i> Plays Well with Others</h4>
+      <h4><i class="fa fa-gamepad" aria-hidden="true"></i> Plays Well with Others</h4>
      Originally designed for <a href="{{ site.bootstrap.url }}">Bootstrap</a>, Font Awesome works great with all frameworks.
    </div>
    <div class="col-md-4 col-sm-6">
-      <h4><i class="fa fa-desktop"></i> Desktop Friendly</h4>
+      <h4><i class="fa fa-desktop" aria-hidden="true"></i> Desktop Friendly</h4>
      To use on the desktop or for a complete set of vectors,
      check out the <a href="{{ page.relative_path }}cheatsheet/">cheatsheet</a>.
    </div>
    <div class="col-md-4 col-sm-6">
-      <h4><i class="fa fa-search"></i> Screen Reader Compatible</h4>
+      <h4><i class="fa fa-search" aria-hidden="true"></i> Screen Reader Compatible</h4>
      Font Awesome won't trip up screen readers, unlike other icon fonts.
    </div>
  </div>