diff --git a/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css b/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css
index e88b095ae6..79b4dbb5fd 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css
@@ -16,6 +16,13 @@
   padding: 0;
   transition: max-height 0.5s ease-in;
 }
+
+@media screen and (prefers-reduced-motion: reduce) {
+  .menu-main {
+    transition: max-height 1.25s ease-in;
+  }
+}
+
 .menu-main--active {
   /**
    * An exact max-height value must be set to make possible to animate the menu display.
@@ -25,6 +32,7 @@
   max-height: 18.75rem;
   overflow-y: auto;
 }
+
 .menu-main-toggle {
   width: 41px;
   height: 41px;
@@ -37,16 +45,20 @@
   text-align: left;
   background-color: transparent;
 }
+
 .menu-main-toggle:hover {
   background-color: transparent;
 }
+
 .menu-main-toggle svg {
   display: block;
 }
+
 .menu-main__item {
   margin-top: 0.8em;
   text-align: center;
 }
+
 .menu-main__link {
   background-color: inherit;
   display: inline-block;
@@ -64,6 +76,7 @@
   border-bottom-color: rgba(255, 97, 56, 0.3);
   color: #ff6138;
 }
+
 .menu-main__link:active,
 .menu-main__link.is-active {
   text-decoration: none;
diff --git a/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.es6.js b/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.es6.js
index bd781907b7..5aecd55612 100644
--- a/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.es6.js
+++ b/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.es6.js
@@ -6,10 +6,26 @@
  (function () {
    const toggler = document.querySelector('[data-drupal-selector="menu-main-toggle"]');
    const menu = document.querySelector('[data-drupal-selector="menu-main"]');
+   var aria = false;
 
    function toggleMenu() {
      toggler.classList.toggle('menu-main-toggle--active');
      menu.classList.toggle('menu-main--active');
+
+     if (aria === false) {
+       aria = true;
+     }
+     else {
+       aria = false;
+     }
+
+     if (aria === true) {
+       toggler.setAttribute('aria-expanded', 'true');
+     }
+     else {
+       toggler.setAttribute('aria-expanded', 'false');
+     }
+
      return false;
    }
 
diff --git a/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.js b/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.js
index 0705b50f55..535ddcc37b 100644
--- a/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.js
+++ b/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.js
@@ -8,10 +8,24 @@
 (function () {
   var toggler = document.querySelector('[data-drupal-selector="menu-main-toggle"]');
   var menu = document.querySelector('[data-drupal-selector="menu-main"]');
+  var aria = false;
 
   function toggleMenu() {
     toggler.classList.toggle('menu-main-toggle--active');
     menu.classList.toggle('menu-main--active');
+
+    if (aria === false) {
+      aria = true;
+    } else {
+      aria = false;
+    }
+
+    if (aria === true) {
+      toggler.setAttribute('aria-expanded', 'true');
+    } else {
+      toggler.setAttribute('aria-expanded', 'false');
+    }
+
     return false;
   }
 
diff --git a/core/profiles/demo_umami/themes/umami/templates/components/navigation/block--umami-main-menu.html.twig b/core/profiles/demo_umami/themes/umami/templates/components/navigation/block--umami-main-menu.html.twig
index 51174d43c9..99f6a0532f 100644
--- a/core/profiles/demo_umami/themes/umami/templates/components/navigation/block--umami-main-menu.html.twig
+++ b/core/profiles/demo_umami/themes/umami/templates/components/navigation/block--umami-main-menu.html.twig
@@ -40,8 +40,8 @@
   ]
 %}
 
-<div class="menu-main-togglewrap">
-  <button type="button" name="menu_toggle" class="menu-main-toggle" data-drupal-selector="menu-main-toggle" aria-label="Toggle the menu">{% include active_theme_path() ~ '/images/svg/menu-icon.svg' %}</button>
+<div id="menu-main-toggle" class="menu-main-togglewrap">
+  <button type="button" name="menu_toggle" class="menu-main-toggle" data-drupal-selector="menu-main-toggle" aria-label="Toggle the menu" aria-expanded="false" aria-controls="menu-main-toggle">{% include active_theme_path() ~ '/images/svg/menu-icon.svg' %}</button>
 </div>
 
 {% set heading_id = attributes.id ~ '-menu'|clean_id %}
diff --git a/core/profiles/demo_umami/themes/umami/templates/components/navigation/menu--main.html.twig b/core/profiles/demo_umami/themes/umami/templates/components/navigation/menu--main.html.twig
index 0c12b120e6..0abb202394 100644
--- a/core/profiles/demo_umami/themes/umami/templates/components/navigation/menu--main.html.twig
+++ b/core/profiles/demo_umami/themes/umami/templates/components/navigation/menu--main.html.twig
@@ -46,7 +46,7 @@
   %}
   {% if items %}
     {% if menu_level == 0 %}
-      <ul{{ attributes.addClass(menu_classes).setAttribute('data-drupal-selector','menu-main') }}> {# 1. #}
+      <ul{{ attributes.addClass(menu_classes).setAttribute('data-drupal-selector','menu-main').setAttribute('aria-expanded', 'false') }}> {# 1. #}
     {% else %}
       <ul{{ attributes.removeClass(menu_classes).addClass(submenu_classes) }}> {# 1. #}
     {% endif %}