diff --git a/.changeset/short-news-enjoy.md b/.changeset/short-news-enjoy.md
new file mode 100644
index 00000000000..11230f82d56
--- /dev/null
+++ b/.changeset/short-news-enjoy.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Improve accessibility of the Keyless prompt.
diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json
index 664f087bf91..5bab893c45a 100644
--- a/packages/clerk-js/bundlewatch.config.json
+++ b/packages/clerk-js/bundlewatch.config.json
@@ -18,6 +18,6 @@
     { "path": "./dist/userverification*.js", "maxSize": "5KB" },
     { "path": "./dist/onetap*.js", "maxSize": "1KB" },
     { "path": "./dist/waitlist*.js", "maxSize": "1.3KB" },
-    { "path": "./dist/keylessPrompt*.js", "maxSize": "4.5KB" }
+    { "path": "./dist/keylessPrompt*.js", "maxSize": "4.9KB" }
   ]
 }
diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx
index 7e0e7321491..499c6d9de37 100644
--- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx
@@ -1,9 +1,10 @@
-import { useClerk } from '@clerk/shared/react';
 // eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/react';
-import { useState } from 'react';
+import type { PropsWithChildren } from 'react';
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 
-import { descriptors, Flex, Link, Spinner } from '../../customizables';
+import { Flex, Link } from '../../customizables';
 import { Portal } from '../../elements/Portal';
 import { InternalThemeProvider } from '../../styledSystem';
 import { ClerkLogoIcon } from './ClerkLogoIcon';
@@ -15,25 +16,23 @@ type KeylessPromptProps = {
   copyKeysUrl: string;
 };
 
+const buttonIdentifierPrefix = `--clerk-keyless-prompt`;
+const buttonIdentifier = `${buttonIdentifierPrefix}-button`;
+const contentIdentifier = `${buttonIdentifierPrefix}-content`;
+
 const _KeylessPrompt = (_props: KeylessPromptProps) => {
   const [isExpanded, setIsExpanded] = useState(true);
-  const [isLoading, setIsLoading] = useState(false);
-  const handleFocus = () => setIsExpanded(true);
-
   const claimed = Boolean(useRevalidateEnvironment().authConfig.claimedAt);
-  const clerk = useClerk();
 
   return (
     <Portal>
       <Flex
-        elementDescriptor={descriptors.impersonationFab}
-        align='center'
-        onMouseEnter={() => setIsExpanded(true)}
         data-expanded={isExpanded}
+        align='center'
         sx={t => ({
           position: 'fixed',
-          bottom: '3.125rem',
-          right: '3.125rem',
+          bottom: '1.25rem',
+          right: '1.25rem',
           zIndex: t.zIndices.$fab,
           height: `${t.sizes.$10}`,
           minWidth: '18.5625rem',
@@ -44,8 +43,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
           background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',
           boxShadow:
             '0px 0px 0px 0.5px #2f3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 1px 1px rgba(255, 255, 255, 0.15) inset, 0px 0px 1px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.2)',
-
-          transition: 'all 200ms cubic-bezier(0.3, 0.5, 0.1, 1)',
+          transition: 'all 325ms cubic-bezier(0.18, 0.98, 0.1, 1)',
 
           '&[data-expanded="true"]': {
             flexDirection: 'column',
@@ -57,16 +55,22 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
             gap: `${t.space.$1x5}`,
             padding: `${t.space.$2x5} ${t.space.$3} 3.25rem ${t.space.$3}`,
             borderRadius: `${t.radii.$xl}`,
-            transition: 'all 210ms cubic-bezier(0.4, 1, 0.20, 0.9)',
+            transition: 'all 205ms cubic-bezier(0.4, 1, 0.20, 0.9)',
           },
         })}
       >
-        <Flex
-          sx={{
-            width: '100%',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-          }}
+        <button
+          type='button'
+          aria-expanded={isExpanded}
+          aria-controls={contentIdentifier}
+          id={buttonIdentifier}
+          onClick={() => !claimed && setIsExpanded(prev => !prev)}
+          css={css`
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          `}
         >
           <Flex
             sx={t => ({
@@ -99,26 +103,29 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
                   width: 1rem;
                   height: 1rem;
                   transform-style: preserve-3d;
-                  animation: ${isExpanded ? 'coinFlipAnimation 6s infinite linear' : ' none'};
+                  animation: ${isExpanded ? 'coinFlipAnimation 12s infinite linear' : ' none'};
 
                   @keyframes coinFlipAnimation {
                     0%,
-                    40% {
+                    70% {
                       transform: rotateY(0);
                     }
-                    50%,
-                    90% {
+                    75%,
+                    95% {
                       transform: rotateY(180deg);
                     }
                     100% {
                       transform: rotateY(0);
                     }
                   }
+                  @media (prefers-reduced-motion: reduce) {
+                    animation: none;
+                  }
                 `}
               >
                 <span
                   className='coin-flip-front'
-                  aria-hidden='true'
+                  aria-hidden
                   css={css`
                     position: absolute;
                     width: 100%;
@@ -134,7 +141,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
 
                 <span
                   className='coin-flip-back'
-                  aria-hidden='true'
+                  aria-hidden
                   css={css`
                     position: absolute;
                     width: 100%;
@@ -153,14 +160,15 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
 
             <p
               data-text='Clerk is in keyless mode'
+              aria-label={claimed && isExpanded ? 'Missing environment keys' : 'Clerk is in keyless mode'}
               css={css`
                 color: #d9d9d9;
                 font-size: 0.875rem;
-                font-weight: 400;
+                font-weight: 500;
                 position: relative;
                 isolation: isolate;
                 white-space: nowrap;
-                animation: show-title 180ms ease-out forwards;
+                animation: show-title 160ms ease-out forwards;
 
                 ${!claimed &&
                 `&::after {
@@ -187,6 +195,8 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
                       ? 'text-shimmer-expanded 3s infinite ease-out forwards'
                       : 'text-shimmer 3s infinite ease-out forwards'
                   };
+                  -webkit-user-select: none;
+                  user-select: none;
                 }
 
                 &::before {
@@ -214,6 +224,16 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
                       ? 'text-shimmer-expanded 3s infinite ease-out forwards'
                       : 'text-shimmer 3s infinite ease-out forwards'
                   };
+                  -webkit-user-select: none;
+                  user-select: none;
+                }
+
+                @media (prefers-reduced-motion: reduce) {
+                  &::after,
+                  &::before {
+                    animation: none;
+                    background: transparent;
+                  }
                 }
 
                 @keyframes text-shimmer {
@@ -235,12 +255,12 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
                     background-position: -60% center;
                   }
                 }
-              `}
-                @keyframes show-title {
+              `} @keyframes show-title {
                   from {
                     transform: translateY(-1.5px);
                     opacity: 0;
                   }
+
                   to {
                     transform: translateY(0);
                     opacity: 1;
@@ -252,67 +272,65 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
             </p>
           </Flex>
 
-          {isExpanded && !claimed && (
-            <button
-              onClick={() => setIsExpanded(false)}
-              aria-label='Close'
-              type='button'
-              css={css`
-                cursor: pointer;
-                margin-left: 0.75rem;
-                color: #8c8c8c;
-                transition: color 130ms ease-out;
-                :hover {
-                  color: #eeeeee;
-                }
-                animation: show-button 200ms cubic-bezier(0.4, 0, 0, 1.1) forwards;
+          <svg
+            width='1rem'
+            height='1rem'
+            viewBox='0 0 16 16'
+            fill='none'
+            aria-hidden
+            xmlns='http://www.w3.org/2000/svg'
+            css={css`
+              color: #8c8c8c;
+              transition: color 130ms ease-out;
+              visibility: ${isExpanded && !claimed ? 'visible' : 'hidden'};
 
-                @keyframes show-button {
-                  from {
-                    transform: scaleX(0.9);
-                    opacity: 0;
-                  }
-                  to {
-                    transform: scaleX(1);
-                    opacity: 1;
-                  }
+              :hover {
+                color: #eeeeee;
+              }
+
+              animation: show-button 285ms cubic-bezier(0.4, 0, 0, 1.1) forwards;
+
+              @keyframes show-button {
+                from {
+                  transform: scaleX(0.9);
+                  opacity: 0;
                 }
-              `}
-            >
-              <svg
-                width='1rem'
-                height='1rem'
-                viewBox='0 0 16 16'
-                fill='none'
-                aria-hidden
-                xmlns='http://www.w3.org/2000/svg'
-              >
-                <path
-                  d='M3.75 8H12.25'
-                  stroke='currentColor'
-                  strokeWidth='1.5'
-                  strokeLinecap='round'
-                  strokeLinejoin='round'
-                />
-              </svg>
-            </button>
-          )}
-        </Flex>
+                to {
+                  transform: scaleX(1);
+                  opacity: 1;
+                }
+              }
+            `}
+          >
+            <path
+              d='M3.75 8H12.25'
+              stroke='currentColor'
+              strokeWidth='1.5'
+              strokeLinecap='round'
+              strokeLinejoin='round'
+            />
+          </svg>
+        </button>
 
-        {isExpanded && (
+        <div
+          role='region'
+          id={contentIdentifier}
+          aria-labelledby={buttonIdentifier}
+          hidden={!isExpanded}
+        >
           <p
             css={css`
               color: #b4b4b4;
-              font-size: 0.75rem;
+              font-size: 0.8125rem;
               font-weight: 400;
               line-height: 1rem;
               max-width: 14.625rem;
               min-height: 2rem;
-              animation: show-description 260ms ease-out forwards;
+              animation: show-description 208ms ease forwards;
 
               @keyframes show-description {
                 from {
-                  transform: translateY(-1.8px);
+                  transform: translateY(-1.5px);
                   opacity: 0;
                 }
                 to {
@@ -324,14 +342,14 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
           >
             {claimed ? (
               <>
-                You claimed this application, but haven&apos;t set keys in your environment. Get your keys from the
-                Clerk Dashboard.
+                You claimed this application but haven&apos;t set keys in your environment. Get them from the Clerk
+                Dashboard.
               </>
             ) : (
               <>
-                API keys were missing so we generated them for you. Link this instance to your Clerk account to make
-                configuration changes.{' '}
+                We generated temporary API keys for you. Link this instance to your Clerk account to configure it.{' '}
                 <Link
+                  aria-label='Learn more about Clerk keyless mode'
                   href='https://clerk.com/docs/keyless'
                   sx={t => ({
                     color: t.colors.$whiteAlpha600,
@@ -347,16 +365,12 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
               </>
             )}
           </p>
-        )}
+        </div>
 
-        <button
-          type='button'
-          onFocus={handleFocus}
+        <a
+          href={claimed ? _props.copyKeysUrl : _props.claimUrl}
+          rel='noopener noreferrer'
           data-expanded={isExpanded}
-          onClick={() => {
-            setIsLoading(true);
-            void clerk.navigate(claimed ? _props.copyKeysUrl : _props.claimUrl);
-          }}
           css={css`
             display: flex;
             align-items: center;
@@ -385,9 +399,13 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
               0px 1.5px 2px 0px rgba(0, 0, 0, 0.48),
               0px 0px 4px 0px rgba(243, 107, 22, 0) inset;
 
-            transition: all 80ms cubic-bezier(0.3, 0.5, 0.1, 1);
+            transition: all 138ms cubic-bezier(0.09, 0.7, 0.1, 1);
             animation: small-btn-glow 3s infinite 500ms;
 
+            @media (prefers-reduced-motion: reduce) {
+              animation: none;
+            }
+
             &[data-expanded='true'] {
               right: 0.75rem;
               bottom: 0.75rem;
@@ -395,8 +413,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
               color: ${claimed ? 'white' : '#fde047'};
               border-radius: 0.375rem;
               background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
-
-              transition: all 175ms cubic-bezier(0.6, 0.5, 0.1, 1);
+              transition: all 190ms cubic-bezier(0.38, 0.8, 0.2, 1);
               animation: none;
 
               &:hover {
@@ -444,9 +461,34 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
             }
           `}
         >
-          {isLoading ? <Spinner size={'sm'} /> : <> {claimed ? 'Get API keys' : 'Claim keys'}</>}
-        </button>
+          {claimed ? 'Get API keys' : 'Claim keys'}
+        </a>
       </Flex>
+      <BodyPortal>
+        <a
+          href={`#${buttonIdentifier}`}
+          css={css`
+            position: fixed;
+            left: -999px;
+            top: 1rem;
+            z-index: 999999;
+            border-radius: 0.375rem;
+            background-color: white;
+            padding: 0.25rem 0.5rem;
+            font-size: 0.875rem;
+            color: black;
+            text-decoration: underline;
+
+            &:focus {
+              left: 1rem;
+              outline: 2px solid;
+              outline-offset: 2px;
+            }
+          `}
+        >
+          Skip to Clerk keyless mode content
+        </a>
+      </BodyPortal>
     </Portal>
   );
 };
@@ -456,3 +498,21 @@ export const KeylessPrompt = (props: KeylessPromptProps) => (
     <_KeylessPrompt {...props} />
   </InternalThemeProvider>
 );
+
+const BodyPortal = ({ children }: PropsWithChildren) => {
+  const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const container = document.createElement('div');
+    setPortalContainer(container);
+    document.body.insertBefore(container, document.body.firstChild);
+    return () => {
+      if (container) {
+        document.body.removeChild(container);
+      }
+    };
+  }, []);
+
+  // Render the children inside the dynamically created div
+  return portalContainer ? createPortal(children, portalContainer) : null;
+};