diff --git a/index.html b/index.html
index d24b2a88..414f5a71 100644
--- a/index.html
+++ b/index.html
@@ -32,6 +32,7 @@ <h1>ScopeWeave Planner</h1>
           <div class="meta-value-card" title="프로젝트의 작업 기간(일수) 합계입니다.">
             <span class="meta-label">전체일수</span>
             <strong data-testid="summary-total-days" id="summary-total-days">0일</strong>
+            <small id="summary-total-days-help">프로젝트의 작업 기간(일수) 합계입니다.</small>
           </div>
         </div>
 
@@ -39,10 +40,12 @@ <h1>ScopeWeave Planner</h1>
           <div class="meta-value-card accent-card plan-card" title="기간(일수) 가중치가 반영된 프로젝트 전체 계획 진척률입니다.">
             <span class="meta-label">계획진척률(누적)</span>
             <strong data-testid="summary-planned-progress" id="summary-planned-progress">0.00%</strong>
+            <small id="summary-planned-progress-help">기간(일수) 가중치가 반영된 프로젝트 전체 계획 진척률입니다.</small>
           </div>
           <div class="meta-value-card accent-card actual-card" title="기간(일수) 가중치가 반영된 프로젝트 전체 실적 진척률입니다.">
             <span class="meta-label">실적진척률(누적)</span>
             <strong data-testid="summary-actual-progress" id="summary-actual-progress">0.00%</strong>
+            <small id="summary-actual-progress-help">기간(일수) 가중치가 반영된 프로젝트 전체 실적 진척률입니다.</small>
           </div>
           <div class="sync-panel">
             <span id="sync-status" role="status" aria-live="polite" aria-atomic="true">브라우저 로컬 자동저장 사용 중</span>
diff --git a/tests/e2e/meta-summary-accessibility.spec.js b/tests/e2e/meta-summary-accessibility.spec.js
new file mode 100644
index 00000000..768e6d52
--- /dev/null
+++ b/tests/e2e/meta-summary-accessibility.spec.js
@@ -0,0 +1,38 @@
+import { test, expect } from '@playwright/test';
+
+const summaryExplanations = [
+  ['summary-total-days-help', '프로젝트의 작업 기간(일수) 합계입니다.'],
+  ['summary-planned-progress-help', '기간(일수) 가중치가 반영된 프로젝트 전체 계획 진척률입니다.'],
+  ['summary-actual-progress-help', '기간(일수) 가중치가 반영된 프로젝트 전체 실적 진척률입니다.']
+];
+
+test.describe('summary metric explanations', () => {
+  test('keeps explanations visible without adding static cards to the Tab order', async ({ page }) => {
+    await page.goto('./');
+
+    const cards = page.locator('.meta-value-card');
+    await expect(cards).toHaveCount(3);
+    for (let index = 0; index < 3; index += 1) {
+      await expect(cards.nth(index)).not.toHaveAttribute('tabindex');
+      await expect(cards.nth(index)).not.toHaveAttribute('role', 'note');
+    }
+
+    for (const [id, text] of summaryExplanations) {
+      const explanation = page.locator(`#${id}`);
+      await expect(explanation).toBeVisible();
+      await expect(explanation).toHaveText(text);
+    }
+  });
+
+  test('keeps the visible explanations inside the mobile viewport', async ({ page }) => {
+    await page.setViewportSize({ width: 375, height: 667 });
+    await page.goto('./');
+
+    for (const [id] of summaryExplanations) {
+      await expect(page.locator(`#${id}`)).toBeVisible();
+    }
+
+    const overflow = await page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth);
+    expect(overflow).toBeLessThanOrEqual(1);
+  });
+});