diff --git a/assets/javascripts/templates/notice_tmpl.coffee b/assets/javascripts/templates/notice_tmpl.coffee
index 3441a0f6..3ea1c069 100644
--- a/assets/javascripts/templates/notice_tmpl.coffee
+++ b/assets/javascripts/templates/notice_tmpl.coffee
@@ -6,4 +6,4 @@ app.templates.singleDocNotice = (doc) ->
 
 app.templates.disabledDocNotice = ->
   notice """ <strong>This documentation is currently disabled.</strong>
-             To enable it, click <a class="_notice-link" data-pick-docs>Select documentation</a>. """
+             To enable it, click <a href="#" class="_notice-link" data-pick-docs>Select documentation</a>. """
diff --git a/assets/javascripts/templates/notif_tmpl.coffee b/assets/javascripts/templates/notif_tmpl.coffee
index 899070ea..d44176de 100644
--- a/assets/javascripts/templates/notif_tmpl.coffee
+++ b/assets/javascripts/templates/notif_tmpl.coffee
@@ -1,6 +1,6 @@
 notif = (title, html) ->
   html = html.replace /<a /g, '<a class="_notif-link" '
-  """<h5 class="_notif-title">#{title}</h5>#{html}<a href="#" class="_notif-close"></a>"""
+  """<h5 class="_notif-title">#{title}</h5>#{html}<button type="button" class="_notif-close" title="Close">Close</a>"""
 
 textNotif = (title, message) ->
   notif title, """<p class="_notif-text">#{message}"""
diff --git a/assets/javascripts/templates/pages/about_tmpl.coffee b/assets/javascripts/templates/pages/about_tmpl.coffee
index f26a612b..66b4abb2 100644
--- a/assets/javascripts/templates/pages/about_tmpl.coffee
+++ b/assets/javascripts/templates/pages/about_tmpl.coffee
@@ -1,5 +1,5 @@
 app.templates.aboutPage = -> """
-  <div class="_toc">
+  <nav class="_toc" role="directory">
     <h3 class="_toc-title">Table of Contents</h3>
     <ul class="_toc-list">
       <li><a href="#credits">Credits</a>
@@ -8,7 +8,7 @@ app.templates.aboutPage = -> """
       <li><a href="#plugins">Plugins</a>
       <li><a href="#privacy">Privacy Policy</a>
     </ul>
-  </div>
+  </nav>
 
   <h1 class="_lined-heading">API Documentation Browser</h1>
   <p>DevDocs combines multiple API documentations in a fast, organized, and searchable interface.
diff --git a/assets/javascripts/templates/pages/help_tmpl.coffee b/assets/javascripts/templates/pages/help_tmpl.coffee
index ea7fee8a..41bd68d3 100644
--- a/assets/javascripts/templates/pages/help_tmpl.coffee
+++ b/assets/javascripts/templates/pages/help_tmpl.coffee
@@ -2,14 +2,14 @@ ctrlKey = if $.isMac() then 'cmd' else 'ctrl'
 navKey = if $.isWindows() then 'alt' else ctrlKey
 
 app.templates.helpPage = """
-  <div class="_toc">
+  <nav class="_toc" role="directory">
     <h3 class="_toc-title">Table of Contents</h3>
     <ul class="_toc-list">
       <li><a href="#search">Search</a>
       <li><a href="#shortcuts">Keyboard Shortcuts</a>
       <li><a href="#abbreviations">Abbreviations</a>
     </ul>
-  </div>
+  </nav>
 
   <h2 class="_lined-heading" id="search">Search</h2>
   <p>
diff --git a/assets/javascripts/templates/sidebar_tmpl.coffee b/assets/javascripts/templates/sidebar_tmpl.coffee
index e5aee618..09c4daea 100644
--- a/assets/javascripts/templates/sidebar_tmpl.coffee
+++ b/assets/javascripts/templates/sidebar_tmpl.coffee
@@ -67,10 +67,10 @@ sidebarFooter = (html) -> """<div class="_sidebar-footer">#{html}</div>"""
 
 templates.sidebarSettings = ->
   sidebarFooter """
-    <a class="_sidebar-footer-link _sidebar-footer-light" title="Toggle light" data-light></a>
-    <a class="_sidebar-footer-link _sidebar-footer-layout" title="Toggle layout" data-layout></a>
-    <a class="_sidebar-footer-link _sidebar-footer-edit" data-pick-docs>Select documentation</a>
+    <button type="button" class="_sidebar-footer-link _sidebar-footer-light" title="Toggle light" data-light>Toggle light</button>
+    <button type="button" class="_sidebar-footer-link _sidebar-footer-layout" title="Toggle layout" data-layout>Toggle layout</button>
+    <a href="#" class="_sidebar-footer-link _sidebar-footer-edit" data-pick-docs>Select documentation</a>
   """
 
 templates.sidebarSave = ->
-  sidebarFooter """<a class="_sidebar-footer-link _sidebar-footer-save">Save</a>"""
+  sidebarFooter """<a class="_sidebar-footer-link _sidebar-footer-save" role="button">Save</a>"""
diff --git a/assets/javascripts/views/layout/path.coffee b/assets/javascripts/views/layout/path.coffee
index 32a6b379..10d7a5e1 100644
--- a/assets/javascripts/views/layout/path.coffee
+++ b/assets/javascripts/views/layout/path.coffee
@@ -1,5 +1,7 @@
 class app.views.Path extends app.View
   @className: '_path'
+  @attributes:
+    role: 'complementary'
 
   @events:
     click: 'onClick'
diff --git a/assets/javascripts/views/misc/notice.coffee b/assets/javascripts/views/misc/notice.coffee
index a2cebf66..cf05e6cb 100644
--- a/assets/javascripts/views/misc/notice.coffee
+++ b/assets/javascripts/views/misc/notice.coffee
@@ -1,5 +1,7 @@
 class app.views.Notice extends app.View
   @className: '_notice'
+  @attributes:
+    role: 'alert'
 
   constructor: (@type, @args...) -> super
 
diff --git a/assets/javascripts/views/misc/notif.coffee b/assets/javascripts/views/misc/notif.coffee
index 93370e11..e1b4bc40 100644
--- a/assets/javascripts/views/misc/notif.coffee
+++ b/assets/javascripts/views/misc/notif.coffee
@@ -1,6 +1,8 @@
 class app.views.Notif extends app.View
   @className: '_notif'
   @activeClass: '_in'
+  @attributes:
+    role: 'alert'
 
   @defautOptions:
     autoHide: 15000
diff --git a/assets/javascripts/views/sidebar/doc_list.coffee b/assets/javascripts/views/sidebar/doc_list.coffee
index 77338c7c..8c3f75bc 100644
--- a/assets/javascripts/views/sidebar/doc_list.coffee
+++ b/assets/javascripts/views/sidebar/doc_list.coffee
@@ -1,5 +1,7 @@
 class app.views.DocList extends app.View
   @className: '_list'
+  @attributes:
+    role: 'navigation'
 
   @events:
     open:  'onOpen'
diff --git a/assets/javascripts/views/sidebar/doc_picker.coffee b/assets/javascripts/views/sidebar/doc_picker.coffee
index 3dae5c51..6ed17ce2 100644
--- a/assets/javascripts/views/sidebar/doc_picker.coffee
+++ b/assets/javascripts/views/sidebar/doc_picker.coffee
@@ -1,5 +1,7 @@
 class app.views.DocPicker extends app.View
   @className: '_list _list-picker'
+  @attributes:
+    role: 'form'
 
   @elements:
     saveLink: '._sidebar-footer-save'
diff --git a/assets/javascripts/views/view.coffee b/assets/javascripts/views/view.coffee
index a9e8f579..1a8fe835 100644
--- a/assets/javascripts/views/view.coffee
+++ b/assets/javascripts/views/view.coffee
@@ -16,6 +16,10 @@ class app.View
       @constructor.el
     else
       document.createElement @constructor.tagName or 'div'
+
+    if @constructor.attributes
+      for key, value of @constructor.attributes
+        @el.setAttribute(key, value)
     return
 
   refreshElements: ->
diff --git a/assets/stylesheets/components/_header.scss b/assets/stylesheets/components/_header.scss
index 9d440ca6..4031d56f 100644
--- a/assets/stylesheets/components/_header.scss
+++ b/assets/stylesheets/components/_header.scss
@@ -139,8 +139,10 @@
   top: .5em;
   right: 0;
   padding: .5em;
-  cursor: pointer;
+  width: 1rem;
+  height: 1rem;
   opacity: .3;
+  @extend %content-box, %hide-text;
 
   &:hover { opacity: .5; }
   @if $style == 'dark' {
diff --git a/assets/stylesheets/components/_mobile.scss b/assets/stylesheets/components/_mobile.scss
index e5d0bf67..1a472ff3 100644
--- a/assets/stylesheets/components/_mobile.scss
+++ b/assets/stylesheets/components/_mobile.scss
@@ -155,11 +155,12 @@
   float: left;
   width: 2.5rem;
   height: 100%;
-  background: none;
-  border: 0;
   @extend %hide-text;
 
-  &[disabled] { opacity: .3; }
+  &[disabled] {
+    opacity: .3;
+    cursor: not-allowed;
+  }
 
   &:before {
     position: absolute;
diff --git a/assets/stylesheets/components/_notif.scss b/assets/stylesheets/components/_notif.scss
index 7feb8cb6..304759e1 100644
--- a/assets/stylesheets/components/_notif.scss
+++ b/assets/stylesheets/components/_notif.scss
@@ -43,9 +43,11 @@
   position: absolute;
   top: 0;
   right: 0;
+  width: 1rem;
+  height: 1rem;
   padding: .625rem;
   opacity: .9;
-  cursor: pointer;
+  @extend %content-box, %hide-text;
 
   &:before { @extend %icon, %icon-close-white; }
 }
diff --git a/assets/stylesheets/components/_sidebar.scss b/assets/stylesheets/components/_sidebar.scss
index faec9e9e..c97847b7 100644
--- a/assets/stylesheets/components/_sidebar.scss
+++ b/assets/stylesheets/components/_sidebar.scss
@@ -434,6 +434,7 @@
   width: 2rem;
   padding: 0;
   opacity: .65;
+  @extend %hide-text;
 
   &:before {
     float: none;
@@ -454,6 +455,7 @@
   width: 2rem;
   padding: 0;
   opacity: .65;
+  @extend %hide-text;
 
   &:before {
     float: none;
diff --git a/assets/stylesheets/global/_base.scss b/assets/stylesheets/global/_base.scss
index 66b3066f..e78e7afc 100644
--- a/assets/stylesheets/global/_base.scss
+++ b/assets/stylesheets/global/_base.scss
@@ -159,7 +159,7 @@ td {
   > pre:last-child, > p:last-child, > ul:last-child, > ol:last-child { margin-bottom: 0; }
 }
 
-input {
+input, button {
   margin: 0;
   font-family: inherit;
   font-size: 100%;
@@ -168,7 +168,16 @@ input {
   @extend %border-box;
 }
 
-input[type="search"] { -webkit-appearance: none; }
+button {
+  background: none;
+  border: 0;
+  cursor: pointer;
+}
+
+button, input[type="search"] {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+}
 
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-decoration {
diff --git a/assets/stylesheets/global/_classes.scss b/assets/stylesheets/global/_classes.scss
index a9da3305..55843e2d 100644
--- a/assets/stylesheets/global/_classes.scss
+++ b/assets/stylesheets/global/_classes.scss
@@ -7,6 +7,11 @@
        box-sizing: border-box;
 }
 
+%content-box {
+  -moz-box-sizing: content-box;
+       box-sizing: content-box;
+}
+
 %user-select-none {
   -webkit-user-select: none;
      -moz-user-select: -moz-none;
@@ -17,7 +22,7 @@
 %hide-text {
   white-space: nowrap;
   overflow: hidden;
-  color: transparent;
+  color: transparent !important;
   @extend %user-select-none;
 }
 
diff --git a/views/app.erb b/views/app.erb
index a86e2bcd..1cba7e18 100644
--- a/views/app.erb
+++ b/views/app.erb
@@ -1,18 +1,18 @@
-<div class="_app<%= " #{app_layout}" if app_layout %>">
-  <header class="_header">
+<div class="_app<%= " #{app_layout}" if app_layout %>" role="application">
+  <header class="_header" role="banner">
     <button type="button" class="_mobile-btn _back-btn">Back</button>
     <button type="button" class="_mobile-btn _forward-btn">Forward</button>
     <button type="button" class="_mobile-btn _menu-btn">Menu</button>
     <button type="button" class="_mobile-btn _home-btn">Home</button>
-    <form class="_search">
+    <form class="_search" role="search">
       <input type="search" class="_search-input" placeholder="Search&hellip;" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" maxlength="30" aria-label="Search">
-      <a class="_search-clear"></a>
+      <button type="reset" class="_search-clear" title="Clear search">Clear search</button>
       <div class="_search-tag"></div>
     </form>
     <h1 class="_logo">
       <a href="/" class="_nav-link" title="Offline API Documentation Browser">DevDocs</a><%= "/ #{@doc['full_name']}" if @doc %>
     </h1>
-    <nav class="_nav">
+    <nav class="_nav" role="navigation">
       <a href="/offline" class="_nav-link">Offline</a>
       <a href="/about" class="_nav-link">About</a>
       <a href="/news" class="_nav-link">News</a>
@@ -20,7 +20,7 @@
     </nav>
   </header>
   <section class="_sidebar">
-    <div class="_list">
+    <div class="_list" role="navigation">
       <% unless @doc %>
       <% App.docs.each do |slug, doc| %>
       <a href="/<%= slug %>/" class="_list-item"><span class="_list-arrow"></span><%= doc['full_name'] %></a>
@@ -28,9 +28,9 @@
       <% end %>
     </div>
   </section>
-  <section class="_container">
-    <div class="_content _content-loading"></div>
-  </section>
+  <div class="_container" role="document">
+    <main class="_content _content-loading" role="main"></main>
+  </div>
 </div>
 <style data-size="<%= app_size %>" data-resizer>
   ._container { margin-left: <%= app_size %>; }