diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 424b063796..f01542ed23 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -26,6 +26,7 @@ enable_javascript = This website requires JavaScript.
 toc = Table of Contents
 licenses = Licenses
 return_to_gitea = Return to Forgejo
+toggle_menu = Toggle Menu
 
 username = Username
 email = Email address
diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index b4a93688e3..fb0301aeb1 100644
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -20,7 +20,7 @@
 				</div>
 			</a>
 			{{end}}
-			<button class="item gt-w-auto ui icon mini button gt-p-3 gt-m-0" id="navbar-expand-toggle">{{svg "octicon-three-bars"}}</button>
+			<button class="item gt-w-auto ui icon mini button gt-p-3 gt-m-0" id="navbar-expand-toggle" aria-label="{{ctx.Locale.Tr "toggle_menu"}}">{{svg "octicon-three-bars"}}</button>
 		</div>
 
 		<!-- navbar links non-mobile -->
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 9cad9c5d23..bb45c8d325 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1935,9 +1935,9 @@ table th[data-sortt-desc] .svg {
 }
 
 .ui.secondary.pointing.menu .active.item,
-.ui.secondary.pointing.menu .active.item:hover,
-.ui.secondary.pointing.menu .dropdown.item:hover,
-.ui.secondary.pointing.menu a.item:hover {
+.ui.secondary.pointing.menu .active.item:hover, .ui.secondary.pointing.menu .active.item:focus,
+.ui.secondary.pointing.menu .dropdown.item:hover, .ui.secondary.pointing.menu .dropdown.item:focus,
+.ui.secondary.pointing.menu a.item:hover, .ui.secondary.pointing.menu a.item:focus {
   color: var(--color-text-dark);
 }
 
diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index 36cb499aeb..b772a4c14e 100644
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -1,14 +1,14 @@
 /* this contains override styles for buttons and related elements */
 
 /* these styles changed the Fomantic UI's rules, Fomantic UI expects only "basic" buttons have borders */
-.ui.button,
-.ui.button:focus {
+.ui.button {
   background: var(--color-button);
   border: 1px solid var(--color-light-border);
   color: var(--color-text);
 }
 
-.ui.button:hover {
+.ui.button:hover,
+.ui.button:focus {
   background: var(--color-hover);
   color: var(--color-text);
 }
@@ -20,13 +20,15 @@
 .ui.active.button,
 .ui.button:active,
 .ui.active.button:active,
-.ui.active.button:hover {
+.ui.active.button:hover,
+.ui.active.button:focus {
   background: var(--color-active);
   color: var(--color-text);
 }
 
 .delete-button,
-.delete-button:hover {
+.delete-button:hover,
+.delete-button:focus {
   color: var(--color-red);
 }
 
@@ -87,15 +89,15 @@ It needs some tricks to tweak the left/right borders with active state */
 
 .ui.labeled.button.disabled > .button,
 .ui.basic.buttons .button,
-.ui.basic.button,
-.ui.basic.buttons .button:focus,
-.ui.basic.button:focus {
+.ui.basic.button {
   color: var(--color-text-light);
   background: var(--color-button);
 }
 
 .ui.basic.buttons .button:hover,
-.ui.basic.button:hover {
+.ui.basic.button:hover,
+.ui.basic.buttons .button:focus,
+.ui.basic.button:focus {
   color: var(--color-text);
   background: var(--color-hover);
 }
@@ -105,7 +107,9 @@ It needs some tricks to tweak the left/right borders with active state */
 .ui.basic.buttons .active.button,
 .ui.basic.active.button,
 .ui.basic.buttons .active.button:hover,
-.ui.basic.active.button:hover {
+.ui.basic.active.button:hover,
+.ui.basic.buttons .active.button:focus,
+.ui.basic.active.button:focus {
   color: var(--color-text);
   background: var(--color-active);
 }
@@ -124,15 +128,15 @@ It needs some tricks to tweak the left/right borders with active state */
 .ui.primary.labels .label,
 .ui.ui.ui.primary.label,
 .ui.primary.button,
-.ui.primary.buttons .button,
-.ui.primary.button:focus,
-.ui.primary.buttons .button:focus {
+.ui.primary.buttons .button {
   background: var(--color-primary);
   color: var(--color-primary-contrast);
 }
 
 .ui.primary.button:hover,
-.ui.primary.buttons .button:hover {
+.ui.primary.buttons .button:hover,
+.ui.primary.button:focus,
+.ui.primary.buttons .button:focus {
   background: var(--color-primary-hover);
   color: var(--color-primary-contrast);
 }
@@ -143,15 +147,15 @@ It needs some tricks to tweak the left/right borders with active state */
 }
 
 .ui.basic.primary.buttons .button,
-.ui.basic.primary.button,
-.ui.basic.primary.buttons .button:focus,
-.ui.basic.primary.button:focus {
+.ui.basic.primary.button{
   color: var(--color-primary);
   border-color: var(--color-primary);
 }
 
 .ui.basic.primary.buttons .button:hover,
-.ui.basic.primary.button:hover {
+.ui.basic.primary.button:hover,
+.ui.basic.primary.buttons .button:focus,
+.ui.basic.primary.button:focus {
   color: var(--color-primary-hover);
   border-color: var(--color-primary-hover);
 }
@@ -184,15 +188,15 @@ It needs some tricks to tweak the left/right borders with active state */
 }
 
 .ui.basic.secondary.buttons .button,
-.ui.basic.secondary.button,
-.ui.basic.secondary.button:focus,
-.ui.basic.secondary.buttons .button:focus {
+.ui.basic.secondary.button {
   color: var(--color-secondary-button);
   border-color: var(--color-secondary-button);
 }
 
 .ui.basic.secondary.buttons .button:hover,
-.ui.basic.secondary.button:hover {
+.ui.basic.secondary.button:hover,
+.ui.basic.secondary.button:focus,
+.ui.basic.secondary.buttons .button:focus {
   color: var(--color-secondary-hover);
   border-color: var(--color-secondary-hover);
 }
@@ -208,14 +212,14 @@ It needs some tricks to tweak the left/right borders with active state */
 .ui.red.labels .label,
 .ui.ui.ui.red.label,
 .ui.red.button,
-.ui.red.buttons .button,
-.ui.red.button:focus,
-.ui.red.buttons .button:focus {
+.ui.red.buttons .button {
   background: var(--color-red);
 }
 
 .ui.red.button:hover,
-.ui.red.buttons .button:hover {
+.ui.red.buttons .button:hover,
+.ui.red.button:focus,
+.ui.red.buttons .button:focus {
   background: var(--color-red-dark-1);
 }
 
@@ -225,15 +229,15 @@ It needs some tricks to tweak the left/right borders with active state */
 }
 
 .ui.basic.red.buttons .button,
-.ui.basic.red.button,
-.ui.basic.red.buttons .button:focus,
-.ui.basic.red.button:focus {
+.ui.basic.red.button {
   color: var(--color-red);
   border-color: var(--color-red);
 }
 
 .ui.basic.red.buttons .button:hover,
-.ui.basic.red.button:hover {
+.ui.basic.red.button:hover,
+.ui.basic.red.buttons .button:focus,
+.ui.basic.red.button:focus {
   color: var(--color-red-dark-1);
   border-color: var(--color-red-dark-1);
 }
diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css
index b6fd2ff20a..11020df359 100644
--- a/web_src/css/modules/navbar.css
+++ b/web_src/css/modules/navbar.css
@@ -41,8 +41,8 @@
   justify-content: stretch;
 }
 
-#navbar a.item:hover,
-#navbar button.item:hover {
+#navbar a.item:hover, #navbar a.item:focus,
+#navbar button.item:hover, #navbar button.item:focus {
   background: var(--color-nav-hover-bg);
 }
 
diff --git a/web_src/css/repo/header.css b/web_src/css/repo/header.css
index d5c7d212e8..3400284e4b 100644
--- a/web_src/css/repo/header.css
+++ b/web_src/css/repo/header.css
@@ -89,11 +89,17 @@
   .repo-header .flex-item {
     flex-grow: 1;
   }
-  .repo-buttons .ui.labeled.button .text {
-    display: none;
-  }
+  .repo-buttons .ui.labeled.button .text,
   .repo-header .flex-item-trailing .label {
-    display: none;
+    /* the elements are hidden from users with intact eye vision,
+     * because SVG icons convey the meaning.
+     * However, they should remain accessible to screen readers */
+    position: absolute;
+    left: -1000vw;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
   }
   .repo-header .flex-item-trailing .repo-icon {
     display: initial;