diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 094e88f..4d39d2e 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -23,7 +23,7 @@ export function Card({ children, full, className, tileId }: CardProps) {
   }
 
   return (
-    <div
+    <article
       style={baseStyles}
       className={className}
       data-tile-id={tileId}
@@ -31,7 +31,7 @@ export function Card({ children, full, className, tileId }: CardProps) {
       onMouseLeave={() => setIsHovered(false)}
     >
       {children}
-    </div>
+    </article>
   )
 }
 
@@ -85,7 +85,7 @@ export function CardHeader({ dotColor, title, rightText }: CardHeaderProps) {
 
   return (
     <div style={headerStyles}>
-      <div style={dotStyles} />
+      <div style={dotStyles} aria-hidden="true" />
       <span style={titleStyles}>{title}</span>
       {rightText && <span style={rightTextStyles}>{rightText}</span>}
     </div>
diff --git a/src/components/DashboardLayout.tsx b/src/components/DashboardLayout.tsx
index d5de37b..18b0d08 100644
--- a/src/components/DashboardLayout.tsx
+++ b/src/components/DashboardLayout.tsx
@@ -135,6 +135,7 @@ export function DashboardLayout() {
 
         {/* Main content — scrollable card grid */}
         <motion.main
+          id="main-content"
           initial="hidden"
           animate="visible"
           variants={contentVariants}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index eb201cb..dfc2562 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -219,6 +219,7 @@ export default function Sidebar() {
               background: 'var(--success)',
               animation: 'pulse 2s infinite',
             }}
+            aria-hidden="true"
           />
           <span>{patient.badge}</span>
         </div>
diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index 0c81f58..4770ffc 100644
--- a/src/components/TopBar.tsx
+++ b/src/components/TopBar.tsx
@@ -26,6 +26,32 @@ export function TopBar({ onSearchClick }: TopBarProps) {
         zIndex: 100,
       }}
     >
+      {/* Skip to main content link (only visible on focus) */}
+      <a
+        href="#main-content"
+        className="skip-link"
+        style={{
+          position: 'absolute',
+          top: '-40px',
+          left: '0',
+          background: 'var(--accent)',
+          color: '#FFFFFF',
+          padding: '8px 16px',
+          textDecoration: 'none',
+          zIndex: 101,
+          borderRadius: '0 0 4px 0',
+          fontSize: '13px',
+          fontWeight: 600,
+        }}
+        onFocus={(e) => {
+          e.currentTarget.style.top = '0'
+        }}
+        onBlur={(e) => {
+          e.currentTarget.style.top = '-40px'
+        }}
+      >
+        Skip to main content
+      </a>
       {/* Brand */}
       <div className="flex items-center gap-2 shrink-0">
         <Home
@@ -131,7 +157,10 @@ export function TopBar({ onSearchClick }: TopBarProps) {
       </button>
 
       {/* Session info (right) */}
-      <div className="flex items-center gap-2 sm:gap-3 shrink-0">
+      <div
+        className="flex items-center gap-2 sm:gap-3 shrink-0"
+        aria-label="Active session information"
+      >
         <span
           className="hidden sm:inline"
           style={{
diff --git a/src/components/tiles/CareerActivityTile.tsx b/src/components/tiles/CareerActivityTile.tsx
index edb3f94..28b28fd 100644
--- a/src/components/tiles/CareerActivityTile.tsx
+++ b/src/components/tiles/CareerActivityTile.tsx
@@ -218,6 +218,7 @@ const ActivityItem: React.FC<ActivityItemProps> = ({ entry, isExpanded, onToggle
             flexShrink: 0,
             marginTop: '2px',
           }}
+          aria-hidden="true"
         />
         <div style={{ flex: 1, minWidth: 0 }}>
           <div
diff --git a/src/components/tiles/ProjectsTile.tsx b/src/components/tiles/ProjectsTile.tsx
index 7d4c690..2439bfb 100644
--- a/src/components/tiles/ProjectsTile.tsx
+++ b/src/components/tiles/ProjectsTile.tsx
@@ -85,6 +85,7 @@ function ProjectItem({ project, isExpanded, onToggle }: ProjectItemProps) {
             marginTop: '4px',
             animation: isLive ? 'pulse 2s infinite' : undefined,
           }}
+          aria-hidden="true"
         />
         <span style={{ flex: 1 }}>{project.name}</span>
         <span
diff --git a/src/index.css b/src/index.css
index 260b4ac..706400b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -371,3 +371,39 @@ html {
     to { transform: none; opacity: 1; }
   }
 }
+
+/* ===== FOCUS VISIBLE STYLES (WCAG Compliance) ===== */
+/* Default focus ring for all focusable elements */
+*:focus-visible {
+  outline: 2px solid rgba(13, 110, 110, 0.4);
+  outline-offset: 2px;
+}
+
+/* Button-like interactive elements */
+button:focus-visible,
+[role="button"]:focus-visible,
+[role="option"]:focus-visible {
+  outline: 2px solid rgba(13, 110, 110, 0.4);
+  outline-offset: 2px;
+}
+
+/* Links */
+a:focus-visible {
+  outline: 2px solid rgba(13, 110, 110, 0.4);
+  outline-offset: 2px;
+}
+
+/* Inputs and textareas */
+input:focus-visible,
+textarea:focus-visible {
+  outline: 2px solid rgba(13, 110, 110, 0.6);
+  outline-offset: 0px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Disable pulse animation on status badge dot */
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 1; }
+  }
+}