diff --git a/docs/css/_header.scss b/docs/css/_header.scss
new file mode 100644
index 00000000..0beec24c
--- /dev/null
+++ b/docs/css/_header.scss
@@ -0,0 +1,39 @@
+.site-header {
+  width: 100%;
+  .navbar {
+    border-radius: 0;
+    border: none;
+    background-color: #0B1724;
+    height: 50px;
+    .navbar-header {
+      position: relative;
+      height: 50px;
+      font-size: 14px;
+      line-height: 50px;
+      color: #C7C4C3;
+      a:hover {
+        text-decoration: none;
+      }
+    }
+    .navbar-nav > li {
+      padding: 14px;
+      font-size: 14px;
+      font-family: Open Sans;
+      &:last-child {
+        padding-right: 40px;
+      }
+    }
+    .navbar-nav > li > a {
+      padding: 0 0 4px 0;
+    }
+    .navbar-nav > li.active > a {
+      background-color: transparent;
+      border-bottom: 2px solid #FF2E6C;
+    }
+    .fa-github {
+      font-size: 1.6em;
+      position: relative;
+      top: -2px;
+    }
+  }
+}
diff --git a/docs/css/_home.scss b/docs/css/_home.scss
index 55b28da3..7950fef6 100644
--- a/docs/css/_home.scss
+++ b/docs/css/_home.scss
@@ -49,44 +49,6 @@ html, body {
   }
 }
 
-.site-header {
-  width: 100%;
-  .navbar {
-    border-radius: 0;
-    border: none;
-    background-color: #0B1724;
-    height: 50px;
-    .navbar-header {
-      position: relative;
-      height: 50px;
-      font-size: 14px;
-      line-height: 50px;
-      color: #C7C4C3;
-      a:hover {
-        text-decoration: none;
-      }
-    }
-    .navbar-nav > li {
-      padding: 14px;
-      &:last-child {
-        padding-right: 20px;
-      }
-    }
-    .navbar-nav > li > a {
-      padding: 0 0 4px 0;
-    }
-    .navbar-nav > li.active > a {
-      background-color: transparent;
-      border-bottom: 2px solid #FF2E6C;
-    }
-    .fa-github {
-      font-size: 1.6em;
-      position: relative;
-      top: -2px;
-    }
-  }
-}
-
 /* JUMBOTRON
 // ------------------------- */
 .jumbotron {
@@ -103,7 +65,10 @@ html, body {
   }
   .jumbotron-header {
     text-align: center;
-    color: #FFF;
+    color: white;
+    .jumbotron-title{
+      font-size: 0px;
+    }
   }
   .jumbotron-left-column {
     display: none;
@@ -177,7 +142,7 @@ html, body {
 @media (min-width: 1200px) {
   .jumbotron .join-form {
     position: absolute;
-    top: 170px;
+    top: 140px;
     right: 120px;
     padding: 10px 40px 30px;
   }
diff --git a/docs/css/main.scss b/docs/css/main.scss
index 6ade1f82..6148ebd8 100644
--- a/docs/css/main.scss
+++ b/docs/css/main.scss
@@ -9,6 +9,8 @@
 @import "syntax-highlighting";
 @import "helper";
 
+@import "header";
+
 @import "home";
 @import "page";
 @import "searchbar";
diff --git a/docs/index.haml b/docs/index.haml
index b8fc886e..0cf3e4e6 100644
--- a/docs/index.haml
+++ b/docs/index.haml
@@ -6,12 +6,13 @@ layout: default
   .container.pos-rel
     .jumbotron-header
       %h1.jumbotron-title
-        %img.logo{:src => "./img/docsearch-logo.svg"}
+        Algolia doc search
+        %img.logo{:src => "./img/docsearch-logo.svg", :alt => "Algolia doc search", :height => "48"}
       %p#top The easiest way to add search to your documentation.
       .spacer20
     .jumbotron-left-column
       %div.index-container
-        %img.index{:src => "./img/illus-index.svg"}
+        %img.index{:src => "./img/illus-index.svg", :alt => "docsearch doc crawling"}
         %div.ripple
       .spacer30
       .text-center
@@ -32,74 +33,74 @@ layout: default
     .row
       .col-sm-4.showcase
         %a{:href => "https://facebook.github.io/react/", :target => "_blank"}
-          %img.img-responsive.logo{:src => "./img/showcase/logo-react.png"}
+          %img.img-responsive.logo{:src => "./img/showcase/logo-react.png", :alt => "reactjs"}
           .screen-wrapper
-            %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-react.gif"}
-            %img.img-responsive.screen-mask{:src => "./img/mask.png"}
+            %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-react.gif", :alt => "react docsearch demo"}
+            %img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
           .spacer10
           React
       .col-sm-4.showcase
         %a{:href => "http://facebook.github.io/react-native/docs/getting-started.html", :target => "_blank"}
-          %img.img-responsive.logo{:src => "./img/showcase/logo-react.png"}
+          %img.img-responsive.logo{:src => "./img/showcase/logo-react.png", :alt => "react native"}
           .screen-wrapper
-            %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-reactnative.gif"}
-            %img.img-responsive.screen-mask{:src => "./img/mask.png"}
+            %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-reactnative.gif", :alt => "react native docsearch demo"}
+            %img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
           .spacer10
           React Native
       .col-sm-4.showcase
         %a{:href => "http://eslint.org/", :target => "_blank"}
-          %img.img-responsive.logo{:src => "./img/showcase/logo-eslint.png"}
+          %img.img-responsive.logo{:src => "./img/showcase/logo-eslint.png", :alt => "eslint"}
           .screen-wrapper
-            %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-eslint.gif"}
-            %img.img-responsive.screen-mask{:src => "./img/mask.png"}
+            %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-eslint.gif", :alt => "eslint docsearch demo"}
+            %img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
           .spacer10
           ESLint
       .col-sm-4.showcase
         %a{:href => "http://docs.scala-lang.org/", :target => "_blank"}
-          %img.img-responsive.logo{:src => "./img/showcase/logo-scala.png"}
+          %img.img-responsive.logo{:src => "./img/showcase/logo-scala.png", :alt => "scala"}
           .screen-wrapper
-            %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-scala.gif"}
-            %img.img-responsive.screen-mask{:src => "./img/mask.png"}
+            %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-scala.gif", :alt => "scala docsearch demo"}
+            %img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
           .spacer10
           Scala
       .col-sm-4.showcase
         %a{:href => "https://babeljs.algolia.com/", :target => "_blank"}
-          %img.img-responsive.logo{:src => "./img/showcase/logo-babel.png"}
+          %img.img-responsive.logo{:src => "./img/showcase/logo-babel.png", :alt => "babel"}
           .screen-wrapper
-            %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-babel.gif"}
-            %img.img-responsive.screen-mask{:src => "./img/mask.png"}
+            %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-babel.gif", :alt => "babel docsearch demo"}
+            %img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
           .spacer10
           Babel.js
       .col-sm-4.showcase
         %a{:href => "http://vuejs.org/guide/", :target => "_blank"}
-          %img.img-responsive.logo{:src => "./img/showcase/logo-vuejs.png"}
+          %img.img-responsive.logo{:src => "./img/showcase/logo-vuejs.png", :alt => "vuejs"}
           .screen-wrapper
-            %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-vuejs.gif"}
-            %img.img-responsive.screen-mask{:src => "./img/mask.png"}
+            %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-vuejs.gif", :alt => "vuejs docsearch demo"}
+            %img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
           .spacer10
           Vue.js
       .col-sm-4.showcase
         %a{:href => "https://docs.influxdata.com/", :target => "_blank"}
-          %img.img-responsive.logo{:src => "./img/showcase/logo-influxdata.png"}
+          %img.img-responsive.logo{:src => "./img/showcase/logo-influxdata.png", :alt => "influxdata"}
           .screen-wrapper
-            %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-influxdata.gif"}
-            %img.img-responsive.screen-mask{:src => "./img/mask.png"}
+            %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-influxdata.gif", :alt => "influxdata docsearch demo"}
+            %img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
           .spacer10
           Influxdata
       .col-sm-4.showcase
         %a{:href => "http://help.apiary.io/", :target => "_blank"}
-          %img.img-responsive.logo{:src => "./img/showcase/logo-apiary.png"}
+          %img.img-responsive.logo{:src => "./img/showcase/logo-apiary.png", :alt => "apiary"}
           .screen-wrapper
-            %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-apiary.gif"}
-            %img.img-responsive.screen-mask{:src => "./img/mask.png"}
+            %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-apiary.gif", :alt => "apiary docsearch demo"}
+            %img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
           .spacer10
           Apiary
       .col-sm-4.showcase
         %a{:href => "http://marionettejs.com/", :target => "_blank"}
-          %img.img-responsive.logo{:src => "./img/showcase/logo-marionettejs.png"}
+          %img.img-responsive.logo{:src => "./img/showcase/logo-marionettejs.png", :alt => "marionnette"}
           .screen-wrapper
-            %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-marionettejs.gif"}
-            %img.img-responsive.screen-mask{:src => "./img/mask.png"}
+            %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-marionettejs.gif", :alt => "marionette docsearch demo"}
+            %img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
           .spacer10
           Marionette.js
       .col-sm-4.showcase
@@ -113,7 +114,7 @@ layout: default
       %h2.page-section-title How it works
     .row
       .col-sm-12
-        %img.img-responsive{:src => "./img/illus-howitworks.jpg"}
+        %img.img-responsive{:src => "./img/illus-howitworks.jpg", :alt => "how it works"}
     .spacer60
     .row
       .col-sm-10.col-sm-offset-1