diff --git a/src/components/anonymous.jsx b/src/components/anonymous.jsx
index 81870cf4..0746cf86 100644
--- a/src/components/anonymous.jsx
+++ b/src/components/anonymous.jsx
@@ -79,6 +79,10 @@ const styles = () => ({
     '&:hover': {
       background: '#eee',
     },
+    '&:focus-visible': {
+      outline: '2px solid #fff',
+      outlineOffset: 2,
+    },
   },
   buttonText: {
     fontSize: 18,
@@ -148,7 +152,7 @@ class AnonymousLanding extends Component {
             <img className={classes.buttonImage} src={AuthGoogleIcon} alt="" />
             <Typography className={classes.buttonText}>Sign in with Google</Typography>
           </a>
-          <a onClick={() => AppleID.auth.signIn()} className={classes.logInButton}>
+          <a href="#" role="button" onClick={(e) => { e.preventDefault(); AppleID.auth.signIn(); }} className={classes.logInButton}>
             <img className={classes.buttonImage} src={AuthAppleIcon} alt="" />
             <Typography className={classes.buttonText}>Sign in with Apple</Typography>
           </a>
@@ -162,7 +166,7 @@ class AnonymousLanding extends Component {
             paired your comma device.
           </span>
 
-          <a onClick={loginAsDemoUser}
+          <a href="#" role="button" onClick={(e) => { e.preventDefault(); loginAsDemoUser(); }}
             className="flex items-center pl-4 pr-3 py-2 font-medium border border-white rounded-full hover:bg-[rgba(255,255,255,0.1)] active:bg-[rgba(255,255,255,0.2)] transition-colors"
             style={{ height: 0, overflow: 'hidden', opacity: 0 }}
           >