diff --git a/.jules/spider.md b/.jules/spider.md
index 572ac48..19485bc 100644
--- a/.jules/spider.md
+++ b/.jules/spider.md
@@ -10,3 +10,6 @@
 ## 2024-05-19 - Typechecking JSON-LD Date Properties
 **Learning:** When passing potentially null date fields (like `publishedAt`, `updatedAt`) from Payload CMS to jsonLd generator functions, using the fields directly can cause strict TypeScript compilation failures since the schemas explicitly expect `string | undefined` and not `null`.
 **Action:** Always use the logical OR operator with `undefined` (e.g., `datePublished: post.publishedAt || undefined`) when passing date properties to JSON-LD generator functions to satisfy strict type requirements and prevent build regressions.
+## 2024-06-25 - Modal Semantic Structure
+**Learning:** Found instances where custom modals (like AnnouncementPopup) lacked proper ARIA roles (`role="dialog"`) and `aria-modal="true"`. This prevents screen readers from understanding that a modal has opened and traps focus appropriately, severely impacting accessibility and semantic structure which search engines value for usability.
+**Action:** Always add `role="dialog"` and `aria-modal="true"` to the root container of custom modal dialogs. Additionally, ensure they have a descriptive `aria-label` or `aria-labelledby` referencing their title.
diff --git a/src/components/AnnouncementPopup/index.tsx b/src/components/AnnouncementPopup/index.tsx
index d7d89db..24a8d33 100644
--- a/src/components/AnnouncementPopup/index.tsx
+++ b/src/components/AnnouncementPopup/index.tsx
@@ -109,7 +109,11 @@ export const AnnouncementPopup: React.FC<AnnouncementPopupProps> = ({ announceme
             />
 
             {/* Modal Content */}
+            {/* SEO: Add role="dialog", aria-modal="true", and aria-labelledby for proper accessibility and semantic structure */}
             <motion.div
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby="announcement-title"
               initial={{ opacity: 0, scale: 0.95, y: 20 }}
               animate={{ opacity: 1, scale: 1, y: 0 }}
               exit={{ opacity: 0, scale: 0.95, y: 20 }}
@@ -153,7 +157,7 @@ export const AnnouncementPopup: React.FC<AnnouncementPopupProps> = ({ announceme
                 {/* Right Side: Content */}
                 <div className="flex w-full flex-col justify-between overflow-hidden p-5 sm:p-6 lg:w-1/2 lg:p-8">
                   {/* Title */}
-                  <h2 className="mb-2 font-heading text-2xl font-black uppercase tracking-tighter text-white sm:text-3xl lg:text-4xl">
+                  <h2 id="announcement-title" className="mb-2 font-heading text-2xl font-black uppercase tracking-tighter text-white sm:text-3xl lg:text-4xl">
                     {title}
                   </h2>