diff --git a/docs/documentation/components/tabs.html b/docs/documentation/components/tabs.html
index a637d238..3139a0bf 100644
--- a/docs/documentation/components/tabs.html
+++ b/docs/documentation/components/tabs.html
@@ -16,60 +16,78 @@ meta:
 
 {% capture tabs_example %}
 <div class="tabs">
-  <ul>
-    <li class="is-active"><a>Pictures</a></li>
-    <li><a>Music</a></li>
-    <li><a>Videos</a></li>
-    <li><a>Documents</a></li>
+  <ul role="tab">
+    <li role="presentation" class="is-active">
+      <a href="#picture-panel" id="picture-tab"
+         role="tab" aria-controls="picture-panel" aria-selected="true">Pictures</a>
+    </li>
+    <li role="presentation">
+      <a href="#music-panel" id="music-tab"
+         role="tab" aria-controls="music-panel" aria-selected="false">Music</a>
+    </li>
+    <li role="presentation">
+      <a href="#video-panel" id="video-tab"
+         role="tab" aria-controls="video-panel" aria-selected="false">Videos</a>
+    </li>
+    <li role="presentation">
+      <a href="#docs-panel" id="docs-tab"
+         role="tab" aria-controls="docs-panel" aria-selected="false">Documents</a>
+    </li>
   </ul>
 </div>
+
+<section id="picture-panel" role="tabpanel" tabindex="-1" aria-labelledby="picture-tab">Pictures Content</section>
+<section id="music-panel" role="tabpanel" tabindex="-1" aria-labelledby="music-tab" class="is-hidden">Music Content</section>
+<section id="video-panel" role="tabpanel" tabindex="-1" aria-labelledby="video-tab" class="is-hidden">Videos Content</section>
+<section id="docs-panel" role="tabpanel" tabindex="-1" aria-labelledby="docs-tab" class="is-hidden">Documents Content</section>
+
 {% endcapture %}
 
 {% capture tabs_centered_example %}
 <div class="tabs is-centered">
-  <ul>
-    <li class="is-active"><a>Pictures</a></li>
-    <li><a>Music</a></li>
-    <li><a>Videos</a></li>
-    <li><a>Documents</a></li>
+  <ul role="tab">
+    <li class="is-active"><a role="tab" aria-selected="true" href="#picture-panel">Pictures</a></li>
+    <li role="presentation"><a role="tab" aria-selected="false" href="#music-panel">Music</a></li>
+    <li role="presentation"><a role="tab" aria-selected="false" href="#video-panel">Videos</a></li>
+    <li role="presentation"><a role="tab" aria-selected="false" href="#docs-panel">Documents</a></li>
   </ul>
 </div>
 {% endcapture %}
 
 {% capture tabs_right_example %}
 <div class="tabs is-right">
-  <ul>
-    <li class="is-active"><a>Pictures</a></li>
-    <li><a>Music</a></li>
-    <li><a>Videos</a></li>
-    <li><a>Documents</a></li>
+  <ul role="tab">
+    <li class="is-active"><a role="tab" aria-selected="true" href="#picture-panel">Pictures</a></li>
+    <li role="presentation"><a role="tab" aria-selected="false" href="#music-panel">Music</a></li>
+    <li role="presentation"><a role="tab" aria-selected="false" href="#video-panel">Videos</a></li>
+    <li role="presentation"><a role="tab" aria-selected="false" href="#docs-panel">Documents</a></li>
   </ul>
 </div>
 {% endcapture %}
 
 {% capture tabs_icons_example %}
 <div class="tabs is-centered">
-  <ul>
+  <ul role="tab">
     <li class="is-active">
-      <a>
+      <a role="tab" aria-selected="true" href="#picture-panel">
         <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
         <span>Pictures</span>
       </a>
     </li>
-    <li>
-      <a>
+    <li role="presentation">
+      <a role="tab" aria-selected="false" href="#music-panel">
         <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
         <span>Music</span>
       </a>
     </li>
-    <li>
-      <a>
+    <li role="presentation">
+      <a role="tab" aria-selected="false" href="#video-panel">
         <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
         <span>Videos</span>
       </a>
     </li>
-    <li>
-      <a>
+    <li role="presentation">
+      <a role="tab" aria-selected="false" href="#docs-panel">
         <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
         <span>Documents</span>
       </a>
@@ -80,60 +98,60 @@ meta:
 
 {% capture tabs_small_example %}
 <div class="tabs is-small">
-  <ul>
-    <li class="is-active"><a>Pictures</a></li>
-    <li><a>Music</a></li>
-    <li><a>Videos</a></li>
-    <li><a>Documents</a></li>
+  <ul role="tab">
+    <li class="is-active"><a role="tab" aria-selected="true" href="#picture-panel">Pictures</a></li>
+    <li role="presentation"><a role="tab" aria-selected="false" href="#music-panel">Music</a></li>
+    <li role="presentation"><a role="tab" aria-selected="false" href="#video-panel">Videos</a></li>
+    <li role="presentation"><a role="tab" aria-selected="false" href="#docs-panel">Documents</a></li>
   </ul>
 </div>
 {% endcapture %}
 
 {% capture tabs_medium_example %}
 <div class="tabs is-medium">
-  <ul>
-    <li class="is-active"><a>Pictures</a></li>
-    <li><a>Music</a></li>
-    <li><a>Videos</a></li>
-    <li><a>Documents</a></li>
+  <ul role="tab">
+    <li class="is-active"><a role="tab" aria-selected="true" href="#picture-panel">Pictures</a></li>
+    <li role="presentation"><a role="tab" aria-selected="false" href="#music-panel">Music</a></li>
+    <li role="presentation"><a role="tab" aria-selected="false" href="#video-panel">Videos</a></li>
+    <li role="presentation"><a role="tab" aria-selected="false" href="#docs-panel">Documents</a></li>
   </ul>
 </div>
 {% endcapture %}
 
 {% capture tabs_large_example %}
 <div class="tabs is-large">
-  <ul>
-    <li class="is-active"><a>Pictures</a></li>
-    <li><a>Music</a></li>
-    <li><a>Videos</a></li>
-    <li><a>Documents</a></li>
+  <ul role="tab">
+    <li class="is-active"><a role="tab" aria-selected="true" href="#picture-panel">Pictures</a></li>
+    <li role="presentation"><a role="tab" aria-selected="false" href="#music-panel">Music</a></li>
+    <li role="presentation"><a role="tab" aria-selected="false" href="#video-panel">Videos</a></li>
+    <li role="presentation"><a role="tab" aria-selected="false" href="#docs-panel">Documents</a></li>
   </ul>
 </div>
 {% endcapture %}
 
 {% capture tabs_boxed_example %}
 <div class="tabs is-boxed">
-  <ul>
+  <ul role="tab">
     <li class="is-active">
-      <a>
+      <a role="tab" aria-selected="true" href="#picture-panel">
         <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
         <span>Pictures</span>
       </a>
     </li>
-    <li>
-      <a>
+    <li role="presentation">
+      <a role="tab" aria-selected="false" href="#music-panel">
         <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
         <span>Music</span>
       </a>
     </li>
-    <li>
-      <a>
+    <li role="presentation">
+      <a role="tab" aria-selected="false" href="#video-panel">
         <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
         <span>Videos</span>
       </a>
     </li>
-    <li>
-      <a>
+    <li role="presentation">
+      <a role="tab" aria-selected="false" href="#docs-panel">
         <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
         <span>Documents</span>
       </a>
@@ -144,27 +162,27 @@ meta:
 
 {% capture tabs_toggle_example %}
 <div class="tabs is-toggle">
-  <ul>
+  <ul role="tab">
     <li class="is-active">
-      <a>
+      <a role="tab" aria-selected="true" href="#picture-panel">
         <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
         <span>Pictures</span>
       </a>
     </li>
-    <li>
-      <a>
+    <li role="presentation">
+      <a role="tab" aria-selected="false" href="#music-panel">
         <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
         <span>Music</span>
       </a>
     </li>
-    <li>
-      <a>
+    <li role="presentation">
+      <a role="tab" aria-selected="false" href="#video-panel">
         <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
         <span>Videos</span>
       </a>
     </li>
-    <li>
-      <a>
+    <li role="presentation">
+      <a role="tab" aria-selected="false" href="#docs-panel">
         <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
         <span>Documents</span>
       </a>
@@ -175,27 +193,27 @@ meta:
 
 {% capture tabs_toggle_rounded_example %}
 <div class="tabs is-toggle is-toggle-rounded">
-  <ul>
+  <ul role="tab">
     <li class="is-active">
-      <a>
+      <a role="tab" aria-selected="true" href="#picture-panel">
         <span class="icon is-small"><i class="fas fa-image"></i></span>
         <span>Pictures</span>
       </a>
     </li>
-    <li>
-      <a>
+    <li role="presentation">
+      <a role="tab" aria-selected="false" href="#music-panel">
         <span class="icon is-small"><i class="fas fa-music"></i></span>
         <span>Music</span>
       </a>
     </li>
-    <li>
-      <a>
+    <li role="presentation">
+      <a role="tab" aria-selected="false" href="#video-panel">
         <span class="icon is-small"><i class="fas fa-film"></i></span>
         <span>Videos</span>
       </a>
     </li>
-    <li>
-      <a>
+    <li role="presentation">
+      <a role="tab" aria-selected="false" href="#docs-panel">
         <span class="icon is-small"><i class="fas fa-file-alt"></i></span>
         <span>Documents</span>
       </a>
@@ -206,21 +224,21 @@ meta:
 
 {% capture tabs_fullwidth_example %}
 <div class="tabs is-fullwidth">
-  <ul>
-    <li>
-      <a>
+  <ul role="tab">
+    <li role="presentation">
+      <a role="tab" href="#left-panel">
         <span class="icon"><i class="fas fa-angle-left" aria-hidden="true"></i></span>
         <span>Left</span>
       </a>
     </li>
-    <li>
-      <a>
+    <li role="presentation">
+      <a role="tab" href="#up-panel">
         <span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
         <span>Up</span>
       </a>
     </li>
-    <li>
-      <a>
+    <li role="presentation">
+      <a role="tab" href="#right-panel">
         <span>Right</span>
         <span class="icon"><i class="fas fa-angle-right" aria-hidden="true"></i></span>
       </a>
@@ -231,27 +249,27 @@ meta:
 
 {% capture tabs_centered_boxed_example %}
 <div class="tabs is-centered is-boxed">
-  <ul>
+  <ul role="tab">
     <li class="is-active">
-      <a>
+      <a role="tab" aria-selected="true" href="#picture-panel">
         <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
         <span>Pictures</span>
       </a>
     </li>
-    <li>
-      <a>
+    <li role="presentation">
+      <a role="tab" aria-selected="false" href="#music-panel">
         <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
         <span>Music</span>
       </a>
     </li>
-    <li>
-      <a>
+    <li role="presentation">
+      <a role="tab" aria-selected="false" href="#video-panel">
         <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
         <span>Videos</span>
       </a>
     </li>
-    <li>
-      <a>
+    <li role="presentation">
+      <a role="tab" aria-selected="false" href="#docs-panel">
         <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
         <span>Documents</span>
       </a>
@@ -262,27 +280,27 @@ meta:
 
 {% capture tabs_toggle_fullwidth_example %}
 <div class="tabs is-toggle is-fullwidth">
-  <ul>
+  <ul role="tab">
     <li class="is-active">
-      <a>
+      <a role="tab" aria-selected="true" href="#picture-panel">
         <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
         <span>Pictures</span>
       </a>
     </li>
-    <li>
-      <a>
+    <li role="presentation">
+      <a role="tab" aria-selected="false" href="#music-panel">
         <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
         <span>Music</span>
       </a>
     </li>
-    <li>
-      <a>
+    <li role="presentation">
+      <a role="tab" aria-selected="false" href="#video-panel">
         <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
         <span>Videos</span>
       </a>
     </li>
-    <li>
-      <a>
+    <li role="presentation">
+      <a role="tab" aria-selected="false" href="#docs-panel">
         <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
         <span>Documents</span>
       </a>
@@ -293,27 +311,27 @@ meta:
 
 {% capture tabs_centered_boxed_medium_example %}
 <div class="tabs is-centered is-boxed is-medium">
-  <ul>
+  <ul role="tab">
     <li class="is-active">
-      <a>
+      <a role="tab" aria-selected="true" href="#picture-panel">
         <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
         <span>Pictures</span>
       </a>
     </li>
-    <li>
-      <a>
+    <li role="presentation">
+      <a role="tab" aria-selected="false" href="#music-panel">
         <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
         <span>Music</span>
       </a>
     </li>
-    <li>
-      <a>
+    <li role="presentation">
+      <a role="tab" aria-selected="false" href="#video-panel">
         <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
         <span>Videos</span>
       </a>
     </li>
-    <li>
-      <a>
+    <li role="presentation">
+      <a role="tab" aria-selected="false" href="#docs-panel">
         <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
         <span>Documents</span>
       </a>
@@ -324,27 +342,27 @@ meta:
 
 {% capture tabs_toggle_fullwidth_large_example %}
 <div class="tabs is-toggle is-fullwidth is-large">
-  <ul>
+  <ul role="tab">
     <li class="is-active">
-      <a>
+      <a role="tab" aria-selected="true" href="#picture-panel">
         <span class="icon"><i class="fas fa-image" aria-hidden="true"></i></span>
         <span>Pictures</span>
       </a>
     </li>
-    <li>
-      <a>
+    <li role="presentation">
+      <a role="tab" aria-selected="false" href="#music-panel">
         <span class="icon"><i class="fas fa-music" aria-hidden="true"></i></span>
         <span>Music</span>
       </a>
     </li>
-    <li>
-      <a>
+    <li role="presentation">
+      <a role="tab" aria-selected="false" href="#video-panel">
         <span class="icon"><i class="fas fa-film" aria-hidden="true"></i></span>
         <span>Videos</span>
       </a>
     </li>
-    <li>
-      <a>
+    <li role="presentation">
+      <a role="tab" aria-selected="false" href="#docs-panel">
         <span class="icon"><i class="far fa-file-alt" aria-hidden="true"></i></span>
         <span>Documents</span>
       </a>