無障礙與 SEO 的交集：aria、鍵盤操作與語意標籤
無障礙（Accessibility，常寫作 a11y）與 SEO 是兩件不同的事，但它們需要的資訊 高度重疊。
原因很直接：螢幕閱讀器和搜尋引擎爬蟲面對的是同一個問題，只靠標記理解一個原本為視覺設計的頁面。看不到版面，就只能靠標籤說明結構。
無障礙不是排名訊號
先講清楚：無障礙本身不影響排名。但做好無障礙的過程中，您會順帶把 SEO 需要的那幾件事做對。
五個共用的基礎
| 基礎 | 螢幕閱讀器拿它做什麼 | 搜尋引擎拿它做什麼 |
|---|---|---|
| 語意標籤 | 提供跳段導航 | 判斷哪一段是主內容 |
| 標題階層 | 建立可跳轉的目錄 | 推導頁面大綱 |
| 替代文字 | 念出圖片內容 | 理解圖片主題 |
| 錨點文字 | 用連結清單瀏覽 | 判斷目標頁面主題 |
| 表單標籤 | 念出欄位用途 | 理解表單功能 |
這五項全部都在 語意化 HTML 的範圍內，也就是說 不需要為無障礙額外做什麼，把標籤選對就同時滿足兩邊。
原生標籤永遠優先
這是無障礙的第一原則
<!-- 三個問題一次來：不能用鍵盤、螢幕閱讀器不知道是按鈕、爬蟲讀不到 -->
<div class="btn" onclick="submit()">送出</div>
<!-- 補了 aria，但只解決了「是什麼」，還是不能用鍵盤 -->
<div class="btn" role="button" onclick="submit()">送出</div>
<!-- 正確 -->
<button type="submit">送出</button>原生標籤同時帶來 語意、預設行為與鍵盤支援，aria 只補語意那一項。
| 用原生標籤得到 | aria 提供 |
|---|---|
| 語意（這是按鈕） | 是 |
| 鍵盤可聚焦 | 否 |
| Enter 與 Space 觸發 | 否 |
| 預設的焦點樣式 | 否 |
| 表單提交行為 | 否 |
判斷方式：先找有沒有對應的原生標籤
按這個順序問：
- 有對應的原生標籤嗎？ → 用它。
- 沒有，但可以用原生標籤組合出來嗎？ → 組合。
- 真的做不到？ → 才用 aria。
aria 該補什麼
aria 真正的用途是 原生 HTML 表達不了的狀態與關係：
替同名的區塊取名
<nav aria-label="主要導覽">...</nav>
<nav aria-label="麵包屑">...</nav>
<nav aria-label="分頁導覽">...</nav>這是 aria 最實用也最常需要的場合，一頁有多個 <nav> 時，沒有名字就無法分辨。
表達狀態
<!-- 展開與收合 -->
<button aria-expanded="false" aria-controls="menu">選單</button>
<ul id="menu" hidden>
...
</ul>
<!-- 目前所在的位置 -->
<nav aria-label="麵包屑">
<ol>
<li><a href="/">首頁</a></li>
<li aria-current="page">目前這一頁</li>
</ol>
</nav>關聯錯誤訊息
<label for="email">電子郵件</label>
<input
id="email"
type="email"
aria-describedby="email-error"
aria-invalid="true"
/>
<p id="email-error">格式不正確，請檢查是否包含 @ 符號。</p>aria 不該補什麼
這三種是常見的誤用
<!-- 1. 重複原生語意 -->
<button role="button">送出</button>
<nav role="navigation">...</nav>
<main role="main">...</main>
<!-- 2. 覆蓋原生語意 -->
<button role="link">前往</button>
<!-- 3. 用 aria-label 取代看得見的文字 -->
<button aria-label="送出表單"></button>第一種是多餘的；第二種造成混淆（是按鈕還是連結？）；第三種讓看得見的使用者完全不知道這個按鈕做什麼，而且搜尋引擎對 aria-label 的採用程度遠低於可見文字。
沒有 aria 比錯的 aria 好
這是無障礙社群的共識。錯誤的 aria 會主動誤導輔助技術，比什麼都不寫更糟。
鍵盤操作是一個快速檢查訊號
按 Tab 走一遍頁面
不能用鍵盤操作的元素，通常是 用 <div> 加點擊事件 做的，而那種寫法爬蟲也讀不到。
所以「按 Tab 走不到的可點擊元素」可以當成一個快速訊號：那裡很可能同時有無障礙與 SEO 的問題。
檢查重點：
| 項目 | 標準 |
|---|---|
| 所有可點擊元素都能用 Tab 到達 | 必備 |
| 焦點有明顯的視覺樣式 | 必備 |
| Tab 順序符合視覺順序 | 建議 |
沒有用 tabindex 大於 0 的值硬排順序 | 建議 |
| 有跳到主內容的捷徑連結 | 建議 |
不要移除焦點樣式
/* 絕對不要這樣做 */
:focus {
outline: none;
}移除之後鍵盤使用者完全不知道自己在哪。要換樣式的話用 :focus-visible 另外設計：
:focus-visible {
outline: 2px solid #0065a9;
outline-offset: 2px;
}隱藏內容的界線
「隱藏的內容會不會被當作作弊」是常見的疑慮。分兩種情況：
| 情況 | 有問題嗎 |
|---|---|
| 使用者可以展開的收合區塊 | 沒有 |
| 分頁式介面的其他分頁 | 沒有 |
| 只給螢幕閱讀器的說明文字 | 沒有 |
| 使用者永遠看不到的關鍵字 | 違規 |
判斷標準是「使用者有辦法看到嗎」
可以展開的收合內容是正常的介面設計。這個站的「常見問題」就是用收合區塊寫的，同時也是 FAQPage 結構化資料 的來源，完全合規，因為使用者點一下就看得到。
真正違規的是 隱藏文字，藏起來只給搜尋引擎看的那種。
只給螢幕閱讀器的文字要用正確的隱藏方式：
/* 視覺上隱藏，但螢幕閱讀器仍會念 */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}display: none 會連螢幕閱讀器一起隱藏
需要「視覺上看不到但要被念出來」時，不能用 display: none 或 visibility: hidden，那兩個會從無障礙樹裡移除。
也要留意的兩件事
顏色對比
文字與背景的對比不足時，視力不佳的使用者讀不了。這與 SEO 無關，但屬於 Lighthouse 無障礙檢查會標記的項目：
| 內容 | 最低對比 |
|---|---|
| 一般文字 | 4.5 : 1 |
| 大字（18pt 以上或粗體 14pt 以上） | 3 : 1 |
語言宣告
<html lang="zh-Hant-TW"></html>它影響螢幕閱讀器用什麼語言發音。內文中夾雜其他語言時也可以標：
<p>這個屬性叫做 <span lang="en">accessibility</span>，簡稱 a11y。</p>多語系網站還要搭配 hreflang 。
檢查清單
| 項目 | 標準 |
|---|---|
用原生標籤而非 <div> 加 aria | 必備 |
| 所有可點擊元素能用 Tab 到達 | 必備 |
| 焦點有明顯的視覺樣式 | 必備 |
多組 <nav> 有 aria-label | 建議 |
表單欄位有對應的 <label> | 必備 |
圖片有 alt（裝飾性留空字串） | 必備 |
| 標題階層沒有跳級 | 建議 |
<html> 有 lang 屬性 | 必備 |
| 沒有重複或覆蓋原生語意的 aria | 建議 |
| 文字對比達 4.5 : 1 | 建議 |
常見問題
無障礙做好排名就會變好嗎？
無障礙本身不是排名訊號，但兩者需要的資訊高度重疊。語意標籤、標題階層、替代文字、有意義的連結文字與表單標籤，這五項同時服務螢幕閱讀器與搜尋引擎。做好無障礙通常會順帶把這些做對。
aria 可以取代語意標籤嗎？
不能。原生標籤同時帶來語意、預設行為與鍵盤支援，aria 只補語意那一項。用一般容器加上角色屬性做出來的按鈕，仍然不能用鍵盤觸發、也不會有預設的焦點樣式。能改標籤就改標籤。
什麼情況才該用 aria？
原生 HTML 表達不了的狀態與關係。例如：分頁式介面的選取狀態、展開與收合的狀態、表單的錯誤訊息關聯，以及替同名的多個導覽區塊取名。這些都沒有對應的原生標籤。
鍵盤操作和 SEO 有什麼關係？
有間接關係。不能用鍵盤操作的元素，通常是用一般容器加上點擊事件做的，那種寫法爬蟲也讀不到。所以鍵盤可操作性可以當成一個快速的檢查訊號：按 Tab 走不到的可點擊元素，爬蟲很可能也走不到。
隱藏內容會被搜尋引擎當作作弊嗎？
要看用途。使用者可以展開的收合區塊、分頁式介面的其他分頁，都是正常的介面設計，不會有問題。真正違規的是把文字藏起來只給搜尋引擎看，使用者永遠看不到的那種。
延伸閱讀
參考資料：MDN：aria 使用規範