diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index e75cdf6994..6029a52fe9 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -462,7 +462,8 @@ body.has-overlay-scrollbar {
                 --color-navbar-spectator-medium-attention-brand-button-background
             );
 
-            &:hover {
+            &:hover,
+            &:focus {
                 color: var(
                     --color-navbar-spectator-medium-attention-brand-button-text
                 );
diff --git a/web/templates/navbar.hbs b/web/templates/navbar.hbs
index cd54ab43b8..43c489c6d8 100644
--- a/web/templates/navbar.hbs
+++ b/web/templates/navbar.hbs
@@ -37,7 +37,7 @@
         </div>
         <div class="column-right">
             <div class="spectator_login_buttons only-visible-for-spectators">
-                <a class="login_button">
+                <a class="login_button" tabindex="0">
                     {{t 'Log in' }}
                 </a>
             </div>
@@ -62,7 +62,7 @@
                 </a>
             </div>
             <div class="spectator_narrow_login_button only-visible-for-spectators" data-tippy-content="{{t 'Log in' }}" data-tippy-placement="bottom">
-                <a class="header-button login_button">
+                <a class="header-button login_button" tabindex="0">
                     <i class="zulip-icon zulip-icon-log-in"></i>
                 </a>
             </div>