diff --git a/_shared_assets/static/custom.css b/_shared_assets/static/custom.css
index 04b115a40e0..f3faaa05b9a 100644
--- a/_shared_assets/static/custom.css
+++ b/_shared_assets/static/custom.css
@@ -46,6 +46,18 @@ h6 {
 .rst-versions .rst-current-version .fa-book {
 	display: none;
 }
+
+/* The version toggle is now a <button> element. Reset default button
+   styling so it looks identical to the old <span>. */
+button.rst-current-version {
+	background: none;
+	border: none;
+	padding: 12px;
+	font-family: inherit;
+	font-size: 90%;
+	width: 100%;
+	cursor: pointer;
+}
 .rst-versions .rst-current-version:before {
 	content: 'Nextcloud';
 	margin-right: auto;
@@ -59,6 +71,10 @@ h6 {
 	margin-left: 5px;
 }
 
+.rst-versions .rst-current-version .fa-caret-down:not(:last-of-type) {
+	margin-right: 10px;
+}
+
 /* Code blocks */
 .highlight {
 	/* nc blue */
diff --git a/admin_manual/_templates/versions.html b/admin_manual/_templates/versions.html
index 70c5e22dee2..6c037362d64 100644
--- a/admin_manual/_templates/versions.html
+++ b/admin_manual/_templates/versions.html
@@ -1,11 +1,18 @@
 {% if READTHEDOCS %}
 {# Add rst-badge after rst-versions for small badge style. #}
   <div class="rst-versions" data-toggle="rst-versions" role="note" aria-label="versions">
-    <span class="rst-current-version" data-toggle="rst-current-version">
+    {# Use <button> so the toggle has native keyboard semantics and can
+       carry aria-expanded. The RTD theme JS uses [data-toggle] selectors
+       so the element type does not matter for the toggle behaviour. #}
+    <button type="button"
+            class="rst-current-version"
+            data-toggle="rst-current-version"
+            aria-expanded="false"
+            aria-controls="rst-other-versions-admin">
       ☁️ {{ current_version }}
-      <span class="fa fa-caret-down"></span>
-    </span>
-    <div class="rst-other-versions">
+      <span class="fa fa-caret-down" aria-hidden="true"></span>
+    </button>
+    <div id="rst-other-versions-admin" class="rst-other-versions">
       <dl>
         <dt>☁️ {{ _('Versions') }}</dt>
         {% for slug, url in versions|reverse %}
@@ -22,4 +29,15 @@
       </dl>
     </div>
   </div>
-{% endif %}
\ No newline at end of file
+  <script>
+    /* Keep aria-expanded in sync with the RTD theme toggle class. */
+    (function () {
+      var btn = document.querySelector('.rst-current-version[aria-expanded]');
+      if (!btn) return;
+      btn.addEventListener('click', function () {
+        var expanded = this.getAttribute('aria-expanded') === 'true';
+        this.setAttribute('aria-expanded', expanded ? 'false' : 'true');
+      });
+    }());
+  </script>
+{% endif %}
diff --git a/developer_manual/_templates/versions.html b/developer_manual/_templates/versions.html
index 70c5e22dee2..ea5cd040551 100644
--- a/developer_manual/_templates/versions.html
+++ b/developer_manual/_templates/versions.html
@@ -1,11 +1,18 @@
 {% if READTHEDOCS %}
 {# Add rst-badge after rst-versions for small badge style. #}
   <div class="rst-versions" data-toggle="rst-versions" role="note" aria-label="versions">
-    <span class="rst-current-version" data-toggle="rst-current-version">
+    {# Use <button> so the toggle has native keyboard semantics and can
+       carry aria-expanded. The RTD theme JS uses [data-toggle] selectors
+       so the element type does not matter for the toggle behaviour. #}
+    <button type="button"
+            class="rst-current-version"
+            data-toggle="rst-current-version"
+            aria-expanded="false"
+            aria-controls="rst-other-versions-dev">
       ☁️ {{ current_version }}
-      <span class="fa fa-caret-down"></span>
-    </span>
-    <div class="rst-other-versions">
+      <span class="fa fa-caret-down" aria-hidden="true"></span>
+    </button>
+    <div id="rst-other-versions-dev" class="rst-other-versions">
       <dl>
         <dt>☁️ {{ _('Versions') }}</dt>
         {% for slug, url in versions|reverse %}
@@ -22,4 +29,15 @@
       </dl>
     </div>
   </div>
-{% endif %}
\ No newline at end of file
+  <script>
+    /* Keep aria-expanded in sync with the RTD theme toggle class. */
+    (function () {
+      var btn = document.querySelector('.rst-current-version[aria-expanded]');
+      if (!btn) return;
+      btn.addEventListener('click', function () {
+        var expanded = this.getAttribute('aria-expanded') === 'true';
+        this.setAttribute('aria-expanded', expanded ? 'false' : 'true');
+      });
+    }());
+  </script>
+{% endif %}
diff --git a/user_manual/_templates/versions.html b/user_manual/_templates/versions.html
index 78076e86268..d5ab32f072c 100644
--- a/user_manual/_templates/versions.html
+++ b/user_manual/_templates/versions.html
@@ -58,13 +58,20 @@
   {% set sorted_languages = language_tuples | sort(attribute='name') %}
 
   <div class="rst-versions" data-toggle="rst-versions" role="note" aria-label="versions">
-    <span class="rst-current-version" data-toggle="rst-current-version">
+    {# Use <button> so the toggle has native keyboard semantics and can
+       carry aria-expanded. The RTD theme JS uses [data-toggle] selectors
+       so the element type does not matter for the toggle behaviour. #}
+    <button type="button"
+            class="rst-current-version"
+            data-toggle="rst-current-version"
+            aria-expanded="false"
+            aria-controls="rst-other-versions-user">
       🌐 {{ language_names.get(language, language) }}
-      <span class="fa fa-caret-down"></span>
-       ☁️ {{ current_version }}
-      <span class="fa fa-caret-down"></span>
-    </span>
-    <div class="rst-other-versions">
+      <span class="fa fa-caret-down" aria-hidden="true"></span>
+       ☁️ {{ current_version }}
+      <span class="fa fa-caret-down" aria-hidden="true"></span>
+    </button>
+    <div id="rst-other-versions-user" class="rst-other-versions">
       <dl>
         <dt>🌐 {{ _('Languages') }}</dt>
         {% for lang in sorted_languages %}
@@ -97,4 +104,15 @@
       </dl>
     </div>
   </div>
+  <script>
+    /* Keep aria-expanded in sync with the RTD theme toggle class. */
+    (function () {
+      var btn = document.querySelector('.rst-current-version[aria-expanded]');
+      if (!btn) return;
+      btn.addEventListener('click', function () {
+        var expanded = this.getAttribute('aria-expanded') === 'true';
+        this.setAttribute('aria-expanded', expanded ? 'false' : 'true');
+      });
+    }());
+  </script>
 {% endif %}