diff --git a/src/components/Nav/MainNavLinks.tsx b/src/components/Nav/MainNavLinks.tsx
index 0e3b628535..eeb71c8294 100644
--- a/src/components/Nav/MainNavLinks.tsx
+++ b/src/components/Nav/MainNavLinks.tsx
@@ -46,6 +46,7 @@ export const MainNavLinks = ({
         class={styles.toggle}
         onClick={handleToggle}
         aria-expanded={isOpen}
+        aria-controls="main-links-list main-cta-list"
         aria-label={mobileMenuLabel || "Toggle navigation menu"}
       >
         <div class={styles.mobileMenuLabel}>
@@ -72,16 +73,22 @@ export const MainNavLinks = ({
       }`}
     >
       {renderLogo()}
-      <ul>
+      <ul id="main-links-list" hidden={!isOpen}>
         {links.map((link) => (
           <li key={link.label}>
-            <a href={link.url}>{link.label}</a>
+            <a href={link.url} tabIndex={isOpen ? undefined : -1}>
+              {link.label}
+            </a>
           </li>
         ))}
       </ul>
-      <ul class="flex flex-col gap-[15px]">
+      <ul id="main-cta-list" class="flex flex-col gap-[15px]" hidden={!isOpen}>
         <li>
-          <a className={styles.buttonlink} href="https://editor.p5js.org">
+          <a
+            className={styles.buttonlink}
+            href="https://editor.p5js.org"
+            tabIndex={isOpen ? undefined : -1}
+          >
             <div class="mr-xxs">
               <Icon kind="code-brackets" />
             </div>
@@ -89,7 +96,11 @@ export const MainNavLinks = ({
           </a>
         </li>
         <li>
-          <a className={styles.buttonlink} href="/donate/">
+          <a
+            className={styles.buttonlink}
+            href="/donate/"
+            tabIndex={isOpen ? undefined : -1}
+          >
             <div class="mr-xxs">
               <Icon kind="heart" />
             </div>