diff --git a/opentech/static_src/src/sass/components/_button.scss b/opentech/static_src/src/sass/components/_button.scss
index 8b753175cd50d9b180c0fd8ce594af189d3e700f..e489246da4b56612a69e376fa604f915a5656562 100644
--- a/opentech/static_src/src/sass/components/_button.scss
+++ b/opentech/static_src/src/sass/components/_button.scss
@@ -13,6 +13,11 @@
         margin-left: 20px;
     }
 
+    &--contains-icons {
+        display: flex;
+        align-items: center;
+    }
+
     // cannot conform to BEM here in order to be able to override google button styles
     &--google-translate {
         display: none;
diff --git a/opentech/templates/base.html b/opentech/templates/base.html
index 7a83d3948ca76f730a4da76af4d771a735bd3cb0..1a30ece69fd5e37c5c7dbb0dee1cb59c2ca73f0c 100644
--- a/opentech/templates/base.html
+++ b/opentech/templates/base.html
@@ -82,11 +82,11 @@
                 </a>
 
                 <div class="header__inner header__inner--mobile-buttons">
-                    <button class="button button--left-space js-search-toggle">
+                    <button class="button js-search-toggle" aria-haspopup="true">
                         <svg class="header__icon header__icon--open-search header__icon--open-search-menu-closed icon icon--mobile-menu"><use xlink:href="#magnifying-glass"></use></svg>
                         <svg class="header__icon header__icon--close-search header__icon--close-search-menu-closed icon icon--mobile-menu"><use xlink:href="#cross"></use></svg>
                     </button>
-                    <button class="button js-mobile-menu-toggle" aria-haspopup="true" >
+                    <button class="button button--left-space js-mobile-menu-toggle" aria-haspopup="true">
                         <svg class="icon icon--mobile-menu"><use xlink:href="#mobile-menu-toggle"></use></svg>
                     </button>
                 </div>
@@ -94,7 +94,7 @@
                 <section class="header__menus header__menus--desktop">
                     {% primarynav %}
 
-                    <button class="button button--left-space js-search-toggle">
+                    <button class="button button--contains-icons button--left-space js-search-toggle" aria-haspopup="true">
                         <svg class="header__icon header__icon--open-search icon"><use xlink:href="#magnifying-glass"></use></svg>
                         <svg class="header__icon header__icon--close-search icon"><use xlink:href="#cross"></use></svg>
                     </button>
@@ -106,11 +106,11 @@
                             <svg class="header__logo header__logo--mobile"><use xlink:href="#logo-mobile"></use></svg>
                         </a>
                         <div class="header__inner header__inner--mobile-buttons">
-                            <button class="button js-search-toggle">
+                            <button class="button js-search-toggle" aria-haspopup="true">
                                 <svg class="header__icon header__icon--open-search header__icon--open-search-menu-open icon icon--mobile-menu"><use xlink:href="#magnifying-glass"></use></svg>
                                 <svg class="header__icon header__icon--close-search header__icon--close-search-menu-open icon icon--mobile-menu"><use xlink:href="#cross"></use></svg>
                             </button>
-                            <button class="button js-mobile-menu-close">
+                            <button class="button button--left-space js-mobile-menu-close">
                                 <svg class="header__icon header__icon--cross icon icon--mobile-menu"><use xlink:href="#cross"></use></svg>
                             </button>
                         </div>