diff --git a/doc/includes/alert/examples_alert_aria.html b/doc/includes/alert/examples_alert_aria.html
new file mode 100644
index 0000000000..312f7edebb
--- /dev/null
+++ b/doc/includes/alert/examples_alert_aria.html
@@ -0,0 +1,8 @@
+{{#markdown}}
+```html
+<div id="mainAlert1" data-alert class="alert-box" tabindex="0" aria-live="assertive" role="dialogalert">
+  Your content goes here
+  <button href="#" tabindex="0" class="close" aria-label="Close Alert">&times;</button>
+</div>
+```
+{{/markdown}}
\ No newline at end of file
diff --git a/doc/includes/alert/examples_alert_aria_rendered.html b/doc/includes/alert/examples_alert_aria_rendered.html
new file mode 100644
index 0000000000..2b8a89860e
--- /dev/null
+++ b/doc/includes/alert/examples_alert_aria_rendered.html
@@ -0,0 +1,4 @@
+<div id="mainAlert1" data-alert class="alert-box" tabindex="0" aria-live="assertive" role="dialogalert">
+  Your content goes here
+  <button href="#" tabindex="0" class="close" aria-label="Close Alert">&times;</button>
+</div>
\ No newline at end of file
diff --git a/doc/includes/form/examples_form_labels.html b/doc/includes/form/examples_form_labels.html
index cb4516b50b..83f6a49fde 100755
--- a/doc/includes/form/examples_form_labels.html
+++ b/doc/includes/form/examples_form_labels.html
@@ -8,7 +8,7 @@
     </div>
   </div>
   <div class="row">
-    <div class="large-6 columns">
+    <div class="large-12 columns">
       <div class="row collapse">
         <div class="small-10 columns">
           <input type="text" placeholder="Hex Value">
@@ -18,15 +18,49 @@
         </div>
       </div>
     </div>
+  </div>
+  <div class="row">
     <div class="large-6 columns">
-      <div class="row collapse">
+      <div class="row collapse prefix-radius">
+        <div class="small-3 columns">
+          <span class="prefix">Label</span>
+        </div>
+        <div class="small-9 columns">
+          <input type="text" placeholder="Value">
+        </div>
+      </div>
+    </div>
+    <div class="large-6 columns">
+      <div class="row collapse postfix-radius">
         <div class="small-9 columns">
           <input type="text" placeholder="Value">
         </div>
         <div class="small-3 columns">
-          <span class="postfix radius">Label</span>
+          <span class="postfix">Label</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="large-6 columns">
+      <div class="row collapse prefix-round">
+        <div class="small-3 columns">
+          <a href="#" class="button prefix">Go</a>
+        </div>
+        <div class="small-9 columns">
+          <input type="text" placeholder="Value">
+        </div>
+      </div>
+    </div>
+    <div class="large-6 columns">
+      <div class="row collapse postfix-round">
+        <div class="small-9 columns">
+          <input type="text" placeholder="Value">
+        </div>
+        <div class="small-3 columns">
+          <a href="#" class="button postfix">Go</a>
         </div>
       </div>
     </div>
   </div>
-</form>
\ No newline at end of file
+</form>
diff --git a/doc/includes/form/examples_form_labels_rendered.html b/doc/includes/form/examples_form_labels_rendered.html
index a89c181b39..e07c9bc880 100755
--- a/doc/includes/form/examples_form_labels_rendered.html
+++ b/doc/includes/form/examples_form_labels_rendered.html
@@ -10,7 +10,7 @@
     </div>
   </div>
   <div class="row">
-    <div class="large-6 columns">
+    <div class="large-12 columns">
       <div class="row collapse">
         <div class="small-10 columns">
           <input type="text" placeholder="Hex Value">
@@ -20,17 +20,51 @@
         </div>
       </div>
     </div>
+  </div>
+  <div class="row">
     <div class="large-6 columns">
-      <div class="row collapse">
+      <div class="row collapse prefix-radius">
+        <div class="small-3 columns">
+          <span class="prefix">Label</span>
+        </div>
+        <div class="small-9 columns">
+          <input type="text" placeholder="Value">
+        </div>
+      </div>
+    </div>
+    <div class="large-6 columns">
+      <div class="row collapse postfix-radius">
         <div class="small-9 columns">
           <input type="text" placeholder="Value">
         </div>
         <div class="small-3 columns">
-          <span class="postfix radius">Label</span>
+          <span class="postfix">Label</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="large-6 columns">
+      <div class="row collapse prefix-round">
+        <div class="small-3 columns">
+          <a href="#" class="button prefix">Go</a>
+        </div>
+        <div class="small-9 columns">
+          <input type="text" placeholder="Value">
+        </div>
+      </div>
+    </div>
+    <div class="large-6 columns">
+      <div class="row collapse postfix-round">
+        <div class="small-9 columns">
+          <input type="text" placeholder="Value">
+        </div>
+        <div class="small-3 columns">
+          <a href="#" class="button postfix">Go</a>
         </div>
       </div>
     </div>
   </div>
 </form>
 ```
-{{/markdown}}
\ No newline at end of file
+{{/markdown}}
diff --git a/doc/includes/icon-bar/examples_icon_bar_iconfont.html b/doc/includes/icon-bar/examples_icon_bar_iconfont.html
index 9b6bf6c6d3..17fa2f19c0 100644
--- a/doc/includes/icon-bar/examples_icon_bar_iconfont.html
+++ b/doc/includes/icon-bar/examples_icon_bar_iconfont.html
@@ -18,4 +18,4 @@
   </a>
 </div>
 ```
-{{/markdown}}
+{{/markdown}}
\ No newline at end of file
diff --git a/doc/includes/icon-bar/examples_icon_bar_iconfont_aria.html b/doc/includes/icon-bar/examples_icon_bar_iconfont_aria.html
index 1a6b65ab63..2f3acd0afb 100644
--- a/doc/includes/icon-bar/examples_icon_bar_iconfont_aria.html
+++ b/doc/includes/icon-bar/examples_icon_bar_iconfont_aria.html
@@ -1,21 +1,21 @@
 {{#markdown}}
 ```html
-<div class="icon-bar five-up">
-  <a class="item" aria-label="Home">
+<div class="icon-bar five-up" role="navigation">
+  <a class="item" role="button" tabindex="0" aria-label="home">
     <i class="fi-home"></i>
   </a>
-  <a class="item" aria-label="Bookmark">
+  <a class="item" role="button" tabindex="0" aria-label="Bookmark">
     <i class="fi-bookmark"></i>
   </a>
-  <a class="item" aria-label="Information">
+  <a class="item" role="button" tabindex="0" aria-label="Information">
     <i class="fi-info"></i>
   </a>
-  <a class="item" aria-label="Mail">
+  <a class="item" role="button" tabindex="0" aria-label="Mail">
     <i class="fi-mail"></i>
   </a>
-  <a class="item" aria-label="Like">
-    <i class="fi-like" ></i>
+  <a class="item" role="button" tabindex="0" aria-label="Like">
+    <i class="fi-like"></i>
   </a>
 </div>
 ```
-{{/markdown}}
+{{/markdown}}
\ No newline at end of file
diff --git a/doc/includes/icon-bar/examples_icon_bar_iconfont_aria_rendered.html b/doc/includes/icon-bar/examples_icon_bar_iconfont_aria_rendered.html
index 211e33b05b..f7b330b30e 100644
--- a/doc/includes/icon-bar/examples_icon_bar_iconfont_aria_rendered.html
+++ b/doc/includes/icon-bar/examples_icon_bar_iconfont_aria_rendered.html
@@ -1,17 +1,17 @@
-<div class="icon-bar five-up">
-  <a class="item" aria-label="Home">
+<div class="icon-bar five-up" role="navigation">
+  <a class="item" role="button" tabindex="0" aria-label="home">
     <i class="fi-home"></i>
   </a>
-  <a class="item" aria-label="Bookmark">
+  <a class="item" role="button" tabindex="0" aria-label="Bookmark">
     <i class="fi-bookmark"></i>
   </a>
-  <a class="item" aria-label="Information">
+  <a class="item" role="button" tabindex="0" aria-label="Information">
     <i class="fi-info"></i>
   </a>
-  <a class="item" aria-label="Mail">
+  <a class="item" role="button" tabindex="0" aria-label="Mail">
     <i class="fi-mail"></i>
   </a>
-  <a class="item" aria-label="Like">
-    <i class="fi-like" ></i>
+  <a class="item" role="button" tabindex="0" aria-label="Like">
+    <i class="fi-like"></i>
   </a>
 </div>
\ No newline at end of file
diff --git a/doc/includes/icon-bar/examples_icon_bar_text_aria.html b/doc/includes/icon-bar/examples_icon_bar_text_aria.html
new file mode 100644
index 0000000000..217dd07adf
--- /dev/null
+++ b/doc/includes/icon-bar/examples_icon_bar_text_aria.html
@@ -0,0 +1,26 @@
+{{#markdown}}
+```html
+<div class="icon-bar five-up" role="navigation">
+  <a class="item" aria-labeledby="#itemlabel1">
+    <img src="../assets/img/images/fi-home.svg" >
+    <label id='itemlabel1'>Home</label>
+  </a>
+  <a class="item" aria-labeledby="#itemlabel2">
+    <img src="../assets/img/images/fi-bookmark.svg" >
+    <label id='itemlabel2'>Bookmark</label>
+  </a>
+  <a class="item" aria-labeledby="#itemlabel3">
+    <img src="../assets/img/images/fi-info.svg" >
+    <label id='itemlabel3'>Info</label>
+  </a>
+  <a class="item" aria-labeledby="#itemlabel4">
+    <img src="../assets/img/images/fi-mail.svg" >
+    <label id='itemlabel4'>Mail</label>
+  </a>
+  <a class="item" aria-labeledby="#itemlabel5">
+    <img src="../assets/img/images/fi-like.svg" >
+    <label id='itemlabel5'>Like</label>
+  </a>
+</div>
+```
+{{/markdown}}
\ No newline at end of file
diff --git a/doc/includes/icon-bar/examples_icon_bar_text_aria_rendered.html b/doc/includes/icon-bar/examples_icon_bar_text_aria_rendered.html
new file mode 100644
index 0000000000..b8a1a8ec18
--- /dev/null
+++ b/doc/includes/icon-bar/examples_icon_bar_text_aria_rendered.html
@@ -0,0 +1,22 @@
+<div class="icon-bar five-up" role="navigation">
+  <a class="item" role="button" tabindex="0" aria-labeledby="#itemlabel1">
+    <img src="../assets/img/images/fi-home.svg" >
+    <label id='itemlabel1'>Home</label>
+  </a>
+  <a class="item" role="button" tabindex="0" aria-labeledby="#itemlabel2">
+    <img src="../assets/img/images/fi-bookmark.svg" >
+    <label id='itemlabel2'>Bookmark</label>
+  </a>
+  <a class="item" role="button" tabindex="0" aria-labeledby="#itemlabel3">
+    <img src="../assets/img/images/fi-info.svg" >
+    <label id='itemlabel3'>Info</label>
+  </a>
+  <a class="item" role="button" tabindex="0" aria-labeledby="#itemlabel4">
+    <img src="../assets/img/images/fi-mail.svg" >
+    <label id='itemlabel4'>Mail</label>
+  </a>
+  <a class="item" role="button" tabindex="0" aria-labeledby="#itemlabel5">
+    <img src="../assets/img/images/fi-like.svg" >
+    <label id='itemlabel5'>Like</label>
+  </a>
+</div>
\ No newline at end of file
diff --git a/doc/includes/kitchen/examples_kitchen_type.html b/doc/includes/kitchen/examples_kitchen_type.html
index 72a6fed58f..cad0b6b985 100755
--- a/doc/includes/kitchen/examples_kitchen_type.html
+++ b/doc/includes/kitchen/examples_kitchen_type.html
@@ -1,3 +1,5 @@
+<div class="type-demo">
+
 <h1>h1. This is a very large header.</h1>
 <h2>h2. This is a large header.</h2>
 <h3>h3. This is a medium header.</h3>
@@ -65,4 +67,6 @@ <h5>Vcard</h5>
   <li class="locality">Caprica City</li>
   <li><span class="state">Caprica</span>, <span class="zip">12345</span></li>
   <li class="email"><a href="#">g.baltar@example.com</a></li>
-</ul>
\ No newline at end of file
+</ul>
+
+</div>
\ No newline at end of file
diff --git a/doc/includes/range_sliders/examples_slider_variables.html b/doc/includes/range_sliders/examples_slider_variables.html
index f21a493479..27a6c7f008 100755
--- a/doc/includes/range_sliders/examples_slider_variables.html
+++ b/doc/includes/range_sliders/examples_slider_variables.html
@@ -12,6 +12,7 @@
 $range-slider-radius: $global-radius;
 $range-slider-round: $global-rounded;
 $range-slider-bar-bg-color: #fafafa;
+$range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness: -1%);
 
 // Vertical bar styles
 $range-slider-vertical-bar-width: rem-calc(16);
diff --git a/doc/includes/switch/examples_switch_basic_aria.html b/doc/includes/switch/examples_switch_basic_aria.html
new file mode 100644
index 0000000000..cb867de51d
--- /dev/null
+++ b/doc/includes/switch/examples_switch_basic_aria.html
@@ -0,0 +1,4 @@
+<fieldset class="switch" tabindex="0">
+  <input id="exampleCheckboxSwitch4" type="checkbox">
+  <label for="exampleCheckboxSwitch4"></label>
+</fieldset>
diff --git a/doc/includes/switch/examples_switch_basic_aria_rendered.html b/doc/includes/switch/examples_switch_basic_aria_rendered.html
new file mode 100644
index 0000000000..6027584ae3
--- /dev/null
+++ b/doc/includes/switch/examples_switch_basic_aria_rendered.html
@@ -0,0 +1,8 @@
+{{#markdown}}
+```html
+<fieldset class="switch" tabindex="0">
+  <input id="exampleCheckboxSwitch4" type="checkbox">
+  <label for="exampleCheckboxSwitch4"></label>
+</fieldset>
+```
+{{/markdown}}
diff --git a/doc/includes/tabs/examples_tabs_basic.html b/doc/includes/tabs/examples_tabs_basic.html
index 1b22c0991e..f406ece3ea 100755
--- a/doc/includes/tabs/examples_tabs_basic.html
+++ b/doc/includes/tabs/examples_tabs_basic.html
@@ -1,20 +1,20 @@
-<ul class="tabs" data-tab>
-  <li class="tab-title active"><a href="#panel2-1">Tab 1</a></li>
-  <li class="tab-title"><a href="#panel2-2">Tab 2</a></li>
-  <li class="tab-title"><a href="#panel2-3">Tab 3</a></li>
-  <li class="tab-title"><a href="#panel2-4">Tab 4</a></li>
+<ul class="tabs" data-tab role="tablist">
+  <li class="tab-title active" role="presentational" ><a href="#panel2-1" role="tab" tabindex="0" aria-selected="true" controls="panel2-1">Tab 1</a></li>
+  <li class="tab-title" role="presentational" ><a href="#panel2-2" role="tab" tabindex="0"aria-selected="false" controls="panel2-2">Tab 2</a></li>
+  <li class="tab-title" role="presentational"><a href="#panel2-3" role="tab" tabindex="0" aria-selected="false" controls="panel2-3">Tab 3</a></li>
+  <li class="tab-title" role="presentational" ><a href="#panel2-4" role="tab" tabindex="0" aria-selected="false" controls="panel2-4">Tab 4</a></li>
 </ul>
 <div class="tabs-content">
-  <div class="content active" id="panel2-1">
-    <p>First panel content goes here...</p>
-  </div>
-  <div class="content" id="panel2-2">
-    <p>Second panel content goes here...</p>
-  </div>
-  <div class="content" id="panel2-3">
-    <p>Third panel content goes here...</p>
-  </div>
-  <div class="content" id="panel2-4">
-    <p>Fourth panel content goes here...</p>
-  </div>
-</div>
\ No newline at end of file
+  <section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1">
+    <h2>First panel content goes here...</h2>
+  </section>
+  <section role="tabpanel" aria-hidden="true" class="content" id="panel2-2">
+    <h2>Second panel content goes here...</h2>
+  </section>
+  <section role="tabpanel" aria-hidden="true" class="content" id="panel2-3">
+    <h2>Third panel content goes here...</h2>
+  </section>
+  <section role="tabpanel" aria-hidden="true" class="content" id="panel2-4">
+    <h2>Fourth panel content goes here...</h2>
+  </section>
+</div>
diff --git a/doc/includes/tabs/examples_tabs_basic_rendered.html b/doc/includes/tabs/examples_tabs_basic_rendered.html
index 33df1e479b..f429836e88 100755
--- a/doc/includes/tabs/examples_tabs_basic_rendered.html
+++ b/doc/includes/tabs/examples_tabs_basic_rendered.html
@@ -1,20 +1,24 @@
-<ul class="tabs" data-tab>
-  <li class="tab-title active"><a href="#panel2-1">Tab 1</a></li>
-  <li class="tab-title"><a href="#panel2-2">Tab 2</a></li>
-  <li class="tab-title"><a href="#panel2-3">Tab 3</a></li>
-  <li class="tab-title"><a href="#panel2-4">Tab 4</a></li>
+<ul class="tabs" data-tab role="tablist">
+  <li class="tab-title active" role="presentational"><a href="#panel2-1" role="tab" tabindex="0" aria-selected="true" controls="panel2-1">Tab 1</a></li>
+  <li class="tab-title" role="presentational"><a href="#panel2-2" role="tab" tabindex="0" aria-selected="false" controls="panel2-2">Tab 2</a></li>
+  <li class="tab-title" role="presentational"><a href="#panel2-3" role="tab" tabindex="0" aria-selected="false" controls="panel2-3">Tab 3</a></li>
+  <li class="tab-title" role="presentational"><a href="#panel2-4" role="tab" tabindex="0" aria-selected="false" controls="panel2-4">Tab 4</a></li>
 </ul>
 <div class="tabs-content">
-  <div class="content active" id="panel2-1">
-    <p>This is the first panel of the basic tab example. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, pariatur accusantium magni cumque vel voluptates illum repellendus sed dignissimos magnam! Deleniti, fugit tempore quibusdam molestias iusto asperiores incidunt sint nemo?</p>
-  </div>
-  <div class="content" id="panel2-2">
-    <p>This is the second panel of the basic tab example. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, deleniti nam eaque sunt excepturi rerum hic labore tempora! Nihil, dolorem blanditiis ipsa veritatis minima dolores consequuntur deserunt sed culpa modi!</p>
-  </div>
-  <div class="content" id="panel2-3">
-    <p>This is the third panel of the basic tab example. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, in, sunt, dolorem corrupti officia earum veritatis numquam provident exercitationem non impedit laborum dolor at repellat deleniti. Vero nobis quas tempore.</p>
-  </div>
-  <div class="content" id="panel2-4">
-    <p>This is the fourth panel of the basic tab example. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, veritatis, a, nisi, repellat fugit animi consectetur voluptas eligendi et iure voluptatibus neque ullam asperiores quae laboriosam praesentium suscipit amet deserunt.</p>
-  </div>
-</div>
\ No newline at end of file
+  <section id="panel2-1" role="tabpanel" aria-hidden="false" class="content active" >
+    <h2>This is the first panel of the basic tab example.</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, pariatur accusantium magni cumque vel voluptates illum repellendus sed dignissimos magnam! Deleniti, fugit tempore quibusdam molestias iusto asperiores incidunt sint nemo?</p>
+  </section>
+  <section id="panel2-2" role="tabpanel" aria-hidden="true" class="content">
+    <h2>This is the second panel of the basic tab example.</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, deleniti nam eaque sunt excepturi rerum hic labore tempora! Nihil, dolorem blanditiis ipsa veritatis minima dolores consequuntur deserunt sed culpa modi!</p>
+  </section>
+  <section id="panel2-3" role="tabpanel" aria-hidden="true" class="content">
+    <h2>This is the third panel of the basic tab example.</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, in, sunt, dolorem corrupti officia earum veritatis numquam provident exercitationem non impedit laborum dolor at repellat deleniti. Vero nobis quas tempore.</p>
+  </section>
+  <section id="panel2-4" role="tabpanel" aria-hidden="true" class="content" >
+   <h2> This is the fourth panel of the basic tab example.</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, veritatis, a, nisi, repellat fugit animi consectetur voluptas eligendi et iure voluptatibus neque ullam asperiores quae laboriosam praesentium suscipit amet deserunt.</p>
+  </section>
+</div>
diff --git a/doc/includes/tabs/examples_tabs_deep_linking.html b/doc/includes/tabs/examples_tabs_deep_linking.html
index e4e364c12a..59d49dec4f 100755
--- a/doc/includes/tabs/examples_tabs_deep_linking.html
+++ b/doc/includes/tabs/examples_tabs_deep_linking.html
@@ -1,13 +1,19 @@
-<dl class="tabs" data-tab data-options="deep_linking: true">
-  <dd class="active"><a href="#tabs-deeplink-1">Tab 1</a></dd>
-  <dd><a href="#tabs-deeplink-2">Tab 2</a></dd>
-</dl>
+<ul class="tabs" data-tab role="tablist" data-options="deep-linking: true">
+  <li class="tab-title active" role="presentational"><a href="#tabs-deeplink-1" role="tab" tabindex="0" aria-selected="true" controls="tabs-deeplink-1">Tab 1</a></li>
+  <li class="tab-title active" role="presentational"><a href="#tabs-deeplink-2" role="tab" tabindex="0" aria-selected="true" controls="tabs-deeplink-2">Tab 2</a></li>
+  <li class="tab-title active" role="presentational"><a href="#tabs-deeplink-3" role="tab" tabindex="0" aria-selected="true" controls="tabs-deeplink-3">Tab 3</a></li>
+</ul>
 <div class="tabs-content">
-  <div class="content active" id="tabs-deeplink-1">
+  <section id="tabs-deeplink-1" role="tabpanel" aria-hidden="false" class="content active">
+    <h2>First Panel Header</h2>
     <p>First panel content goes here...</p>
-  </div>
-  <div class="content" id="tabs-deeplink-2">
-    <p>Second panel content goes here...</p>
-    <p id="tabs-deeplink-content-2">Test content</p>
-  </div>
+  </section>
+  <section id="tabs-deeplink-2"role="tabpanel" aria-hidden="true" class="content" >
+    <h2>Second Panel Header</h2>
+    <p id="tabs-deeplink-content-2"> Second panel content goes here...</p>
+  </section>
+  <section id="tabs-deeplink-3"role="tabpanel" aria-hidden="true" class="content" >
+    <h2>Third Panel Header</h2>
+    <p> Third panel content goes here...</p>
+  </section>
 </div>
diff --git a/doc/includes/tabs/examples_tabs_intro.html b/doc/includes/tabs/examples_tabs_intro.html
index 999f7edf47..a2bd3fab26 100755
--- a/doc/includes/tabs/examples_tabs_intro.html
+++ b/doc/includes/tabs/examples_tabs_intro.html
@@ -1,20 +1,20 @@
-<ul class="radius tabs" data-tab>
-  <li class="tab-title active"><a href="#panel1">Tab 1</a></li>
-  <li class="tab-title"><a href="#panel2">Tab 2</a></li>
-  <li class="tab-title"><a href="#panel3">Tab 3</a></li>
-  <li class="tab-title"><a href="#panel4">Tab 4</a></li>
+<ul class="tabs" data-tab role="tablist">
+  <li class="tab-title active" role="presentational"><a href="#panel2-1" role="tab" tabindex="0" aria-selected="true" controls="panel2-1">Tab 1</a></li>
+  <li class="tab-title" role="presentational"><a href="#panel2-2" role="tab" tabindex="0" aria-selected="false" controls="panel2-2">Tab 2</a></li>
+  <li class="tab-title" role="presentational"><a href="#panel2-3" role="tab" tabindex="0" aria-selected="false" controls="panel2-3">Tab 3</a></li>
+  <li class="tab-title" role="presentational"><a href="#panel2-4" role="tab" tabindex="0" aria-selected="false" controls="panel2-4">Tab 4</a></li>
 </ul>
 <div class="tabs-content">
-  <div class="content active" id="panel1">
-    <p>First panel content goes here. Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-  </div>
-  <div class="content" id="panel2">
-    <p>Second panel content goes here. Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-  </div>
-  <div class="content" id="panel3">
-    <p>Third panel content goes here. Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-  </div>
-  <div class="content" id="panel4">
-    <p>Fourth panel content goes here. Panel 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-  </div>
-</div>
\ No newline at end of file
+  <section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1">
+    <p>This is the first panel of the basic tab example. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, pariatur accusantium magni cumque vel voluptates illum repellendus sed dignissimos magnam! Deleniti, fugit tempore quibusdam molestias iusto asperiores incidunt sint nemo?</p>
+  </section>
+  <section role="tabpanel" aria-hidden="true" class="content" id="panel2-2">
+    <p>This is the second panel of the basic tab example. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, deleniti nam eaque sunt excepturi rerum hic labore tempora! Nihil, dolorem blanditiis ipsa veritatis minima dolores consequuntur deserunt sed culpa modi!</p>
+  </section>
+  <section role="tabpanel" aria-hidden="true" class="content" id="panel2-3">
+    <p>This is the third panel of the basic tab example. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, in, sunt, dolorem corrupti officia earum veritatis numquam provident exercitationem non impedit laborum dolor at repellat deleniti. Vero nobis quas tempore.</p>
+  </section>
+  <section role="tabpanel" aria-hidden="true" class="content" id="panel2-4">
+    <p>This is the fourth panel of the basic tab example. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, veritatis, a, nisi, repellat fugit animi consectetur voluptas eligendi et iure voluptatibus neque ullam asperiores quae laboriosam praesentium suscipit amet deserunt.</p>
+  </section>
+</div>
diff --git a/doc/includes/tabs/examples_tabs_vertical_basic.html b/doc/includes/tabs/examples_tabs_vertical_basic.html
index 2958395262..1d2d2cb869 100755
--- a/doc/includes/tabs/examples_tabs_vertical_basic.html
+++ b/doc/includes/tabs/examples_tabs_vertical_basic.html
@@ -1,20 +1,20 @@
-<ul class="tabs vertical" data-tab>
-  <li class="tab-title active"><a href="#panel1a">Tab 1</a></li>
-  <li class="tab-title"><a href="#panel2a">Tab 2</a></li>
-  <li class="tab-title"><a href="#panel3a">Tab 3</a></li>
-  <li class="tab-title"><a href="#panel4a">Tab 4</a></li>
+<ul class="tabs" data-tab role="tablist">
+  <li class="tab-title active" role="presentational"><a href="#panel2-1" role="tab" tabindex="0" aria-selected="true" controls="panel2-1">Tab 1</a></li>
+  <li class="tab-title" role="presentational"><a href="#panel2-2" role="tab" tabindex="0" aria-selected="false" controls="panel2-2">Tab 2</a></li>
+  <li class="tab-title" role="presentational"><a href="#panel2-3" role="tab" tabindex="0" aria-selected="false" controls="panel2-3">Tab 3</a></li>
+  <li class="tab-title" role="presentational"><a href="#panel2-4" role="tab" tabindex="0" aria-selected="false" controls="panel2-4">Tab 4</a></li>
 </ul>
 <div class="tabs-content vertical">
-  <div class="content active" id="panel1a">
-    <p>Panel 1 content goes here.</p>
-  </div>
-  <div class="content" id="panel2a">
-    <p>Panel 2 content goes here.</p>
-  </div>
-  <div class="content" id="panel3a">
-    <p>Panel 3 content goes here.</p>
-  </div>
-  <div class="content" id="panel4a">
-    <p>Panel 4 content goes here.</p>
-  </div>
+  <section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1">
+    <p>First panel content goes here...</p>
+  </section>
+  <section role="tabpanel" aria-hidden="true" class="content" id="panel2-2">
+    <p>Second panel content goes here...</p>
+  </section>
+  <section role="tabpanel" aria-hidden="true" class="content" id="panel2-3">
+    <p>Third panel content goes here...</p>
+  </section>
+  <section role="tabpanel" aria-hidden="true" class="content" id="panel2-4">
+    <p>Fourth panel content goes here...</p>
+  </section>
 </div>
diff --git a/doc/includes/tabs/examples_tabs_vertical_basic_rendered.html b/doc/includes/tabs/examples_tabs_vertical_basic_rendered.html
index 626a1d460d..dc9b757799 100755
--- a/doc/includes/tabs/examples_tabs_vertical_basic_rendered.html
+++ b/doc/includes/tabs/examples_tabs_vertical_basic_rendered.html
@@ -1,20 +1,20 @@
-<ul class="tabs vertical" data-tab>
-  <li class="tab-title active"><a href="#panel1a">Tab 1</a></li>
-  <li class="tab-title"><a href="#panel2a">Tab 2</a></li>
-  <li class="tab-title"><a href="#panel3a">Tab 3</a></li>
-  <li class="tab-title"><a href="#panel4a">Tab 4</a></li>
+<ul class="tabs vertical" data-tab role="tablist">
+  <li class="tab-title active" role="presentational"><a href="#panel2-1" role="tab" tabindex="0" aria-selected="true" controls="panel2-1">Tab 1</a></li>
+  <li class="tab-title" role="presentational"><a href="#panel2-2" role="tab" tabindex="0" aria-selected="false" controls="panel2-2">Tab 2</a></li>
+  <li class="tab-title" role="presentational"><a href="#panel2-3" role="tab" tabindex="0" aria-selected="false" controls="panel2-3">Tab 3</a></li>
+  <li class="tab-title" role="presentational"><a href="#panel2-4" role="tab" tabindex="0" aria-selected="false" controls="panel2-4">Tab 4</a></li>
 </ul>
-<div class="tabs-content vertical">
-  <div class="content active" id="panel1a">
-    <p>Panel 1 content goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, culpa, eos, laboriosam delectus sequi asperiores labore fuga ex molestias a assumenda nesciunt libero consequatur nulla deserunt eveniet ea nobis magni!</p>
-  </div>
-  <div class="content" id="panel2a">
-    <p>Panel 2 content goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, quos ullam soluta pariatur optio magni repudiandae obcaecati quidem consequuntur possimus quam dicta culpa quia aut odit placeat ut amet nesciunt.</p>
-  </div>
-  <div class="content" id="panel3a">
-    <p>Panel 3 content goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, possimus, ipsa, aperiam placeat quod doloribus corporis necessitatibus enim sapiente iusto nulla asperiores repudiandae adipisci ea consequuntur dolorem similique recusandae quia.</p>
-  </div>
-  <div class="content" id="panel4a">
-    <p>Panel 4 content goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, quo voluptas ratione assumenda beatae tenetur tempora accusamus quisquam rem ad deserunt magni asperiores voluptatibus aperiam neque iste sit recusandae aspernatur!</p>
-  </div>
+<div class="tabs-content">
+  <section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1">
+    <p>This is the first panel of the basic tab example. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, pariatur accusantium magni cumque vel voluptates illum repellendus sed dignissimos magnam! Deleniti, fugit tempore quibusdam molestias iusto asperiores incidunt sint nemo?</p>
+  </section>
+  <section role="tabpanel" aria-hidden="true" class="content" id="panel2-2">
+    <p>This is the second panel of the basic tab example. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, deleniti nam eaque sunt excepturi rerum hic labore tempora! Nihil, dolorem blanditiis ipsa veritatis minima dolores consequuntur deserunt sed culpa modi!</p>
+  </section>
+  <section role="tabpanel" aria-hidden="true" class="content" id="panel2-3">
+    <p>This is the third panel of the basic tab example. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, in, sunt, dolorem corrupti officia earum veritatis numquam provident exercitationem non impedit laborum dolor at repellat deleniti. Vero nobis quas tempore.</p>
+  </section>
+  <section role="tabpanel" aria-hidden="true" class="content" id="panel2-4">
+    <p>This is the fourth panel of the basic tab example. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, veritatis, a, nisi, repellat fugit animi consectetur voluptas eligendi et iure voluptatibus neque ullam asperiores quae laboriosam praesentium suscipit amet deserunt.</p>
+  </section>
 </div>
diff --git a/doc/includes/tooltips/examples_tooltips_basic.html b/doc/includes/tooltips/examples_tooltips_basic.html
index 31da7023b3..de0445407c 100755
--- a/doc/includes/tooltips/examples_tooltips_basic.html
+++ b/doc/includes/tooltips/examples_tooltips_basic.html
@@ -1 +1 @@
-<span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">Hover on desktop or touch me on mobile!</span>
\ No newline at end of file
+<span data-tooltip aria-haspopup="true" class="has-tip" title="Tooltips are awesome, you should totally use them!">Hover on desktop or touch me on mobile!</span>
\ No newline at end of file
diff --git a/doc/includes/tooltips/examples_tooltips_basic_rendered.html b/doc/includes/tooltips/examples_tooltips_basic_rendered.html
index 814c798129..6f0d571c25 100755
--- a/doc/includes/tooltips/examples_tooltips_basic_rendered.html
+++ b/doc/includes/tooltips/examples_tooltips_basic_rendered.html
@@ -1,5 +1,5 @@
 {{#markdown}}
 ```html
-<span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>
+<span data-tooltip aria-haspopup="true" class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>
 ```
 {{/markdown}}
\ No newline at end of file
diff --git a/doc/includes/tooltips/examples_tooltips_disable_touch.html b/doc/includes/tooltips/examples_tooltips_disable_touch.html
index 1d93457370..5ce2cf7e21 100755
--- a/doc/includes/tooltips/examples_tooltips_disable_touch.html
+++ b/doc/includes/tooltips/examples_tooltips_disable_touch.html
@@ -1,5 +1,5 @@
 {{#markdown}}
 ```html
-<span data-tooltip data-options="disable_for_touch:true" class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>
+<span data-tooltip aria-haspopup="true" data-options="disable_for_touch:true" class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>
 ```
 {{/markdown}}
\ No newline at end of file
diff --git a/doc/includes/tooltips/examples_tooltips_intro.html b/doc/includes/tooltips/examples_tooltips_intro.html
index b26f8f7929..9e7731b663 100755
--- a/doc/includes/tooltips/examples_tooltips_intro.html
+++ b/doc/includes/tooltips/examples_tooltips_intro.html
@@ -1,3 +1,3 @@
 <a name="tooltips"></a>
 
-<p>The tooltips can be positioned on the <span data-tooltip class="has-tip" data-width="210" title="I'm on bottom and the default position.">"tip-bottom"</span>, which is the default position, <span data-tooltip class="has-tip tip-top noradius" data-width="210" title="I'm on the top and I'm not rounded!">"tip-top" (hehe)</span>, <span data-tooltip="left" class="has-tip tip-left" data-width="90" title="I'm on the left!">"tip-left"</span>, or <span data-tooltip="right" class="has-tip tip-right" data-width="120" title="I'm on the right!">"tip-right"</span> of the target element by adding the appropriate class to them. You can even add your own custom class to style each tip differently. <strong>On a small device, the tooltips are full-width and bottom aligned.</strong></p>
\ No newline at end of file
+<p>The tooltips can be positioned on the <span data-tooltip aria-haspopup="true" class="has-tip" data-width="210" title="I'm on bottom and the default position.">"tip-bottom"</span>, which is the default position, <span data-tooltip aria-haspopup="true" class="has-tip tip-top noradius" data-width="210" title="I'm on the top and I'm not rounded!">"tip-top" (hehe)</span>, <span data-tooltip aria-haspopup="true"="left" class="has-tip tip-left" data-width="90" title="I'm on the left!">"tip-left"</span>, or <span data-tooltip aria-haspopup="true"="right" class="has-tip tip-right" data-width="120" title="I'm on the right!">"tip-right"</span> of the target element by adding the appropriate class to them. You can even add your own custom class to style each tip differently. <strong>On a small device, the tooltips are full-width and bottom aligned.</strong></p>
\ No newline at end of file
diff --git a/doc/includes/tooltips/examples_tooltips_javascript_required.html b/doc/includes/tooltips/examples_tooltips_javascript_required.html
index b40376fa89..7fa83849f3 100755
--- a/doc/includes/tooltips/examples_tooltips_javascript_required.html
+++ b/doc/includes/tooltips/examples_tooltips_javascript_required.html
@@ -1,5 +1,5 @@
 {{#markdown}}
 ```html
-<span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">...</span>
+<span data-tooltip aria-haspopup="true" class="has-tip" title="Tooltips are awesome, you should totally use them!">...</span>
 ```
 {{/markdown}}
\ No newline at end of file
diff --git a/doc/includes/tooltips/examples_tooltips_show.html b/doc/includes/tooltips/examples_tooltips_show.html
index d3147e4ab8..72659ee92c 100755
--- a/doc/includes/tooltips/examples_tooltips_show.html
+++ b/doc/includes/tooltips/examples_tooltips_show.html
@@ -1 +1 @@
-<h3 class="subheader">Now tooltips have data-options! This tooltip will only <span data-tooltip class="has-tip" data-options="show_on: large" title="Large Screen Sizes">show on</span>.</h3>
\ No newline at end of file
+<h3 class="subheader">Now tooltips have data-options! This tooltip will only <span data-tooltip aria-haspopup="true" class="has-tip" data-options="show_on: large" title="Large Screen Sizes">show on</span>.</h3>
\ No newline at end of file
diff --git a/doc/includes/tooltips/examples_tooltips_show_rendered.html b/doc/includes/tooltips/examples_tooltips_show_rendered.html
index 08a074a036..8d0a7b4509 100755
--- a/doc/includes/tooltips/examples_tooltips_show_rendered.html
+++ b/doc/includes/tooltips/examples_tooltips_show_rendered.html
@@ -1,5 +1,5 @@
 {{#markdown}}
 ```html
-<span data-tooltip class="has-tip" data-options="show_on:large" title="Large Screen Sizes">show on</span>
+<span data-tooltip aria-haspopup="true" class="has-tip" data-options="show_on:large" title="Large Screen Sizes">show on</span>
 ```
 {{/markdown}}
\ No newline at end of file
diff --git a/doc/includes/topbar/examples_topbar_clickable.html b/doc/includes/topbar/examples_topbar_clickable.html
index c395edfde7..cc39e5c355 100755
--- a/doc/includes/topbar/examples_topbar_clickable.html
+++ b/doc/includes/topbar/examples_topbar_clickable.html
@@ -1,4 +1,4 @@
-<nav class="top-bar" data-topbar data-options="is_hover: false">
+<nav class="top-bar" data-topbar role="navigation" data-options="is_hover: false">
   <ul class="title-area">
     <!-- Title Area -->
     <li class="name">
diff --git a/doc/includes/topbar/examples_topbar_default.html b/doc/includes/topbar/examples_topbar_default.html
index 882f4c8ecc..f22357c4b1 100755
--- a/doc/includes/topbar/examples_topbar_default.html
+++ b/doc/includes/topbar/examples_topbar_default.html
@@ -1,4 +1,4 @@
-<nav class="top-bar" data-topbar>
+<nav class="top-bar" data-topbar role="navigation">
   <ul class="title-area">
     <li class="name">
       <h1><a href="#">My Site</a></h1>
diff --git a/doc/includes/topbar/examples_topbar_mobile_parent_links.html b/doc/includes/topbar/examples_topbar_mobile_parent_links.html
index d4fdc6016e..3525909e7e 100644
--- a/doc/includes/topbar/examples_topbar_mobile_parent_links.html
+++ b/doc/includes/topbar/examples_topbar_mobile_parent_links.html
@@ -1,4 +1,4 @@
-<nav class="top-bar" data-topbar>
+<nav class="top-bar" data-topbar role="navigation">
   <ul class="title-area">
     <!-- Title Area -->
     <li class="name">
diff --git a/doc/includes/topbar/examples_topbar_sticky.html b/doc/includes/topbar/examples_topbar_sticky.html
index a19885b2e4..28d8bcbe12 100755
--- a/doc/includes/topbar/examples_topbar_sticky.html
+++ b/doc/includes/topbar/examples_topbar_sticky.html
@@ -1,5 +1,5 @@
 <div class="sticky">
-  <nav class="top-bar" data-topbar  data-topbar data-options="sticky_on: large">
+  <nav class="top-bar" data-topbar role="navigation" data-topbar data-options="sticky_on: large">
   <ul class="title-area">
     <!-- Title Area -->
     <li class="name">
diff --git a/doc/pages/components/abide.html b/doc/pages/components/abide.html
index 690415a57b..e2dbf9cffa 100755
--- a/doc/pages/components/abide.html
+++ b/doc/pages/components/abide.html
@@ -134,6 +134,23 @@ <h3 class="subheader">Abide is an HTML5 form validation library that supports th
 
 ***
 
+## Accessibility
+
+For the most part, Abide is accessible on its own. Our JavaScript will add the attribute `aria-invalid` to any form fields deemed invalid. However, to properly connect errors to form fields, you'll need to do a little extra work. The error's container should have a unique ID, which our JavaScript will use to bind the error message to its input if there's an error.
+
+```html
+<form data-abide>
+  <div class="name-field">
+    <label>Your name <small>required</small>
+      <input type="text" required pattern="[a-zA-Z]+">
+    </label>
+    <small class="error" id="nameError">Name is required and must be a string.</small>
+  </div>
+</form>
+```
+
+***
+
 ## Using the Javascript
 
 <div class="panel">
diff --git a/doc/pages/components/alert_boxes.html b/doc/pages/components/alert_boxes.html
index a397841a50..91efe6e539 100755
--- a/doc/pages/components/alert_boxes.html
+++ b/doc/pages/components/alert_boxes.html
@@ -99,6 +99,28 @@ <h4>Rendered HTML</h4>
   </div>
 </div>
 
+***
+
+## Accessibility
+
+To make your alerts conform to accessibility standards, use the markup below, which adds a handful of ARIA attributes to the alert container, and uses the `<button>` tag for the close button instead of `<a>`.
+
+<div class="row">
+  <div class="large-6 columns">
+
+    <h4>HTML</h4>
+
+    {{> examples_alert_aria}}
+
+  </div>
+  <div class="large-6 columns">
+    <h4>Rendered HTML</h4>
+
+    {{> examples_alert_aria_rendered}}
+
+  </div>
+</div>
+
 ---
 
 ## Customize with Sass
diff --git a/doc/pages/components/clearing.html b/doc/pages/components/clearing.html
index d258a21de7..c65cd1f3cd 100755
--- a/doc/pages/components/clearing.html
+++ b/doc/pages/components/clearing.html
@@ -48,6 +48,10 @@ <h4>HTML</h4>
 
 ***
 
+<p class="panel">This component is not yet accessible. Stay tuned for updates in future releases.</p>
+
+***
+
 ## Available SCSS Variables
 
 We opted not to create mixins for this plugin because it relies on classes in the JS to work. These variables should give you the control you need to change styles as you see fit:
diff --git a/doc/pages/components/dropdown.html b/doc/pages/components/dropdown.html
index 1294a65850..ca13eed66a 100755
--- a/doc/pages/components/dropdown.html
+++ b/doc/pages/components/dropdown.html
@@ -108,6 +108,10 @@ <h4>Rendered HTML</h4>
 
 ***
 
+<p class="panel">This component is not yet accessible. Stay tuned for updates in future releases.</p>
+
+***
+
 ## Customize with Sass
 
 Dropdowns can be easily customized using our Sass variables.
diff --git a/doc/pages/components/dropdown_buttons.html b/doc/pages/components/dropdown_buttons.html
index 4460497f4c..1169291c66 100755
--- a/doc/pages/components/dropdown_buttons.html
+++ b/doc/pages/components/dropdown_buttons.html
@@ -62,6 +62,10 @@ <h4>Rendered HTML</h4>
 
 ***
 
+<p class="panel">This component is not yet accessible. Stay tuned for updates in future releases.</p>
+
+***
+
 ## Customize with Sass
 
 Dropdown buttons can be easily customized using our provided Sass variables.
diff --git a/doc/pages/components/forms.html b/doc/pages/components/forms.html
index 0dae1c3953..d6ca3bcca2 100755
--- a/doc/pages/components/forms.html
+++ b/doc/pages/components/forms.html
@@ -83,7 +83,9 @@ <h4>Rendered HTML</h4>
 
 ### Pre/Postfix Labels &amp; Actions
 
-Foundation forms support actions tied to buttons, and prefix / postfix labels, through a versatile approach using special grid properties. Essentially you can use `<div class="row collapse">` to create label / action / input combinations. You use the Foundation columns to define the size of the pre/postfix `<span class="postfix">` or `<span class="prefix">`. Here are a few examples:
+Foundation forms support actions tied to buttons, and prefix / postfix labels, through a versatile approach using special grid properties. Essentially you can use `<div class="row collapse">` to create label / action / input combinations. You use the Foundation columns to define the size of the pre/postfix `<span class="postfix">` or `<span class="prefix">`.
+
+You can also give a button / input pair a radius or a rounded edge by adding the classes `prefix-radius`, `postfix-radius`, `prefix-round` or `postfix-round` to the row that contains the elements. For example, `<div class="row collapse postfix-round">` will add a rounded edge to the left side of the input field, and to the right side of the button, creating a cohesive rounded input. Here are a few examples:
 
 <div class="row">
   <div class="large-6 columns">
@@ -119,6 +121,64 @@ <h4>Rendered HTML</h4>
 
 ***
 
+## Accessibility
+
+For the most part, if you stick to standard HTML input types and label them properly, you won't need to worry too much about accessibility. Here are some things to keep in mind.
+
+### Label your inputs
+
+We recommend nesting your inputs inside of their labels, which removes the need to connect them using the `for` attribute.
+
+```html
+<label>
+  Name
+  <input type="text" name="name">
+</label>
+```
+
+If you need your labels and inputs to be separated, make sure the two are connected so screen readers will know (and to keep the labels clickable!).
+
+```html
+<label for="name">Name</label>
+<input type="text" name="name" id="name">
+```
+
+If an input field doesn't have a label, add the attribute `aria-label` to the input to clarify its purpose.
+
+```html
+<input type="text" name="name" aria-label="Name">
+```
+
+### Label help text
+
+If an input has some sort of help text distinct from the label, it should be connected to the input it describes using the attribute `aria-describedby`.
+
+```html
+<label>
+  Name
+  <input type="text" name="name" aria-describedby="nameHelpText">
+</label>
+<p id="nameHelpText">Enter your name.</p>
+```
+
+### Label custom inputs
+
+Custom inputs, like date pickers, range sliders, or switches need some extra attention to be made accessible. Our custom inputs&mdash;the range slider and switch&mdash;do most of this work for you.
+
+Custom inputs with labels or help text need the attributes `aria-labelledby` and `aria-describedby` added to them, so screen readers know how to describe a custom input.
+
+```html
+<label id="ageLabel">Age</label>
+<div class="range-slider" data-slider>
+  <span class="range-slider-handle" role="slider" aria-labelledby="ageLabel" aria-describedby="ageHelpText"></span>
+  <span class="range-slider-active-segment"></span>
+  <input type="hidden">
+</div>
+<p id="ageHelpText">How old are you?</p>
+```
+
+***
+
 ## Customize With Sass
 
 Forms can be easily customized with our provided Sass variables.
diff --git a/doc/pages/components/icon-bar.html b/doc/pages/components/icon-bar.html
index 111dc5f5cd..f87c7707da 100755
--- a/doc/pages/components/icon-bar.html
+++ b/doc/pages/components/icon-bar.html
@@ -44,7 +44,7 @@ <h4>Rendered HTML</h4>
 
 ***
 
-<h3>Advanced</h3>
+### Advanced
 
 Instead of images you can use Icon Fonts. This will help you change the colors and size faster instead of having to upload new images each time. <a href="http://zurb.com/playground/foundation-icon-fonts-3">Check out our badass Icon Fonts here.</a>
 
@@ -59,27 +59,33 @@ <h4>Rendered HTML</h4>
   </div>
 </div>
 
-### ARIA Accessible
+### Other Options
 
-Here is how to use `aria-label` when using the Icon Bar to make it accessible to screen readers.
+The default orientation for the labels are on the bottom. By adding a class of `.label-right` you can have the label on the right and icon on the left.
+
+***
+
+## Accessibility
+
+To make the icon bar navigable with a keyboard, add the attribute `tabindex="0"` to each `item`, which allows it to be focused when tabbing through items. Each item also gets the attribute `role="button"`, indicating its functionality.
+
+For icon bars without text labels, add `aria-label` to each item, with a value representing what the icon is. For icon bars with labels, give each label a unique ID, and add `aria-labelledby` to each item container, with a value equal to the ID of the label.
 
 <div class="row">
   <div class="large-6 columns">
+    <h4>Rendered HTML - Icon Bar w/o Text</h4>
+    {{> examples_icon_bar_iconfont_aria_rendered}}
     <h4>HTML</h4>
-{{> examples_icon_bar_iconfont_aria}}
+    {{> examples_icon_bar_iconfont_aria}}
   </div>
   <div class="large-6 columns">
-    <h4>Rendered HTML</h4>
-    {{> examples_icon_bar_iconfont_aria_rendered}}
+    <h4>Rendered HTML - Icon Bar with Text</h4>
+    {{> examples_icon_bar_text_aria_rendered}}
+    <h4>HTML</h4>
+    {{> examples_icon_bar_text_aria}}
   </div>
 </div>
 
-
-
-### Other Options
-
-The default orientation for the labels are on the bottom. By adding a class of `.label-right` you can have the label on the right and icon on the left.
-
 ***
 
 ## Customize with Sass 
diff --git a/doc/pages/components/joyride.html b/doc/pages/components/joyride.html
index e85afb1b81..d6be4ba213 100755
--- a/doc/pages/components/joyride.html
+++ b/doc/pages/components/joyride.html
@@ -21,7 +21,11 @@ <h3>We Add Some HTML with JS</h3>
 
 {{> examples_joyride_add_html}}
 
-<hr/>
+***
+
+<p class="panel">This component is not yet accessible. Stay tuned for updates in future releases.</p>
+
+***
 
 <h2 id="numero2">Available SCSS Variables</h2>
 
diff --git a/doc/pages/components/magellan.html b/doc/pages/components/magellan.html
index 89bee196c6..da91692f34 100755
--- a/doc/pages/components/magellan.html
+++ b/doc/pages/components/magellan.html
@@ -73,4 +73,8 @@ <h4>SCSS</h4>
 ```scss
 @import "foundation/components/magellan";
 ```
-{{/markdown}}
\ No newline at end of file
+{{/markdown}}
+
+***
+
+<p class="panel">This component is not yet accessible. Stay tuned for updates in future releases.</p>
\ No newline at end of file
diff --git a/doc/pages/components/orbit.html b/doc/pages/components/orbit.html
index e9f0e2a326..aeafe73252 100755
--- a/doc/pages/components/orbit.html
+++ b/doc/pages/components/orbit.html
@@ -97,6 +97,10 @@ <h4>Rendered HTML</h4>
 
 ***
 
+<p class="panel">This component is not yet accessible. Stay tuned for updates in future releases.</p>
+
+***
+
 ## Customize with Sass
 
   <div class="row">
diff --git a/doc/pages/components/progress_bars.html b/doc/pages/components/progress_bars.html
index e60bcc59c1..5224735cce 100755
--- a/doc/pages/components/progress_bars.html
+++ b/doc/pages/components/progress_bars.html
@@ -51,6 +51,10 @@ <h4>Rendered HTML</h4>
 
 ***
 
+<p class="panel">This component is not yet accessible. Stay tuned for updates in future releases.</p>
+
+***
+
 ## Customize with Sass
 
 Progress bars can be easily customized using our provided Sass variables.
diff --git a/doc/pages/components/range_slider.html b/doc/pages/components/range_slider.html
index 3783490f56..f6ffe96960 100755
--- a/doc/pages/components/range_slider.html
+++ b/doc/pages/components/range_slider.html
@@ -11,7 +11,7 @@ <h3 class="subheader">This handy slider will allow you to drag a handle to selec
     <div class="row">
       <div class="small-3 small-offset-3 medium-4 medium-offset-0 columns">
         <div class="range-slider vertical-range" data-slider data-options="display_selector:#sliderOutput2;vertical:true;">
-          <span class="range-slider-handle"></span>
+          <span class="range-slider-handle" role="slider" tabindex="0"></span>
           <span class="range-slider-active-segment"></span>
         </div>
       </div>
@@ -24,7 +24,7 @@ <h3 class="subheader">This handy slider will allow you to drag a handle to selec
     <div class="row">
       <div class="small-10 medium-11 columns">
         <div class="range-slider" data-slider data-options="display_selector:#sliderOutput1;">
-          <span class="range-slider-handle"></span>
+          <span class="range-slider-handle" role="slider" tabindex="0"></span>
           <span class="range-slider-active-segment"></span>
         </div>
       </div>
@@ -54,7 +54,7 @@ <h4>HTML</h4>
 {{#markdown}}
 ```html
 <div class="range-slider" data-slider>
-  <span class="range-slider-handle"></span>
+  <span class="range-slider-handle" role="slider" tabindex="0"></span>
   <span class="range-slider-active-segment"></span>
   <input type="hidden">
 </div>
@@ -64,7 +64,7 @@ <h4>HTML</h4>
   <div class="large-6 columns">
     <h4>Rendered HTML</h4>
     <div class="range-slider" data-slider>
-      <span class="range-slider-handle"></span>
+      <span class="range-slider-handle" role="slider" tabindex="0"></span>
       <span class="range-slider-active-segment"></span>
       <input type="hidden">
     </div>
@@ -81,7 +81,7 @@ <h4>HTML</h4>
 {{#markdown}}
 ```html
 <div class="range-slider vertical-range" data-slider data-options="vertical: true;">
-  <span class="range-slider-handle"></span>
+  <span class="range-slider-handle" role="slider" tabindex="0"></span>
   <span class="range-slider-active-segment"></span>
   <input type="hidden">
 </div>
@@ -91,7 +91,7 @@ <h4>HTML</h4>
   <div class="large-6 columns">
     <h4>Rendered HTML</h4>
     <div class="range-slider vertical-range" data-slider data-options="vertical: true;">
-      <span class="range-slider-handle"></span>
+      <span class="range-slider-handle" role="slider" tabindex="0"></span>
       <span class="range-slider-active-segment"></span>
       <input type="hidden">
     </div>
@@ -110,7 +110,7 @@ <h4>HTML</h4>
 <div class="row">
   <div class="small-10 medium-11 columns">
     <div class="range-slider" data-slider data-options="display_selector: #sliderOutput3;">
-      <span class="range-slider-handle"></span>
+      <span class="range-slider-handle" role="slider" tabindex="0"></span>
       <span class="range-slider-active-segment"></span>
     </div>
   </div>
@@ -126,7 +126,7 @@ <h4>Rendered HTML</h4>
     <div class="row">
       <div class="small-10 medium-11 columns">
         <div class="range-slider" data-slider data-options="display_selector: #sliderOutput3;">
-          <span class="range-slider-handle"></span>
+          <span class="range-slider-handle" role="slider" tabindex="0"></span>
           <span class="range-slider-active-segment"></span>
         </div>
       </div>
@@ -153,19 +153,19 @@ <h4>HTML</h4>
 {{#markdown}}
 ```html
 <div class="range-slider radius" data-slider>
-  <span class="range-slider-handle"></span>
+  <span class="range-slider-handle" role="slider" tabindex="0"></span>
   <span class="range-slider-active-segment"></span>
   <input type="hidden">
 </div>
 
 <div class="range-slider round" data-slider>
-  <span class="range-slider-handle"></span>
+  <span class="range-slider-handle" role="slider" tabindex="0"></span>
   <span class="range-slider-active-segment"></span>
   <input type="hidden">
 </div>
 
 <div class="range-slider disabled" data-slider disabled>
-  <span class="range-slider-handle"></span>
+  <span class="range-slider-handle" role="slider" tabindex="0"></span>
   <span class="range-slider-active-segment"></span>
   <input type="hidden">
 </div>
@@ -175,19 +175,19 @@ <h4>HTML</h4>
   <div class="large-6 columns">
     <h4>Rendered HTML</h4>
     <div class="range-slider radius" data-slider>
-      <span class="range-slider-handle"></span>
+      <span class="range-slider-handle" role="slider" tabindex="0"></span>
       <span class="range-slider-active-segment"></span>
       <input type="hidden">
     </div> 
     <br><br>
     <div class="range-slider round" data-slider>
-      <span class="range-slider-handle"></span>
+      <span class="range-slider-handle" role="slider" tabindex="0"></span>
       <span class="range-slider-active-segment"></span>
       <input type="hidden">
     </div>
     <br><br>
     <div class="range-slider disabled" data-slider disabled>
-      <span class="range-slider-handle"></span>
+      <span class="range-slider-handle" role="slider" tabindex="0"></span>
       <span class="range-slider-active-segment"></span>
       <input type="hidden">
     </div>
@@ -204,7 +204,7 @@ <h4>HTML</h4>
 {{#markdown}}
 ```html
 <div class="range-slider" data-slider data-options="step: 20;">
-  <span class="range-slider-handle"></span>
+  <span class="range-slider-handle" role="slider" tabindex="0"></span>
   <span class="range-slider-active-segment"></span>
   <input type="hidden">
 </div>
@@ -216,7 +216,7 @@ <h4>Rendered HTML</h4>
     <div class="row">
       <div class="small-10 medium-11 columns">
         <div class="range-slider" data-slider data-options="display_selector: #sliderOutput4; step: 20;">
-          <span class="range-slider-handle"></span>
+          <span class="range-slider-handle" role="slider" tabindex="0"></span>
           <span class="range-slider-active-segment"></span>
         </div>
       </div>
@@ -237,7 +237,7 @@ <h4>HTML</h4>
 {{#markdown}}
 ```html
 <div class="range-slider" data-slider data-options="start: 1; end: 10;">
-  <span class="range-slider-handle"></span>
+  <span class="range-slider-handle" role="slider" tabindex="0"></span>
   <span class="range-slider-active-segment"></span>
   <input type="hidden">
 </div>
@@ -249,7 +249,7 @@ <h4>Rendered HTML</h4>
     <div class="row">
       <div class="small-10 medium-11 columns">
         <div class="range-slider" data-slider data-options="display_selector: #sliderOutput5; start: 1; end: 10;">
-          <span class="range-slider-handle"></span>
+          <span class="range-slider-handle" role="slider" tabindex="0"></span>
           <span class="range-slider-active-segment"></span>
         </div>
       </div>
@@ -354,7 +354,28 @@ <h4>Set Value</h4>
 
 ***
 
-## Customize with Sass
+## Accessibility
+
+Because the range slider is a non-standard form input, assistive devices need some additional information to understand what they are. On the slider handle itself, you need the attribute `role="slider"`, to inform assistive devices about the functionality of the element. You also need the attribute `tabindex="0"`, so the element can be focused when navigating using a keyboard.
+
+If the slider has a label, the label should be connected to the slider by giving the label a unique ID, and giving the slider the attribute `aria-labelledby`, using the ID of the label as the value. Our JavaScript handles the rest of the ARIA attributes.
+
+```html
+<label id="sliderLabel">Age</label>
+<div class="range-slider" data-slider>
+  <span class="range-slider-handle" role="slider" tabindex="0" aria-labelledby="sliderLabel"></span>
+  <span class="range-slider-active-segment"></span>
+  <input type="hidden">
+</div>
+```
+
+If a slider doesn't have a text label, we recommend adding the attribute `aria-label` to the slider handle with an appropriate label.
+
+```html
+<span class="range-slider-handle" role="slider" tabindex="0" aria-label="Age"></span>
+```
+
+***
 
 Sliders can be easily customized using our provided Sass variables.
 
diff --git a/doc/pages/components/reveal.html b/doc/pages/components/reveal.html
index 5c7a24108a..7f52c60ed3 100755
--- a/doc/pages/components/reveal.html
+++ b/doc/pages/components/reveal.html
@@ -122,6 +122,10 @@ <h4>JS</h4>
 
 ***
 
+<p class="panel">This component is not yet accessible. Stay tuned for updates in future releases.</p>
+
+***
+
 <h2>Customize with Sass</h2>
 
 <p>Reveal modals can be easily customized using our Sass variables.</p>
diff --git a/doc/pages/components/split_buttons.html b/doc/pages/components/split_buttons.html
index b39beff55d..1d6e13554d 100755
--- a/doc/pages/components/split_buttons.html
+++ b/doc/pages/components/split_buttons.html
@@ -50,6 +50,10 @@ <h4>HTML Rendered</h4>
 
 ***
 
+<p class="panel">This component is not yet accessible. Stay tuned for updates in future releases.</p>
+
+***
+
 ## Customize with Sass
 
 Split buttons can be easily customized using our provided Sass variables.
diff --git a/doc/pages/components/switch.html b/doc/pages/components/switch.html
index e5e1ac56b9..fef5ba63d7 100755
--- a/doc/pages/components/switch.html
+++ b/doc/pages/components/switch.html
@@ -32,6 +32,25 @@ <h4>Rendered Checkbox HTML</h4>
 
 ***
 
+## Accessibility
+
+To have switches work with ARIA, you will need to change the div to fieldset and add a `tabindex` of 0. Here is how to use `aria-checked` when using Switches to make it accessible to screen readers:
+
+Because our switches are non-standard form elements, assistive devices need help figuring out what they are. To make switches more accessible, use the `<fieldset>` tag as a container, with the attribute `tabindex="0"`, so keyboards can tab to it.
+
+<div class="row">
+  <div class="large-6 columns">
+    <h4>HTML</h4>
+{{> examples_switch_basic_aria_rendered}}
+  </div>
+  <div class="large-6 columns">
+    <h4>Rendered HTML</h4>
+{{> examples_switch_basic_aria}}
+  </div>
+</div>
+
+***
+
 ## Customize with Sass
 
 Switches can be easily customized using our Sass variables.
diff --git a/doc/pages/components/tables.html b/doc/pages/components/tables.html
index dff3b600b9..73fcf77c42 100755
--- a/doc/pages/components/tables.html
+++ b/doc/pages/components/tables.html
@@ -10,11 +10,11 @@ <h3 class="subheader">Okay, they're not the sexiest things ever, but tables get
 
 ***
 
-<h3>Basic</h3>
+### Basic
 
 You can create a table using minimal markup.
 
-<h4>HTML</h4>
+#### HTML
 
 {{#markdown}}
 ```html
@@ -51,12 +51,111 @@ <h4>HTML</h4>
 ```
 {{/markdown}}
 
-<h4>Rendered HTML</h4>
+#### Rendered HTML
 
 {{> examples_tables_basic}}
 
 ***
 
+## Accessibility
+
+Tables have a lot of handy built-in features to make them more usable with screen readers. The key thing to remember is that *vision-impaired users can't quickly scan a table like sighted users can*. Typically, screen readers will read out the contents of a table one row at a time. Simpler tables with clear hierarchy and organization will be more easy to use for vision-impaired users.
+
+Here are some things you can do to make your tables more accessible:
+
+### Define tables for data
+
+Tables should almost always be used for actual data and not for creating page layouts. (You're using our awesome grid for layout anyway, *right?*) When a screen reader encounters a table, it runs a series of tests to determine if the table is a layout table or data table. The easiest way to define a table as being for data is by using `<th>` tags to define the headers of the table. Newer assistive software will also immediately interpret any table with the attribute `role="grid"` as being for data.
+
+```html
+<table role="grid">
+  <!-- ... -->
+</table>
+```
+
+### Add a summary
+
+The contents of a table can be described using the `<caption>` tag. However, you can also add the `summary` attribute to a table to further clarify its use. The `summary` attribute is specifically designed to explain a table to a vision-impaired user. If a table has both a summary and a caption, the summary should not simply restate the caption.
+
+The W3C offers [this example](http://www.w3.org/TR/WCAG20-TECHS/H73.html) for a table detailing a bus schedule:
+
+```html
+<table summary="Schedule for Route 7 going downtown. Service begins 
+at 4:00 AM and ends at midnight. Intersections are listed in the top row. 
+Find the intersection closest to your starting point or destination, then read 
+down that column to find out what time the bus leaves that intersection.">
+  <tr>
+    <th>State & First</th>
+    <th>State & Sixth</th>
+    <th>State & Fifteenth</th>
+    <th>Fifteenth & Morrison</th>
+  </tr>
+  <tr>
+    <td>4:00</td>
+    <td>4:05</td>
+    <td>4:11</td>
+    <td>4:19</td>
+  </tr>
+  <!-- ... -->
+</table>
+```
+
+### Building complex tables
+
+Most accessibility groups recommend keeping tables simple if accessibility is a concern. A complex table could potentially be split into multiple, smaller tables instead of being kept together. That being said, when creating a complex table, there are a few things to keep in mind.
+
+Always use `<th>` to define the headers for columns and rows. If a header cell is not a `<th>`, but a `<td>`, use the `scope` attribute to explain what kind of heading the cell is:
+  - `scope="row"` means the cell is a header for the row it's inside.
+  - `scope="column"` means the cell is a header for the column it's inside.
+
+```html
+<table>
+  <caption>Most Expensive Sandwiches by City</caption>
+  <tr>
+    <th scope="column">Rank</th>
+    <th scope="column">City</th>
+    <th scope="column">Price</th>
+  </tr>
+  <tr>
+    <td>1</td>
+    <td>2</td>
+    <td>3</td>
+  </tr>
+  <tr>
+    <td scope="row">Campbell, CA</td>
+    <td scope="row">New York, NY</td>
+    <td scope="row">Sandwich, IL</td>
+  </tr>
+  <tr>
+    <td>$12.99</td>
+    <td>$9.99</td>
+    <td>$8.99</td>
+  </tr>
+</table>
+```
+
+If a cell has multiple headers, use the `headers` attribute on the cell to define them. Give each header a unique ID, and then write the ID of each header in the `headers` attribute of the cell. Separate multiple headers with a space.
+
+```html
+<table>
+  <caption>Cute Animals Per 1,000 People</caption>
+  <tr>
+    <th id="state">State</th>
+    <th id="dogs">Dogs</th>
+    <th id="cats">Cats</th>
+    <th id="rabbits">Rabbits</th>
+  </tr>
+  <tr>
+    <th id="california" headers="state">California</th>
+    <td headers="dogs california">3</td>
+    <td headers="cats california">1</td>
+    <td headers="rabbits california">10</td>
+  </tr>
+</table>
+```
+
+***
+
 ## Customize with Sass
 
 Tables can be easily customized using our Sass variables.
diff --git a/doc/pages/components/thumbnails.html b/doc/pages/components/thumbnails.html
index 296e816f6d..060f0c1dcb 100755
--- a/doc/pages/components/thumbnails.html
+++ b/doc/pages/components/thumbnails.html
@@ -30,6 +30,29 @@ <h4>Rendered HTML</h4>
   </div>
 </div>
 
+<h3>ARIA Accessible</h3>
+
+This is how to use `aria-label`, `role`, and `aria-hidden` for Thumbnails accessibility.
+
+<div class="row">
+  <div class="large-6 columns">
+    <h4>HTML</h4>
+{{#markdown}}
+```html
+<a class="th" role="button" aria-label="Thumbnail" href="{{assets}}/img/examples/space.jpg">
+  <img aria-hidden=true src="{{assets}}/img/examples/space-th-sm.jpg"/>
+</a>
+```
+{{/markdown}}
+  </div>
+  <div class="large-6 columns">
+    <h4>Rendered HTML</h4>
+    <a class="th" role="button" aria-label="Thumbnail" href="{{assets}}/img/examples/space.jpg">
+      <img aria-hidden=true src="{{assets}}/img/examples/space-th-sm.jpg"/>
+    </a>
+  </div>
+</div>
+
 ***
 <h3>Advanced</h3>
 
diff --git a/doc/pages/components/tooltips.html b/doc/pages/components/tooltips.html
index ab31af4c96..73507fc053 100755
--- a/doc/pages/components/tooltips.html
+++ b/doc/pages/components/tooltips.html
@@ -2,7 +2,7 @@
 title: Tooltips
 ---
 
-<h3 class="subheader">Tooltips are a quick way to provide <a data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</a> on a term or action on a page.</h3>
+<h3 class="subheader">Tooltips are a quick way to provide <a data-tooltip aria-haspopup="true" class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</a> on a term or action on a page.</h3>
 
 ***
 
@@ -35,13 +35,13 @@ <h4>HTML</h4>
 
 {{#markdown}}
 ```html
-<span data-tooltip data-options="disable_for_touch:true" class="has-tip [tip-top tip-bottom tip-left tip-right] [radius round]" title="Tooltips are awesome, you should totally use them!">extended information</span>
+<span data-tooltip aria-haspopup="true" data-options="disable_for_touch:true" class="has-tip [tip-top tip-bottom tip-left tip-right] [radius round]" title="Tooltips are awesome, you should totally use them!">extended information</span>
 ```
 {{/markdown}}
 
 <h4>Rendered HTML</h4>
 
-<span data-tooltip class="has-tip tip-bottom radius" title="Tooltips are awesome, you should totally use them!">Hover on desktop and touch me on mobile!</span>
+<span data-tooltip aria-haspopup="true" class="has-tip tip-bottom radius" title="Tooltips are awesome, you should totally use them!">Hover on desktop and touch me on mobile!</span>
 
 
 <p>You can now also add `show_on` to your `data-options` attribute to allow your tooltips to show on `small`, `medium`, or `large` when the page loads. They will show on all screen sizes by default.</p>
@@ -71,8 +71,19 @@ <h4>HTML</h4>
 
 ***
 
-## Customize with Sass
+## Accessibility
 
+Tooltips need the attribute `role="tooltip"` so assistive devices understand what they are. On the text connected to the tooltip, you need the attribute `aria-describedby`, where the value is the ID of the tooltip it's connected to. Lucky for you, our JavaScript handles all of this for you!
+
+The only markup change you'll need to make is adding the attribute `aria-haspopup="true"` to your tooltip text. It's helpful for screen readers, and it also makes tooltips easier to use on Windows 8 touch devices.
+
+```html
+<a data-tooltip aria-haspopup="true" class="has-tip" title="Is great!">Accessibility</a>
+```
+
+***
+
+## Customize With Sass
 Tooltips can be easily customized using our provided Sass variables.
 
 <h4>SCSS</h4>
@@ -103,7 +114,7 @@ <h4>HTML</h4>
 
 {{#markdown}}
 ```html
-<span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">...</span>
+<span data-tooltip aria-haspopup="true" class="has-tip" title="Tooltips are awesome, you should totally use them!">...</span>
 ```
 {{/markdown}}
 
diff --git a/doc/pages/components/topbar.html b/doc/pages/components/topbar.html
index 30771df512..e59d9ce2b7 100755
--- a/doc/pages/components/topbar.html
+++ b/doc/pages/components/topbar.html
@@ -7,7 +7,7 @@ <h3 class="subheader">The Foundation Top Bar gives you a great way to display a
 
 ***
 
-<nav class="top-bar" data-topbar>
+<nav class="top-bar" data-topbar role="navigation">
   <ul class="title-area">
     <!-- Title Area -->
     <li class="name">
@@ -74,7 +74,7 @@ <h3 class="subheader">The Foundation Top Bar gives you a great way to display a
 
 <div class="row">
   <div class="large-12 columns">
-    <nav class="top-bar" data-topbar>
+    <nav class="top-bar" data-topbar role="navigation">
       <ul class="title-area">
         <li class="name">
           <h1><a href="#">My Site</a></h1>
@@ -138,7 +138,7 @@ <h5>Fixed Navigation</h5>
 {{#markdown}}
 ```html
 <div class="fixed">
-  <nav class="top-bar" data-topbar>
+  <nav class="top-bar" data-topbar role="navigation">
     ...
   </nav>
 </div>
@@ -152,7 +152,7 @@ <h5>Contain to Grid</h5>
 {{#markdown}}
 ```html
 <div class="contain-to-grid">
-  <nav class="top-bar" data-topbar>
+  <nav class="top-bar" data-topbar role="navigation">
     ...
   </nav>
 </div>
@@ -179,7 +179,7 @@ <h5>Contain to Grid</h5>
 {{#markdown}}
 ```html
 <div class="contain-to-grid sticky">
-  <nav class="top-bar" data-topbar data-options="sticky_on: large">
+  <nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: large">
     ...
   </nav>
 </div>
@@ -203,7 +203,7 @@ <h5>Contain to Grid</h5>
 
 {{#markdown}}
 ```html
-<nav class="top-bar" data-topbar data-options="is_hover: false">
+<nav class="top-bar" data-topbar role="navigation" data-options="is_hover: false">
 ```
 {{/markdown}}
 
@@ -229,7 +229,7 @@ <h5>Contain to Grid</h5>
 
 Several common elements have been supported by default, each one of these elements gets added to either the `ul.right` or `ul.left` unordered lists within your Top Bar navigation.
 
-<nav class="top-bar" data-topbar>
+<nav class="top-bar" data-topbar role="navigation">
   <!-- Title -->
   <ul class="title-area">
     <li class="name"><h1><a href="#">Sexy Top Bar</a></h1></li>
@@ -344,7 +344,7 @@ <h5>Contain to Grid</h5>
 
 {{#markdown}}
 ```html
-<nav class="top-bar" data-topbar>
+<nav class="top-bar" data-topbar role="navigation">
   <ul class="title-area">
     <li class="name"><!-- Leave this empty --></li>
     ...
@@ -355,6 +355,12 @@ <h5>Contain to Grid</h5>
 
 ***
 
+## Accessibility
+
+The top bar is a complex component with a lot of different features. However, it's still fully keyboard and screen reader accessible. The main thing you need to add if upgrading from an older version of Foundation is the attribute `role="navigation"` to the top bar container. Additionally, if your page uses top bar and off-canvas navigation, add the attribute `aria-hidden="true"` to one of them&mdash;otherwise, the user's device will tab through (and possibly read) both of them before reaching any content.
+
+***
+
 ### Available SCSS Variables
 
 We do include SCSS variable to help you control some of the styles for the top bar. Overall the styles are written mobile first, so they are much easier to override than the previous iteration of the top bar.
diff --git a/doc/pages/components/visibility.html b/doc/pages/components/visibility.html
index 39811f1f4b..d9f74c8205 100755
--- a/doc/pages/components/visibility.html
+++ b/doc/pages/components/visibility.html
@@ -1,3 +1,4 @@
+
 ---
 title: Visibility Classes
 meta: Visibility
@@ -35,7 +36,9 @@ <h3 class="subheader">Visibility classes let you show or hide elements based on
 
 {{> examples_visibility_touch}}
 
-### Accessibility
+***
+
+## Accessibility
 
 Finally, if you want to hide some content but still make it accessible for screen readers, use the **hidden** visibility classes. Do not confuse these classes with **hide** visibility classes. Use these classes in conjunction with the **hide** and **show** visibility classes to control complex layouts while offering accessibility for those using screen readers.
 
diff --git a/js/foundation/foundation.abide.js b/js/foundation/foundation.abide.js
index 21e783e6d2..7c890cc60c 100755
--- a/js/foundation/foundation.abide.js
+++ b/js/foundation/foundation.abide.js
@@ -202,13 +202,26 @@
 
           if(validations[0]){
             this.S(el).removeAttr(this.invalid_attr);
+            el.setAttribute('aria-invalid', 'false');
+            el.removeAttribute('aria-describedby');
             parent.removeClass('error');
-            if (label.length > 0 && this.settings.error_labels) label.removeClass('error');
+            if (label.length > 0 && this.settings.error_labels) {
+              label.removeClass('error').removeAttr('role');
+            }
             $(el).triggerHandler('valid');
           } else {
-            parent.addClass('error');
             this.S(el).attr(this.invalid_attr, '');
-            if (label.length > 0 && this.settings.error_labels) label.addClass('error');
+            el.setAttribute('aria-invalid', 'true');
+
+            // Try to find the error associated with the input
+            var errorID = parent.find('small.error, span.error')[0].id;
+            if (errorID.length > 0) el.setAttribute('aria-describedby', errorID);
+
+            // el.setAttribute('aria-describedby', $(el).find('.error')[0].id);
+            parent.addClass('error');
+            if (label.length > 0 && this.settings.error_labels) {
+              label.addClass('error').attr('role', 'alert');
+            }
             $(el).triggerHandler('invalid');
           }
 
diff --git a/js/foundation/foundation.alert.js b/js/foundation/foundation.alert.js
index bd9098ce22..11f6a12e4b 100755
--- a/js/foundation/foundation.alert.js
+++ b/js/foundation/foundation.alert.js
@@ -18,7 +18,7 @@
       var self = this,
           S = this.S;
 
-      $(this.scope).off('.alert').on('click.fndtn.alert', '[' + this.attr_name() + '] a.close', function (e) {
+      $(this.scope).off('.alert').on('click.fndtn.alert', '[' + this.attr_name() + '] .close', function (e) {
           var alertBox = S(this).closest('[' + self.attr_name() + ']'),
               settings = alertBox.data(self.attr_name(true) + '-init') || self.settings;
 
diff --git a/js/foundation/foundation.offcanvas.js b/js/foundation/foundation.offcanvas.js
index b9f3ad56a9..523da865ec 100644
--- a/js/foundation/foundation.offcanvas.js
+++ b/js/foundation/foundation.offcanvas.js
@@ -40,11 +40,12 @@
           if (self.settings.open_method !== 'overlap'){
             S(".left-submenu").removeClass(move_class + right_postfix);
           }
+          $('.left-off-canvas-toggle').attr('aria-expanded', 'true');
         })
         .on('click.fndtn.offcanvas', '.left-off-canvas-menu a', function (e) {
           var settings = self.get_settings(e);
           var parent = S(this).parent();
-          
+
           if(settings.close_on_click && !parent.hasClass("has-submenu") && !parent.hasClass("back")){
             self.hide.call(self, move_class + right_postfix, self.get_wrapper(e));
             parent.parent().removeClass(move_class + right_postfix);
@@ -54,18 +55,20 @@
           }else if(parent.hasClass("back")){
             e.preventDefault();
             parent.parent().removeClass(move_class + right_postfix);
-          }     
+          }
+          $('.left-off-canvas-toggle').attr('aria-expanded', 'true');
         })
         .on('click.fndtn.offcanvas', '.right-off-canvas-toggle', function (e) {
           self.click_toggle_class(e, move_class + left_postfix);
           if (self.settings.open_method !== 'overlap'){
             S(".right-submenu").removeClass(move_class + left_postfix);
           }
+          $('.right-off-canvas-toggle').attr('aria-expanded', 'true');
         })
         .on('click.fndtn.offcanvas', '.right-off-canvas-menu a', function (e) {
           var settings = self.get_settings(e);
           var parent = S(this).parent();
-          
+
           if(settings.close_on_click && !parent.hasClass("has-submenu") && !parent.hasClass("back")){
             self.hide.call(self, move_class + left_postfix, self.get_wrapper(e));
             parent.parent().removeClass(move_class + left_postfix);
@@ -75,7 +78,8 @@
           }else if(parent.hasClass("back")){
             e.preventDefault();
             parent.parent().removeClass(move_class + left_postfix);
-          }          
+          }
+          $('.right-off-canvas-toggle').attr('aria-expanded', 'true');
         })
         .on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
           self.click_remove_class(e, move_class + left_postfix);
@@ -84,6 +88,15 @@
             self.click_remove_class(e, move_class + right_postfix);
             S(".left-submenu").removeClass(move_class + left_postfix);
           }
+          $('.right-off-canvas-toggle').attr('aria-expanded', 'true');
+        })
+        .on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
+          self.click_remove_class(e, move_class + left_postfix);
+          $('.left-off-canvas-toggle').attr('aria-expanded', 'false');
+          if (right_postfix) {
+            self.click_remove_class(e, move_class + right_postfix);
+            $('.right-off-canvas-toggle').attr('aria-expanded', "false");
+          }
         });
     },
 
diff --git a/js/foundation/foundation.slider.js b/js/foundation/foundation.slider.js
index b97fa6b9e5..1a3f0ad47d 100755
--- a/js/foundation/foundation.slider.js
+++ b/js/foundation/foundation.slider.js
@@ -128,6 +128,15 @@
 
       $handle.parent().children('input[type=hidden]').val(value);
 
+      if (!$handle[0].hasAttribute('aria-valuemin')) {
+        $handle.attr({
+          'aria-valuemin': settings.start,
+          'aria-valuemax': settings.end,
+        });
+      }
+      $handle.attr('aria-valuenow', value);
+
+
       if (settings.input_id != '') {
         $(settings.display_selector).each(function(){
           if (this.hasOwnProperty('value')) {
diff --git a/js/foundation/foundation.tab.js b/js/foundation/foundation.tab.js
index 9cbd5a720e..edfdb1655b 100755
--- a/js/foundation/foundation.tab.js
+++ b/js/foundation/foundation.tab.js
@@ -38,7 +38,7 @@
       S(this.scope)
         .off('.tab')
         // Click event: tab title
-        .on('click.fndtn.tab', '[' + this.attr_name() + '] > * > a', function (e) {
+        .on('focus.fndtn.tab', '[' + this.attr_name() + '] > * > a', function (e) {
           var settings = S(this).closest('[' + self.attr_name() +']').data(self.attr_name(true) + '-init');
           if (!settings.is_hover || Modernizr.touch) {
             e.preventDefault();
@@ -56,7 +56,14 @@
       S(window).on('hashchange.fndtn.tab', function (e) {
         e.preventDefault();
         self.handle_location_hash_change();
-      });
+
+      }).on('keyup', function (e) {
+        if (e.keyword == 9) {
+          // active tab
+          console.log(document.querySelector('[data-tab] .tab-title :focus'))
+        }
+      });
+      ;
     },
 
     handle_location_hash_change : function () {
@@ -144,12 +151,62 @@
       // WARNING: The activation and deactivation of the tab content must
       // occur after the deep linking in order to properly refresh the browser
       // window (notably in Chrome).
+      // Clean up multiple attr instances to done once
       tab.addClass(settings.active_class).triggerHandler('opened');
-      siblings.removeClass(settings.active_class);
-      target.siblings().removeClass(settings.active_class).end().addClass(settings.active_class);
+      tab.find('a').attr({"aria-selected": "true",  tabindex: 0});
+      siblings.removeClass(settings.active_class)
+      siblings.find('a').attr({"aria-selected": "false",  tabindex: -1});
+      target.siblings().removeClass(settings.active_class).attr({"aria-hidden": "true",  tabindex: -1}).end().addClass(settings.active_class).attr('aria-hidden', 'false').find(':first-child').attr('tabindex', 0);
       settings.callback(tab);
       target.triggerHandler('toggled', [tab]);
       tabs.triggerHandler('toggled', [target]);
+
+      // From Heydon "the Great" Pickering 
+      $('[role="tab"]').on('keydown', function(e) {
+
+        // define current, previous and next (possible) tabs
+
+        var $original = $(this);
+        var $prev = $(this).parents('li').prev().children('[role="tab"]');
+        var $next = $(this).parents('li').next().children('[role="tab"]');
+        var $target;
+
+        // find the direction (prev or next)
+
+        switch (e.keyCode) {
+          case 37:
+            $target = $prev;
+            break;
+          case 39:
+            $target = $next;
+            break;
+          default:
+            $target = false
+            break;
+        }
+
+        if ($target.length) {
+            $original.attr({
+              'tabindex' : '-1',
+              'aria-selected' : null
+            });
+            $target.attr({
+              'tabindex' : '0',
+              'aria-selected' : true
+            }).focus();
+        }
+
+        // Hide panels
+
+        $('[role="tabpanel"]')
+          .attr('aria-hidden', 'true');
+
+        // Show panel which corresponds to target
+
+        $('#' + $(document.activeElement).attr('href').substring(1))
+          .attr('aria-hidden', null);
+
+      });
     },
 
     data_attr: function (str) {
diff --git a/js/foundation/foundation.tooltip.js b/js/foundation/foundation.tooltip.js
index 608a782ac3..04045f408c 100755
--- a/js/foundation/foundation.tooltip.js
+++ b/js/foundation/foundation.tooltip.js
@@ -15,9 +15,9 @@
       hover_delay: 200,
       show_on : 'all',
       tip_template : function (selector, content) {
-        return '<span data-selector="' + selector + '" class="'
+        return '<span data-selector="' + selector + '" id="' + selector + '" class="'
           + Foundation.libs.tooltip.settings.tooltip_class.substring(1)
-          + '">' + content + '<span class="nub"></span></span>';
+          + '" role="tooltip">' + content + '<span class="nub"></span></span>';
       }
     },
 
@@ -143,7 +143,9 @@
 
       if ((id && id.length < 1 || !id) && typeof dataSelector != 'string') {
         dataSelector = this.random_str(6);
-        $target.attr('data-selector', dataSelector);
+        $target
+          .attr('data-selector', dataSelector)
+          .attr('aria-describedby', dataSelector);
       }
 
       return (id && id.length > 0) ? id : dataSelector;
diff --git a/js/foundation/foundation.topbar.js b/js/foundation/foundation.topbar.js
index dc6389d9ce..56aa709098 100755
--- a/js/foundation/foundation.topbar.js
+++ b/js/foundation/foundation.topbar.js
@@ -277,6 +277,15 @@
           $movedLi.removeClass('moved');
         }, 300);
       });
+
+      // Show dropdown menus when their items are focused
+      S(this.scope).find('.dropdown a')
+        .focus(function() {
+          $(this).parents('.has-dropdown').addClass('hover');
+        })
+        .blur(function() {
+          $(this).parents('.has-dropdown').removeClass('hover');
+        });
     },
 
     resize : function () {
diff --git a/scss/foundation/_settings.scss b/scss/foundation/_settings.scss
index c980c130fe..1b70161e1d 100755
--- a/scss/foundation/_settings.scss
+++ b/scss/foundation/_settings.scss
@@ -1400,6 +1400,8 @@ $include-html-global-classes: $include-html-classes;
 // $topbar-link-font-family: $body-font-family;
 // $topbar-link-text-transform: none;
 // $topbar-link-padding: $topbar-height / 3;
+// $topbar-back-link-size: $h5-font-size;
+// $topbar-link-dropdown-padding: 20px;
 
 // $topbar-button-font-size: 0.75rem;
 // $topbar-button-top: 7px;
diff --git a/scss/foundation/components/_forms.scss b/scss/foundation/components/_forms.scss
index dd428ce058..ae0aebb910 100755
--- a/scss/foundation/components/_forms.scss
+++ b/scss/foundation/components/_forms.scss
@@ -321,14 +321,14 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
   -webkit-appearance: none !important;
   -webkit-border-radius: 0px;
   background-color: $select-bg-color;
-  
+
   // The custom arrow have some fake horizontal padding so we can align it
   // from the right side of the element without relying on CSS3
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
-  
+
   // We can safely use leftmost and rightmost now
   background-position: if($text-direction == 'rtl', 0%, 100%) center;
-  
+
   background-repeat: no-repeat;
   border: $input-border-width $input-border-style $input-border-color;
   padding: $form-spacing / 2;
@@ -397,12 +397,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     .postfix.button.round { @include radius(0); @include side-radius($opposite-direction, $button-round); }
 
     /* Separate prefix and postfix styles when on span or label so buttons keep their own */
-    span.prefix,label.prefix { @include prefix();
-      &.radius { @include radius(0); @include side-radius($default-float, $global-radius); }
-    }
-    span.postfix,label.postfix { @include postfix();
-      &.radius { @include radius(0); @include side-radius($opposite-direction, $global-radius); }
-    }
+    span.prefix,label.prefix { @include prefix(); }
+    span.postfix,label.postfix { @include postfix(); }
 
     /* We use this to get basic styling on all basic form elements */
     input[type="text"],
@@ -431,6 +427,35 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
       }
     }
 
+    form {
+      .row {
+        .prefix-radius.row.collapse {
+          input,
+          textarea,
+          select { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
+          .prefix { @include radius(0); @include side-radius($default-float, $button-radius); }
+        }
+        .postfix-radius.row.collapse {
+          input,
+          textarea,
+          select { @include radius(0); @include side-radius($default-float, $button-radius); }
+          .postfix { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
+        }
+        .prefix-round.row.collapse {
+          input,
+          textarea,
+          select { @include radius(0); @include side-radius($opposite-direction, $button-round); }
+          .prefix { @include radius(0); @include side-radius($default-float, $button-round); }
+        }
+        .postfix-round.row.collapse {
+          input,
+          textarea,
+          select { @include radius(0); @include side-radius($default-float, $button-round); }
+          .postfix { @include radius(0); @include side-radius($opposite-direction, $button-round); }
+        }
+      }
+    }
+
     input[type="submit"] {
       -webkit-appearance: none;
       -webkit-border-radius: 0px;
diff --git a/scss/foundation/components/_global.scss b/scss/foundation/components/_global.scss
index 2e7dd32f7a..43e8ebc29b 100755
--- a/scss/foundation/components/_global.scss
+++ b/scss/foundation/components/_global.scss
@@ -228,7 +228,6 @@ $success-color: #43AC6A !default;   // sea-green
 $warning-color: #f08a24 !default;   // carrot
 $info-color: #a0d3e8 !default;      // cornflower
 
-
 $white         : #FFFFFF !default;
 $ghost         : #FAFAFA !default;
 $snow          : #F9F9F9 !default;
@@ -249,7 +248,6 @@ $oil           : #333333 !default;
 $jet           : #222222 !default;
 $black         : #000000 !default;
 
-
 // We use these to define default font weights
 $font-weight-normal: normal !default;
 $font-weight-bold: bold !default;
diff --git a/scss/foundation/components/_range-slider.scss b/scss/foundation/components/_range-slider.scss
index 72993e2741..30203eab8c 100755
--- a/scss/foundation/components/_range-slider.scss
+++ b/scss/foundation/components/_range-slider.scss
@@ -21,10 +21,11 @@ $range-slider-bar-height: rem-calc(16) !default;
 
 $range-slider-bar-border-width: 1px !default;
 $range-slider-bar-border-style: solid !default;
-$range-slider-bar-border-color: $gainsboro !default; 
+$range-slider-bar-border-color: $gainsboro !default;
 $range-slider-radius: $global-radius !default;
 $range-slider-round: $global-rounded !default;
 $range-slider-bar-bg-color: $ghost !default;
+$range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness: -1%) !default;
 
 // Vertical bar styles
 $range-slider-vertical-bar-width: rem-calc(16) !default;
@@ -79,7 +80,7 @@ $range-slider-disabled-opacity: 0.7 !default;
 }
 
 @mixin range-slider-bar(
-  $bg: $range-slider-bar-bg-color, 
+  $bg: $range-slider-bar-bg-color,
   $radius:false) {
   @include range-slider-bar-base;
   @include range-slider-bar-style;
@@ -94,6 +95,10 @@ $range-slider-disabled-opacity: 0.7 !default;
   height: $range-slider-handle-height;
   border: $range-slider-handle-border-width $range-slider-handle-border-style $range-slider-handle-border-color;
   cursor: $range-slider-handle-cursor;
+
+  // This removes the 300ms touch delay on Windows 8
+  -ms-touch-action: manipulation;
+      touch-action: manipulation;
 }
 @mixin range-slider-handle-style(
   $bg: true,
@@ -153,7 +158,7 @@ $range-slider-disabled-opacity: 0.7 !default;
       display: inline-block;
       position: absolute;
       height: $range-slider-bar-height - rem-calc((strip-unit($range-slider-bar-border-width) * 2));
-      background: scale-color($secondary-color, $lightness: -1%);
+      background: $range-slider-active-segment-bg-color;
     }
     .range-slider-handle {
       @include range-slider-handle-base;
diff --git a/scss/foundation/components/_reveal.scss b/scss/foundation/components/_reveal.scss
index 4061ad79b2..9f01d77a39 100755
--- a/scss/foundation/components/_reveal.scss
+++ b/scss/foundation/components/_reveal.scss
@@ -65,11 +65,7 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
 // $base-style - Provides reveal base styles, can be set to false to override. Default: true, Options: false
 // $width - Sets reveal width Default: $reveal-default-width || 80%
 //
-@mixin reveal-modal-base(
-  $base-style:true,
-  $width:$reveal-default-width,
-  $max-width:$reveal-max-width,
-  $border-radius: $reveal-radius) {
+@mixin reveal-modal-base( $base-style: true, $width:$reveal-default-width, $max-width:$reveal-max-width, $border-radius: $reveal-radius) {
   @if $base-style {
     visibility: hidden;
     display: none;
@@ -77,18 +73,19 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
     z-index: 1005;
     width: 100vw;
     top:0;
-    border-radius: $border-radius; 
+    border-radius: $border-radius;
     #{$default-float}: 0;
+
     @media #{$small-only} {
       min-height:100vh;
     }
 
     // Make sure rows don't have a min-width on them
-    .column,
-    .columns { min-width: 0; }
+    .column, .columns { min-width: 0; }
 
     // Get rid of margin from first and last element inside modal
     & > :first-child { margin-top: 0; }
+
     & > :last-child { margin-bottom: 0; }
   }
 
@@ -201,12 +198,15 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
 
     dialog {
       @extend .#{$reveal-modal-class};
+      display: none;
 
-      &::backdrop {
+      &::backdrop, & + .backdrop {
         @include reveal-bg(false);
       }
 
-      //&[open]{ display: block; }  As far as I know, this is no longer needed; this is the expected behavior in all browsers that currently support dialog or plan to with their nightly builds.
+      &[open]{
+        display: block;
+      }
     }
 
     // Reveal Print Styles: It should be invislbe, adds no value being printed.
diff --git a/scss/foundation/components/_switches.scss b/scss/foundation/components/_switches.scss
index 7f0b30d0ef..bd818b2ee6 100755
--- a/scss/foundation/components/_switches.scss
+++ b/scss/foundation/components/_switches.scss
@@ -63,7 +63,11 @@ $switch-active-color: $primary-color;
   // So that we don't need to recreate the form with any JS, we use the
   // existing checkbox or radio button, but we cleverly position and hide it.
   input {
-    display: none;
+    opacity: 0;
+    position: absolute;
+    top: 9px;
+    left: 10px;
+    padding:0;
 
     & + label { margin-left: 0; margin-right: 0; }
   }
@@ -182,7 +186,10 @@ $switch-active-color: $primary-color;
   $paddle-bg: $switch-paddle-bg,
   $active-color: $switch-active-color,
   $radius:false,
-  $base-style:true) {
+    $base-style:true) {
+    padding: 0;
+    border: none;
+    position: relative;
     @include switch-base($transition-speed, $transition-ease);
     @include switch-size($height);
     @include switch-style($paddle-bg, $radius, $base-style);
@@ -190,7 +197,7 @@ $switch-active-color: $primary-color;
 
 @include exports("switch") {
   @if $include-html-form-classes {
-      div.switch {
+      .switch {
         @include switch;
 
         // Large radio switches
diff --git a/scss/foundation/components/_tables.scss b/scss/foundation/components/_tables.scss
index 2d693d91e0..db2cdccd21 100755
--- a/scss/foundation/components/_tables.scss
+++ b/scss/foundation/components/_tables.scss
@@ -63,8 +63,8 @@ $table-margin-bottom: rem-calc(20) !default;
   background: $table-bg;
   margin-bottom: $table-margin-bottom;
   border: $table-border-style $table-border-size $table-border-color;
-  table-layout:fixed;
-  width:100%;
+  table-layout: fixed;
+  width: 100%;
 
   caption {
     background: $table-caption-bg;
diff --git a/scss/foundation/components/_top-bar.scss b/scss/foundation/components/_top-bar.scss
index 3ff26a11cf..c92911ba3b 100755
--- a/scss/foundation/components/_top-bar.scss
+++ b/scss/foundation/components/_top-bar.scss
@@ -48,7 +48,8 @@ $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%) !def
 $topbar-link-font-family: $body-font-family !default;
 $topbar-link-text-transform: none !default;
 $topbar-link-padding: $topbar-height / 3 !default;
-
+$topbar-back-link-size: $h5-font-size !default;
+$topbar-link-dropdown-padding: 20px;
 $topbar-button-font-size: 0.75rem !default;
 $topbar-button-top: 7px !default;
 
@@ -163,13 +164,18 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
       input { height: 1.8rem; padding-top: .35rem; padding-bottom: .35rem; font-size: $topbar-button-font-size; }
 
       .button, button {
-        padding-top: .45rem;
-        padding-bottom: .35rem;
+        padding-top: .35rem + rem-calc(1);
+        padding-bottom: .35rem + rem-calc(1);
         margin-bottom: 0;
         font-size: $topbar-button-font-size;
           // position: relative;
           // top: -1px;
-
+        
+        // Corrects a slight misalignment when put next to an input field
+        @media #{$small-only} {
+          position: relative;
+          top: -1px;
+        }
       }
 
       // Title Area
@@ -402,11 +408,12 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
           }
 
           &.title h5, &.parent-link {
+            // Back Button
             margin-bottom: 0;
             margin-top: 0;
             a {
               color: $topbar-link-color;
-              line-height: $topbar-height / 2;
+              // line-height: $topbar-height / 2;
               display: block;
               &:hover { background:none; }
             }
@@ -515,7 +522,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
           @if($topbar-arrows){
 
             & > a {
-              padding-#{$opposite-direction}: $topbar-link-padding + 20 !important;
+              padding-#{$opposite-direction}: $topbar-link-padding + $topbar-link-dropdown-padding !important;
               &:after {
                 @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top);
                 margin-top: -($topbar-dropdown-toggle-size / 2);
@@ -536,6 +543,9 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
               @include topbar-show-dropdown();
             }
           }
+          > a:focus + .dropdown {
+            @include topbar-show-dropdown();
+          }
 
           .dropdown li.has-dropdown {
             & > a {
@@ -656,6 +666,9 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
               @include topbar-show-dropdown();
             }
           }
+          > a:focus + .dropdown {
+            @include topbar-show-dropdown();
+          }
         }
       }
     }