Resolve accessibility isssues

- Remove unecessary aria-roles
- Associate label elements with form elements
- Remove extraneous markup on Network settings page
- Update generic markup to use definition list when appropriate
- Add aria-labels and aria-expanded to accordion triggers

Tested: Accessibility issues tested in using Lighthouse in Chrome
Developer tools Audit section and Dequeue Axe extension. Manually tested clicking on labels
set focus on the form elements. Visually tested of the Network
Settings page in Chrome, Firefox, and Safari to verify layout changes.

Resolves openbmc/phosphor-webui#76

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ib974c623e9d3b74e74e1f374c21e8191732ec26a

13 files changed, 192 insertions, 137 deletions

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 @@ window.angular && (function(angular) {
                 }
 
                 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 @@ $logoMaxWidth: 125px;
   border-radius: 6px 6px;
 }
 
-#header__wrapper {
+.header {
   position: fixed;
   top: 0;
   left: 0;
@@ -19,6 +19,7 @@ $logoMaxWidth: 125px;
 .header__title {
   margin-left: 1em;
   display: none;
+  float: left;
   @include mediaQuery(x-small) {
     display: inline-block;
     position: absolute;
@@ -27,7 +28,7 @@ $logoMaxWidth: 125px;
   }
 }
 
-header {
+.header__info-section {
   position: relative;
   background: $black;
   color: $white;
@@ -36,7 +37,6 @@ header {
 
 .header__logout {
   float: right;
-  display: inline-block;
   color: $white;
   font-size: .9em;
   text-decoration: none;
@@ -47,7 +47,7 @@ header {
   }
 }
 
-.header__functions-wrapper {
+.header__functions-section {
   color: $white;
   padding: 0 1.1em;
   box-sizing: border-box;
@@ -235,4 +235,4 @@ header {
   }
 }
 
-// end header__functions-wrapper
+// end header__functions-section
diff --git a/app/configuration/controllers/date-time-controller.html b/app/configuration/controllers/date-time-controller.html
index 6e1e24d..8ea478a 100644
--- a/app/configuration/controllers/date-time-controller.html
+++ b/app/configuration/controllers/date-time-controller.html
@@ -50,10 +50,10 @@
             </div>
           </li>
           <li class="date-time__metadata-block">
-          <label class="content-label">Time Owner</label>
-          <select ng-model="time.owner" class="date-time__owner-dropdown">
-            <option class="courier-bold" ng-repeat="owner in timeOwners">{{owner}}</option>
-          </select>
+            <label for="date-time-owner" class="content-label">Time Owner</label>
+            <select id="date-time-owner" ng-model="time.owner" class="date-time__owner-dropdown">
+              <option class="courier-bold" ng-repeat="owner in timeOwners">{{owner}}</option>
+            </select>
           </li>
         </ul>
       </div>
diff --git a/app/configuration/controllers/network-controller.html b/app/configuration/controllers/network-controller.html
index 0a8b7c7..343d4fd 100644
--- a/app/configuration/controllers/network-controller.html
+++ b/app/configuration/controllers/network-controller.html
@@ -4,19 +4,20 @@
     <h1>BMC network settings</h1>
   </div>
   <form class="net-config__form" role="form" action="">
-    <section class="row column">
-      <div class="column small-12 page-header">
-        <h2 class="inline">Common settings</h2>
-      </div>
-      <fieldset>
+    <fieldset class="net-config__fieldset row column">
+      <legend class="column small-12 page-header h2">
+        Common settings
+      </legend>
+      <div class="net-config__fieldset-content">
         <div class="column small-12 large-3">
           <label for="net-config__mac">Hostname</label>
-          <input id="net-config__mac" type="text" ng-model="hostname"/>
+          <input id="net-config__mac" type="text" ng-model="hostname" />
         </div>
         <div class="column small-12 large-3">
           <label for="netinterface-select">Network interface</label>
           <div id="netinterface-select" class="dropdown__wrapper">
-            <button type="button" class="dropdown__button" ng-click="networkDevice = !networkDevice">{{selectedInterface}}</button>
+            <button type="button" class="dropdown__button"
+              ng-click="networkDevice = !networkDevice">{{selectedInterface}}</button>
             <ul class="dropdown__list inline" ng-show="networkDevice">
               <li ng-repeat="interface_id in network.interface_ids">
                 <button type="button" ng-click="selectInterface(interface_id);">{{interface_id}}</button>
@@ -26,45 +27,51 @@
         </div>
         <div class="column small-12 large-3">
           <label for="net-config__host">MAC address</label>
-          <input id="net-config__host" type="text" ng-model="interface.MACAddress"/>
+          <input id="net-config__host" type="text" ng-model="interface.MACAddress" />
         </div>
         <div class="column small-12 large-3">
           <label for="net-config__domain">Default Gateway</label>
-          <input id="net-config__domain" type="text" ng-model="defaultGateway"/>
+          <input id="net-config__domain" type="text" ng-model="defaultGateway" />
         </div>
-      </fieldset>
-    </section>
-    <section class="row column">
-      <div class="column small-12 page-header">
-        <h2 class="inline">IPV4 settings</h2>
       </div>
-      <fieldset>
+    </fieldset>
+    <fieldset class="net-config__fieldset row column">
+      <legend class="column small-12 page-header h2">
+        IPV4 settings
+      </legend>
+      <div class="net-config__fieldset-content">
         <div class="row column">
           <label class="control-radio" for="dhcp-address">Obtain an IP address automatically using DHCP
-            <input type="radio" name="ip-address" id="dhcp-address" ng-checked="true" ng-model="interface.DHCPEnabled" ng-value="true">
+            <input type="radio" name="ip-address" id="dhcp-address" ng-checked="true" ng-model="interface.DHCPEnabled"
+              ng-value="true">
             <span class="control__indicator control__indicator-on"></span>
           </label>
         </div>
         <div class="row column">
           <label class="control-radio" for="static-ip-address">Assign a static IP address
-            <input type="radio" name="ip-address" id="static-ip-address" ng-model="interface.DHCPEnabled" ng-value="false"/>
+            <input type="radio" name="ip-address" id="static-ip-address" ng-model="interface.DHCPEnabled"
+              ng-value="false" />
             <span class="control__indicator control__indicator-on"></span>
           </label>
         </div>
         <div class="row column network-config__ipv4-wrap">
-          <fieldset class="net-config__static-ip-wrap" ng-repeat="ipv4 in interface.ipv4.values track by $index">
+          <fieldset class="net-config__fieldset net-config__static-ip-wrap" ng-repeat="ipv4 in interface.ipv4.values track by $index">
             <div class="column small-12 large-3">
-              <label>IPV4 address</label>
-              <input id="ipv4-address-{{$index+1}}" ng-change="ipv4.updateAddress = true" type="text" ng-disabled="interface.DHCPEnabled" ng-model="ipv4.Address"/>
+              <label for="ipv4-address-{{$index+1}}">IPV4 address</label>
+              <input id="ipv4-address-{{$index+1}}" ng-change="ipv4.updateAddress = true" type="text"
+                ng-disabled="interface.DHCPEnabled" ng-model="ipv4.Address" />
             </div>
             <div class="column small-12 large-3">
-              <label>Gateway</label>
-              <input id="ipv4-gateway-{{$index+1}}" ng-change="ipv4.updateGateway = true" type="text" ng-disabled="interface.DHCPEnabled" value="" ng-model="ipv4.Gateway"/>
+              <label for="ipv4-gateway-{{$index+1}}">Gateway</label>
+              <input id="ipv4-gateway-{{$index+1}}" ng-change="ipv4.updateGateway = true" type="text"
+                ng-disabled="interface.DHCPEnabled" value="" ng-model="ipv4.Gateway" />
             </div>
             <!-- This netmask prefix length max only works with IPV4 -->
             <div class="column small-12 large-6">
-              <label>Netmask Prefix Length</label>
-              <input id="ipv4-prefix-{{$index+1}}" class="column small-6" ng-change="ipv4.updatePrefix = true" type="number" min="1" max="32" step="1" ng-disabled="interface.DHCPEnabled"  ng-model="ipv4.PrefixLength"/>
+              <label for="ipv4-prefix-{{$index+1}}">Netmask Prefix Length</label>
+              <input id="ipv4-prefix-{{$index+1}}" class="column small-6" ng-change="ipv4.updatePrefix = true"
+                type="number" min="1" max="32" step="1" ng-disabled="interface.DHCPEnabled"
+                ng-model="ipv4.PrefixLength" />
               <button class="network-config_remove-button inline" ng-click="removeIpv4Address($index)">Remove</button>
             </div>
           </fieldset>
@@ -74,39 +81,42 @@
             </div>
           </div>
         </div>
-      </fieldset>
-    </section>
-    <section class="row column">
-      <div class="column small-12 page-header">
-        <h2 class="inline">DNS settings</h2>
       </div>
-      <fieldset>
+    </fieldset>
+    <fieldset class="net-config__fieldset row column">
+      <legend class="column small-12 page-header h2">
+        DNS settings
+      </legend>
+      <div class="net-config__fieldset-content">
         <!-- Call Nameservers "DNS Servers" on the GUI -->
-        <fieldset class="net-config__static-ip-wrap" ng-repeat="dns in interface.Nameservers track by $index">
+        <div class="net-config__static-ip-wrap" ng-repeat="dns in interface.Nameservers track by $index">
           <div class="column small-12">
             <label for="net-config__prime-dns{{$index+1}}">DNS Server {{$index+1}}</label>
-            <input id="net-config__prime-dns{{$index+1}}" class="network-input column small-6 large-4 inline" type="text" ng-model="dns" ng-blur="interface.Nameservers[$index] = dns" set-focus-on-new-input/>
+            <input id="net-config__prime-dns{{$index+1}}" class="network-input column small-6 large-4 inline"
+              type="text" ng-model="dns" ng-blur="interface.Nameservers[$index] = dns" set-focus-on-new-input />
             <button class="network-config_remove-button inline" ng-click="removeDNSField($index)">Remove</button>
           </div>
-        </fieldset>
+        </div>
         <div class="row column">
           <div class="column small-12">
             <button type="button" class="btn-primary inline dns_add" ng-click="addDNSField()">Add DNS server</button>
           </div>
         </div>
-      </fieldset>
-      <div class="network-config__submit-wrapper">
-        <button type="button" class="btn-primary inline" ng-click="confirmSettings=true;">Save settings</button>
-        <button type="button" class="btn-secondary inline" ng-click="refresh()">Cancel</button>
       </div>
-    </section>
+    </fieldset>
+    <div class="network-config__submit-wrapper">
+      <button type="button" class="btn-primary inline" ng-click="confirmSettings=true;">Save settings</button>
+      <button type="button" class="btn-secondary inline" ng-click="refresh()">Cancel</button>
+    </div>
   </form>
 </div>
 <div class="modal-overlay" tabindex="-1" ng-class="{'active': confirmSettings}"></div>
-<section class="modal" aria-hidden="true" aria-labelledby="modalTitle" aria-describedby="modalDescription" role="dialog" ng-class="{'active': confirmSettings}">
+<section class="modal" aria-hidden="true" aria-labelledby="modalTitle" aria-describedby="modalDescription" role="dialog"
+  ng-class="{'active': confirmSettings}">
   <div class="modal__tftp-unreachable" role="document">
-    <div class="screen-reader-offscreen modal-description">Change network settings</div><!-- accessibility only; used for screen readers -->
-    <div class="page-header ">
+    <div class="screen-reader-offscreen modal-description">Change network settings</div>
+    <!-- accessibility only; used for screen readers -->
+    <div class="page-header">
       <span class="icon icon__warning inline"><span class="accessible-text" role="alert">Warning</span></span>
       <h3 class="modal-title inline">Change network settings</h3>
     </div>
@@ -119,4 +129,4 @@
       <button class="inline btn-primary" ng-click="setNetworkSettings()">Continue</button>
     </div>
   </div>
-</section>
+</section>
\ No newline at end of file
diff --git a/app/configuration/controllers/snmp-controller.html b/app/configuration/controllers/snmp-controller.html
index ee3d0d0..35cd1f4 100644
--- a/app/configuration/controllers/snmp-controller.html
+++ b/app/configuration/controllers/snmp-controller.html
@@ -13,13 +13,13 @@
     <div class="small-8">
       <div class="row column manager_group">
         <div class="small-5 snmp__address">
-          <h3>Host name or IP Address</h3>
+          <h3 id="host-name-ip-label">Host name or IP Address</h3>
         </div>
         <div class="small-5 snmp__port label">
-          <h3>Port</h3>
+          <h3 id="port-label">Port</h3>
         </div>
       </div>
-      <div class="row column manager_group empty" ng-if="managers.length <1">
+      <div class="row column manager_group empty" ng-if="managers.length < 1">
         No managers have been added yet.
       </div>
       <form id="snmp__form" name="snmp__form" novalidate>
@@ -28,40 +28,45 @@
             <div class="row column">
               <div class="small-10">
                 <div class="row column">
-                  <div class="small-offset-6 small-6 help__text snmp__port">
+                  <div id="snmp-manager{{$index+1}}-port-description" class="small-offset-6 small-6 help__text snmp__port">
                     Value must be between 0-65,535
                   </div>
                 </div>
-                <div class="row column" ng-class="{'submitted':submitted}">
-                  <div class="small-6 snmp__address">
-                    <input id="snmp-manager{{$index+1}}-address"
-                           name="snmp-manager{{$index+1}}-address"
-                           type="text"
-                           ng-change="manager.updateAddress=true"
-                           ng-model="manager.address"
-                           required />
-                    <div ng-messages="manager_group['snmp-manager'+($index+1)+'-address'].$error" class="form-error" ng-class="{'visible': manager_group['snmp-manager'+($index+1)+'-address'].$touched || submitted}">
-                      <p ng-message="required" role="alert">Field is required</p>
+                <fieldset>
+                  <div class="row column" ng-class="{'submitted':submitted}">
+                    <div class="small-6 snmp__address">
+                      <input id="snmp-manager{{$index+1}}-address"
+                            name="snmp-manager{{$index+1}}-address"
+                            type="text"
+                            ng-change="manager.updateAddress=true"
+                            ng-model="manager.address"
+                            required
+                            aria-labeledby="host-name-ip-label"/>
+                      <div ng-messages="manager_group['snmp-manager'+($index+1)+'-address'].$error" class="form-error" ng-class="{'visible': manager_group['snmp-manager'+($index+1)+'-address'].$touched || submitted}">
+                        <p ng-message="required" role="alert">Field is required</p>
+                      </div>
                     </div>
-                  </div>
-                  <div class="small-6 snmp__port">
-                    <input id="snmp-manager{{$index+1}}-port"
-                           name="snmp-manager{{$index+1}}-port"
-                           type="number"
-                           min="0"
-                           max="65535"
-                           step="1"
-                           ng-change="manager.updatePort=true"
-                           ng-model="manager.port"
-                           required/>
-                    <div ng-messages="manager_group['snmp-manager'+($index+1)+'-port'].$error" class="form-error" ng-class="{'visible': manager_group['snmp-manager'+($index+1)+'-port'].$touched || submitted}">
-                      <div ng-message-exp="['min', 'max', 'number', 'step']">
-                        Invalid format
+                    <div class="small-6 snmp__port">
+                      <input id="snmp-manager{{$index+1}}-port"
+                            name="snmp-manager{{$index+1}}-port"
+                            type="number"
+                            min="0"
+                            max="65535"
+                            step="1"
+                            ng-change="manager.updatePort=true"
+                            ng-model="manager.port"
+                            required
+                            aria-labeledby="port-label"
+                            aria-describedby="snmp-manager{{$index+1}}-port-description"/>
+                      <div ng-messages="manager_group['snmp-manager'+($index+1)+'-port'].$error" class="form-error" ng-class="{'visible': manager_group['snmp-manager'+($index+1)+'-port'].$touched || submitted}">
+                        <div ng-message-exp="['min', 'max', 'number', 'step']">
+                          Invalid format
+                        </div>
+                        <p ng-message="required" role="alert">Field is required</p>
                       </div>
-                      <p ng-message="required" role="alert">Field is required</p>
                     </div>
                   </div>
-                </div>
+                </fieldset>
               </div>
               <div class="small-2 align-self-center snmp__buttons">
                 <button class="edit_button" type="button">
diff --git a/app/configuration/styles/network.scss b/app/configuration/styles/network.scss
index 0a822bd..b0de4f7 100644
--- a/app/configuration/styles/network.scss
+++ b/app/configuration/styles/network.scss
@@ -14,12 +14,19 @@
     height: 2.1em;
     margin-bottom: 1.2em;
   }
-  label {
-    min-width: 300px;
-  }
-  fieldset {
-    padding-left: 1.8em;
+
+  .net-config__fieldset {
+    margin-bottom: 1.2rem;
+
+    legend {
+      padding-bottom: 0.5rem;
+    }
+
+    .net-config__fieldset-content {
+      padding-left: 1.8em;
+    }
   }
+
   .net-config__static-ip-wrap {
     width: 100%;
     padding-left: 0;
@@ -39,6 +46,13 @@
     margin-top: 3em;
     padding-top: 1em;
     border-top: 1px solid $medgrey;
+
+    &::after {
+      content: " ";
+      display: block;
+      clear: both;
+    }
+
     button {
       float: right;
       margin: .5em;
diff --git a/app/configuration/styles/snmp.scss b/app/configuration/styles/snmp.scss
index 47dc80f..ea20a6a 100644
--- a/app/configuration/styles/snmp.scss
+++ b/app/configuration/styles/snmp.scss
@@ -90,11 +90,11 @@
   }
   .btn-add {
     &:focus {
-      outline:0;
+      outline-offset: 3px;
     }
-    margin-top: 1em;
+    margin: 2em 0;
     color: $primebtn__bg;
-    padding: 2em 0 3em 0;
+    padding: 1em 0;
   }
   .snmp__submit-wrapper {
     width: 100%;
diff --git a/app/overview/controllers/system-overview-controller.html b/app/overview/controllers/system-overview-controller.html
index 57a5f18..629e0ab 100644
--- a/app/overview/controllers/system-overview-controller.html
+++ b/app/overview/controllers/system-overview-controller.html
@@ -9,25 +9,33 @@
       <!-- Server Metadata -->
       <div class="row overview__server-metadata">
         <div class="column large-4">
-          <h3>Server information</h3>
+          <h2 class="h3">Server information</h2>
         </div>
         <div class="column large-8">
           <ul class="overview__metadata-wrapper">
             <li class="overview__metadata-block">
-              <p class="content-label">Model</p>
-              <p class="courier-bold">{{server_info.Model}}</p>
+              <dl>
+                <dt class="content-label">Model</dt>
+                <dd class="courier-bold">{{server_info.Model}}</dd>
+              </dl>
             </li>
             <li class="overview__metadata-block">
-              <p class="content-label">Manufacturer</p>
-              <p class="courier-bold">{{server_info.Manufacturer}}</p>
+              <dl>
+                  <dt class="content-label">Manufacturer</dt>
+                  <dd class="courier-bold">{{server_info.Manufacturer}}</dd>
+              </dl>
             </li>
             <li class="overview__metadata-block">
-              <p class="content-label">Firmware version</p>
-              <p class="courier-bold">{{server_firmware}}</p>
+              <dl>
+                <dt class="content-label">Firmware version</dt>
+                <dd class="courier-bold">{{server_firmware}}</dd>
+              </dl>
             </li>
             <li class="overview__metadata-block">
-              <p class="content-label">Serial number</p>
-              <p class="courier-bold">{{server_info.SerialNumber}}</p>
+              <dl>
+                <dt class="content-label">Serial number</dt>
+                <dd class="courier-bold">{{server_info.SerialNumber}}</dd>
+              </dl>
             </li>
           </ul>
         </div>
@@ -35,25 +43,33 @@
       <!-- BMC Metadata -->
       <div class="row overview__server-metadata">
         <div class="column large-4">
-          <h3>BMC information</h3>
+          <h2 class="h3">BMC information</h2>
         </div>
         <div class="column large-8">
           <ul class="overview__metadata-wrapper">
             <li class="overview__metadata-block">
-              <p class="content-label">Hostname</p>
-              <p class="courier-bold overview__hostname">{{dataService.hostname}}</p>
+              <dl>
+                <dt class="content-label">Hostname</dt>
+                <dd class="courier-bold overview__hostname">{{dataService.hostname}}</dd>
+              </dl>
             </li>
             <li class="overview__metadata-block">
-              <p class="content-label">IP addresses</p>
-              <p class="courier-bold" ng-repeat="ip_address in bmc_ip_addresses">{{ip_address}}</p>
+              <dl>
+                <dt class="content-label">IP addresses</dt>
+                <dd class="courier-bold" ng-repeat="ip_address in bmc_ip_addresses">{{ip_address}}</dd>
+              </dl>
             </li>
             <li class="overview__metadata-block">
-              <p class="content-label">Firmware Version</p>
-              <p class="courier-bold">{{bmc_firmware}}</p>
+              <dl>
+                <dt class="content-label">Firmware Version</dt>
+                <dd class="courier-bold">{{bmc_firmware}}</dd>
+              </dl>
             </li>
             <li class="overview__metadata-block">
-              <p class="content-label">Mac address</p>
-              <p class="courier-bold">{{dataService.mac_address}}</p>
+              <dl>
+                <dt class="content-label">Mac address</dt>
+                <dd class="courier-bold">{{dataService.mac_address}}</dd>
+              </dl>
             </li>
           </ul>
         </div>
@@ -61,17 +77,21 @@
       <!-- Power metadata -->
       <div class="row overview__server-metadata">
         <div class="column large-4">
-          <h3>Power information</h3>
+          <h2 class="h3">Power information</h2>
         </div>
         <div class="column large-8">
           <ul class="overview__metadata-wrapper">
             <li class="overview__metadata-block">
-              <p class="content-label">Power Consumption</p>
-              <p class="courier-bold">{{power_consumption}}</p>
+              <dl>
+                <dt class="content-label">Power Consumption</dt>
+                <dd class="courier-bold">{{power_consumption}}</dd>
+              </dl>
             </li>
             <li class="overview__metadata-block">
-              <p class="content-label">Power Cap</p>
-              <p class="courier-bold">{{power_cap}}</p>
+              <dl>
+                <dt class="content-label">Power Cap</dt>
+                <dd class="courier-bold">{{power_cap}}</dd>
+              </dl>
             </li>
           </ul>
         </div>
@@ -83,10 +103,10 @@
         <a href="#/server-health/event-log/high" class="quick-links__item quick-links__events event-log__events" ng-show="logs.length">
           <p class="inline quick-links__event-copy">View {{logs.length}} high priority events</p><!-- link to event log filtered to the high priority events -->
         </a>
-        <div class="quick-links__item no-icon">
-          <p class="inline quick-links__label">BMC time</p>
-          <p class="inline courier-bold float-right bmc-time">{{ bmc_time | localeDate }}</p>
-        </div>
+        <dl class="quick-links__item no-icon">
+          <dt class="inline quick-links__label">BMC time</dt>
+          <dd class="inline courier-bold float-right bmc-time">{{ bmc_time | localeDate }}</dd>
+        </dl>
         <div class="quick-links__item no-icon">
           <p class="inline quick-links__label">Turn <span ng-if="dataService.LED_state == 'off'">on</span><span ng-if="dataService.LED_state == 'on'">off</span> server LED</p>
           <div class="toggle inline float-right">
@@ -107,13 +127,13 @@
         <a href="#/configuration/network" class="quick-links__item">
           <p class="inline quick-links__label">Edit network settings</p>
         </a>
-      </div>
+      </d>
     </div>
   </section>
   <section class="row">
     <div class="column large-12 overview__event-log event-log__events" ng-show="logs.length">
       <div class="page-header">
-        <h3>High priority events ({{logs.length}})</h3>
+        <h2 class="h3">High priority events ({{logs.length}})</h2>
         <a href="#/server-health/event-log/" class="inline float-right">View all event logs</a>
       </div>
 
@@ -140,7 +160,7 @@
 
     <div class="row column overview__event-log event-log__events" ng-show="!logs.length">
       <div class="page-header">
-        <h3>High priority events (0)</h3>
+        <h2 class="h3">High priority events (0)</h2>
       </div>
       <p>There are no high priority events to display at this time.</p>
     </div>
@@ -151,12 +171,12 @@
   <div class="modal__upload" role="document">
     <div class="screen-reader-offscreen modal-description">Edit hostname</div><!-- accessibility only; used for screen readers -->
     <div class="page-header ">
-      <h3 class="modal-title"><span class="icon icon__info"><svg xmlns="http://www.w3.org/2000/svg"
+      <h2 class="modal-title"><span class="icon icon__info"><svg xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 32 32"><path
           d="M18 14h-6v2h1v6h-2v2h8v-2h-2z"/><circle cx="16" cy="10" r="2"/><path
           d="M16 2C8.269 2 2 8.269 2 16s6.269 14 14 14 14-6.269 14-14S23.731 2 16 2zm0 26C9.383 28 4 22.617 4 16S9.383 4 16 4s12 5.383 12 12-5.383 12-12 12z"/></svg></span>
         Edit hostname
-      </h3>
+      </h2>
     </div>
     <div class="modal__content">
       <p>The hostname is displayed in the header and can contain any characters up to a total of 64</p>
diff --git a/app/server-control/controllers/power-usage-controller.html b/app/server-control/controllers/power-usage-controller.html
index 5369827..62ca3da 100644
--- a/app/server-control/controllers/power-usage-controller.html
+++ b/app/server-control/controllers/power-usage-controller.html
@@ -29,7 +29,7 @@
                 <p>Set a power cap to keep power consumption at or below the specified value in watts.</p>
               </div>
               <div class="small-12 large-4">
-                <p class="content-label power-cap-value-label">POWER CAP VALUE IN WATTS</p>
+                <label for="power-cap" class="content-label power-cap-value-label">POWER CAP VALUE IN WATTS</label>
                 <input id="power-cap" type="number" min="100" max="10000" step="1" ng-disabled="!power_cap.PowerCapEnable"  ng-model="power_cap.PowerCap"/>
               </div>
             </li>
diff --git a/app/server-health/controllers/inventory-overview-controller.html b/app/server-health/controllers/inventory-overview-controller.html
index 8a864ea..c70c5da 100644
--- a/app/server-health/controllers/inventory-overview-controller.html
+++ b/app/server-health/controllers/inventory-overview-controller.html
@@ -27,7 +27,7 @@
     <div class="small-12 harware__details" ng-repeat="inventory in hardwares|filter:filterBySearchTerms">
       <div class="hardware__title row column" ng-class="{'expanded': inventory.expanded}" ng-click="inventory.expanded = ! inventory.expanded">
         <h4>{{inventory.title}}</h4>
-        <button class="accord-trigger float-right" ng-class="{'active': inventory.expanded}"></button>
+        <button class="accord-trigger float-right" ng-class="{'active': inventory.expanded}" aria-expanded="{{inventory.expanded ? 'true' : 'false'}}" aria-expanded="{{inventory.expanded ? 'true' : 'false'}}" aria-label="{{inventory.expanded ? 'collapse' : 'expand'}}"></button>
       </div>
       <div class="hardware__items" ng-hide="!inventory.expanded" ng-class="{'expanded': inventory.expanded}">
         <div class="row column">