diff --git a/app/common/directives/app-header.html b/app/common/directives/app-header.html
index 8d6a2ad..050ac05 100644
--- a/app/common/directives/app-header.html
+++ b/app/common/directives/app-header.html
@@ -1,10 +1,10 @@
-<div id="header__wrapper">
+<header id="header" class="header">
   <!-- HEADER -->
-  <header id="header">
-    <span class="header__title float-left">OpenBMC</span>
+  <div class="header__info-section">
+    <span class="header__title">OpenBMC</span>
     <a href="" class="header__logout" ng-click="logout()">Log out</a>
-  </header>
-  <div class="header__functions-wrapper" role="heading">
+  </div>
+  <div class="header__functions-section">
     <div class="logo__wrapper"><img src="../../assets/images/logo.svg" class="header__logo" alt="company logo"/></div>
     <div class="inline header__server-name">
       <p class="header__hostname">{{dataService.hostname}}</p>
@@ -26,4 +26,4 @@
       </button>
     </div>
   </div>
-</div>
+</header>
diff --git a/app/common/directives/app-navigation.js b/app/common/directives/app-navigation.js
index c1272de..baa8c8b 100644
--- a/app/common/directives/app-navigation.js
+++ b/app/common/directives/app-navigation.js
@@ -42,8 +42,7 @@
                 }
 
                 if ($scope.showNavigation) {
-                  paddingTop =
-                      document.getElementById('header__wrapper').offsetHeight;
+                  paddingTop = document.getElementById('header').offsetHeight;
                 }
                 dataService.bodyStyle = {'padding-top': paddingTop + 'px'};
                 $scope.navStyle = {'top': paddingTop + 'px'};
diff --git a/app/common/directives/log-event.html b/app/common/directives/log-event.html
index 344dccb..5a183ed 100644
--- a/app/common/directives/log-event.html
+++ b/app/common/directives/log-event.html
@@ -31,7 +31,7 @@
       </div>
       <div class="column small-1 large-1">
         <button class="accord-trigger" ng-class="{'active': event.meta}"
-          ng-click="event.meta = ! event.meta"></button>
+          ng-click="event.meta = ! event.meta" aria-label="{{event.meta ? 'collapse' : 'expand'}}"></button>
       </div>
     </div>
     <div class="row event__metadata-row" ng-class="{'active': event.meta}">
diff --git a/app/common/styles/base/utility.scss b/app/common/styles/base/utility.scss
index 91c60d5..7a19475 100644
--- a/app/common/styles/base/utility.scss
+++ b/app/common/styles/base/utility.scss
@@ -15,7 +15,11 @@
   float: right;
 }
 .clear-float {
-  clear: both;
+  &::after {
+    content: " ";
+    display: block;
+    clear: both;
+  }
 }
 .error {
   color: $error-color;
@@ -91,11 +95,14 @@
 }
 
 .accessible-text {
-  height: 0;
-  width: 0;
-  position: absolute;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
   overflow: hidden;
-  display: block;
+  padding: 0;
+  position: absolute;
 }
 
 .show-scroll {
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
index bb326fd..56460c6 100644
--- a/app/common/styles/layout/header.scss
+++ b/app/common/styles/layout/header.scss
@@ -8,7 +8,7 @@
   border-radius: 6px 6px;
 }
 
-#header__wrapper {
+.header {
   position: fixed;
   top: 0;
   left: 0;
@@ -19,6 +19,7 @@
 .header__title {
   margin-left: 1em;
   display: none;
+  float: left;
   @include mediaQuery(x-small) {
     display: inline-block;
     position: absolute;
@@ -27,7 +28,7 @@
   }
 }
 
-header {
+.header__info-section {
   position: relative;
   background: $black;
   color: $white;
@@ -36,7 +37,6 @@
 
 .header__logout {
   float: right;
-  display: inline-block;
   color: $white;
   font-size: .9em;
   text-decoration: none;
@@ -47,7 +47,7 @@
   }
 }
 
-.header__functions-wrapper {
+.header__functions-section {
   color: $white;
   padding: 0 1.1em;
   box-sizing: border-box;
@@ -235,4 +235,4 @@
   }
 }
 
-// end header__functions-wrapper
+// end header__functions-section