diff --git a/assets/components/atoms/list/list.scss b/assets/components/atoms/list/list.scss
index dd5ae80f..34b9e83b 100644
--- a/assets/components/atoms/list/list.scss
+++ b/assets/components/atoms/list/list.scss
@@ -107,6 +107,7 @@ ol {
 .list-unstyled,
 .list-inline,
 .nav,
+.nav-lang,
 nav:not(.table-of-contents) {
 
   li {
diff --git a/assets/components/atoms/nav-lang/nav-lang-short.twig b/assets/components/atoms/nav-lang/nav-lang-short.twig
index 36ec8c69..374e3687 100644
--- a/assets/components/atoms/nav-lang/nav-lang-short.twig
+++ b/assets/components/atoms/nav-lang/nav-lang-short.twig
@@ -1,6 +1,6 @@
 {% if language is not defined %}{% set language = 'fr' %}{% endif %}
 
-<nav class="nav-lang nav-lang-short ml-auto">
+<div class="nav-lang nav-lang-short ml-auto">
   <ul>
     {% if language == 'fr' %}
     <li>
@@ -27,4 +27,4 @@
       </li>
     {% endif %}
   </ul>
-</nav>
+</div>
diff --git a/assets/components/atoms/nav-lang/nav-lang.twig b/assets/components/atoms/nav-lang/nav-lang.twig
index 8d487c2e..fb722214 100644
--- a/assets/components/atoms/nav-lang/nav-lang.twig
+++ b/assets/components/atoms/nav-lang/nav-lang.twig
@@ -1,4 +1,4 @@
-<nav class="nav-lang ml-auto dropdown" aria-label="Change language">
+<div class="nav-lang ml-auto dropdown" aria-label="Change language">
   <button class="dropdown-toggle btn btn-secondary" aria-haspopup="true" aria-expanded="false" data-toggle="dropdown">
     {% include '@atoms/icon/icon.twig' with {icon: 'icon-planet'} %}
     <span>FR</span>
@@ -26,4 +26,4 @@
       </a>
     </li>
   </ul>
-</nav>
+</div>
diff --git a/assets/components/atoms/nav-toggle-mobile/nav-toggle-mobile.twig b/assets/components/atoms/nav-toggle-mobile/nav-toggle-mobile.twig
index b1ae40ca..1934c424 100644
--- a/assets/components/atoms/nav-toggle-mobile/nav-toggle-mobile.twig
+++ b/assets/components/atoms/nav-toggle-mobile/nav-toggle-mobile.twig
@@ -1,4 +1,4 @@
-<button class="btn btn-secondary nav-toggle-mobile d-xl-none">
+<button class="btn btn-secondary nav-toggle-mobile d-xl-none" aria-haspopup="true" aria-expanded="false" aria-controls="main-navigation">
   <span class="label">Menu</span>
   <div class="hamburger">
     <span></span>
diff --git a/assets/components/molecules/search/search-mobile.twig b/assets/components/molecules/search/search-mobile.twig
index 217baef1..8812d3a0 100644
--- a/assets/components/molecules/search/search-mobile.twig
+++ b/assets/components/molecules/search/search-mobile.twig
@@ -1,7 +1,7 @@
 {% if language is not defined %}{% set language = 'fr' %}{% endif %}
 
 <form action="#" class="d-xl-none">
-  <a id="search-mobile-toggle" class="search-mobile-toggle searchform-controller" href="#">
+  <button id="search-mobile-toggle" class="search-mobile-toggle searchform-controller">
     {% include '@atoms/icon/icon.twig' with { icon: 'icon-search' } %}
     {% if language == 'fr' %}
     <span class="toggle-label sr-only">Afficher / masquer le formulaire de recherche</span>
@@ -9,7 +9,7 @@
     {% if language == 'en' %}
     <span class="toggle-label sr-only">Show / hide the search form</span>
     {% endif %}
-  </a>
+  </button>
   <div class="input-group search-mobile" role="search">
     <div class="input-group-prepend">
       <span class="input-group-text">
diff --git a/assets/components/molecules/search/search.scss b/assets/components/molecules/search/search.scss
index 512aca84..4f801550 100644
--- a/assets/components/molecules/search/search.scss
+++ b/assets/components/molecules/search/search.scss
@@ -5,6 +5,7 @@
 
   .dropdown-toggle {
     padding: $spacer;
+
     &:after {
       display: none;
     }
@@ -23,6 +24,19 @@
   }
 }
 
+.search button.dropdown-toggle,
+button.search-mobile-toggle {
+  background: transparent;
+  border: 0;
+  transition:
+    text-decoration-color 0.2s ease-in-out,
+    color 0.2s ease-in-out;
+
+  &:hover {
+    color: $red;
+  }
+}
+
 .search-mobile-toggle {
 
   .icon {
diff --git a/assets/components/molecules/search/search.twig b/assets/components/molecules/search/search.twig
index da895842..c8c9aeca 100644
--- a/assets/components/molecules/search/search.twig
+++ b/assets/components/molecules/search/search.twig
@@ -1,9 +1,15 @@
 {% if language is not defined %}{% set language = 'fr' %}{% endif %}
 
 <div class="dropdown dropright search d-none d-xl-block">
-  <a class="dropdown-toggle" href="#" data-toggle="dropdown">
+  <button class="dropdown-toggle" href="#" data-toggle="dropdown">
     {% include "@atoms/icon/icon.twig" with { icon: 'icon-search' } %}
-  </a>
+    {% if language == 'fr' %}
+    <span class="sr-only">Afficher le formulaire de recherche</span>
+    {% endif %}
+    {% if language == 'en' %}
+    <span class="sr-only">Show search form</span>
+    {% endif %}
+  </button>
   <form action="#" class="dropdown-menu border-0 p-0">
     <div class="search-form mt-1 input-group">
       {% if language == 'fr' %}
diff --git a/assets/components/organisms/header/header.scss b/assets/components/organisms/header/header.scss
index df9c76fe..5463a509 100644
--- a/assets/components/organisms/header/header.scss
+++ b/assets/components/organisms/header/header.scss
@@ -120,6 +120,16 @@
     .icon { font-size: 0.9em; }
   }
 
+  nav.navigation {
+    flex: 0 0 auto;
+    margin: 0 0 0 (3.7 * $spacer);
+
+    .nav-header {
+      flex: none;
+      margin: 0;
+    }
+  }
+
   @include media-breakpoint-down (lg) {
     height: $header-height;
     max-height: $header-height;
diff --git a/assets/components/organisms/header/header.twig b/assets/components/organisms/header/header.twig
index 4dab6bca..bb8644a3 100644
--- a/assets/components/organisms/header/header.twig
+++ b/assets/components/organisms/header/header.twig
@@ -6,21 +6,23 @@
   <a class="logo" href="#">
     <img src="svg/epfl-logo.svg" alt="Logo EPFL, École polytechnique fédérale de Lausanne" class="img-fluid">
   </a>
-  <ul aria-hidden="true" class="nav-header d-none d-xl-flex">
-    {% for head in header %}
-      <li id="menu-item-{{ loop.index }}" {% if ( loop.index == 2 ) and ( showCurrentMenuItem|default(true) ) %} class="current-menu-item"{% endif %}>
-        {% if language == 'fr' %}
-        <a class="nav-item" href="{{ head.url_fr }}">{{ head.name_fr }}</a>
-        {% endif %}
-        {% if language == 'en' %}
-        <a class="nav-item" href="{{ head.url_en }}">{{ head.name_en }}</a>
-        {% endif %}
-        {% if language == 'de' %}
-          <a class="nav-item" href="{{ head.url_de }}">{{ head.name_de }}</a>
-        {% endif %}
-      </li>
-    {% endfor %}
-  </ul>
+  <nav class="navigation" role="navigation" aria-label="Menu principal">
+    <ul class="nav-header d-none d-xl-flex">
+      {% for head in header %}
+        <li id="menu-item-{{ loop.index }}" {% if ( loop.index == 2 ) and ( showCurrentMenuItem|default(true) ) %} class="current-menu-item"{% endif %}>
+          {% if language == 'fr' %}
+          <a class="nav-item" href="{{ head.url_fr }}">{{ head.name_fr }}</a>
+          {% endif %}
+          {% if language == 'en' %}
+          <a class="nav-item" href="{{ head.url_en }}">{{ head.name_en }}</a>
+          {% endif %}
+          {% if language == 'de' %}
+            <a class="nav-item" href="{{ head.url_de }}">{{ head.name_de }}</a>
+          {% endif %}
+        </li>
+      {% endfor %}
+    </ul>
+  </nav>
   {% include '@molecules/search/search.twig' %}
   {% include '@molecules/search/search-mobile.twig' %}
   {%  if nav_user %}
diff --git a/assets/components/organisms/nav-main/nav-main.js b/assets/components/organisms/nav-main/nav-main.js
index 5e1bbef5..3e98de26 100644
--- a/assets/components/organisms/nav-main/nav-main.js
+++ b/assets/components/organisms/nav-main/nav-main.js
@@ -15,6 +15,11 @@ const nav = () => {
     }
 
     $('body').toggleClass('mobile-menu-open');
+
+    // update aria-expanded attribute
+    $('.nav-toggle-mobile').attr('aria-expanded',
+      $('.nav-toggle-mobile').attr('aria-expanded') == 'false' ? 'true' : 'false'
+    );
   };
 
   // Open or close desktop toggle navigation, keeping its actual position.