破壞無障礙的標題結構錯誤

標題是大多數螢幕閱讀器使用者在頁面上查詢內容的方式。在 WebAIM 2024 年的螢幕閱讀器調查中，71.6% 的人表示他們首先透過標題來瀏覽較長的頁面，所以標題大綱一旦損壞，頁面的主要導航系統就壞了。 五類錯誤造成了大部分損害：假標題、跳級、因尺寸而選擇標題、空標題，以及缺失或混亂的 H1。與 SEO 的聯絡比大多數工具聲稱的要窄，本文會準確說明它是甚麼。

要點

• 螢幕閱讀器使用者把標題當作目錄來使用。 71.6% 的人首先透過標題瀏覽長頁面，88.8% 認為標題級別非常有用或比較有用（WebAIM 螢幕閱讀器使用者調查 #10）。
• 標題是真正的 HTML 元素，而不是一種外觀。 段落中加粗放大的文字，無論看起來如何，對螢幕閱讀器來說都不是標題。
• 標題錯誤極為常見。 在 WebAIM 2026 年對排名前一百萬的首頁的分析中，41.8% 至少有一處跳過的標題級別，7.5% 完全沒有標題。
• Google 不按標題順序排名。 其搜尋代表曾表示，頁面沒有 H1 或有多個 H1 都能正常排名，標題順序不是排名因素。Google 讀取的是標題所說的內容，而不是它是哪一級。
• Axeazy 會自動修復其中一部分，另一部分只有在您批准後才會修復。 缺失的 H1 或空標題屬於純粹的新增。對現有標題重新排序會改變頁面結構，所以要等您確認。由帶樣式文字構成的假標題則需要人來處理。

標題為螢幕閱讀器使用者做了甚麼

視力正常的訪客靠看來瀏覽頁面。更大、更粗的文字告訴他們一個章節從哪裡開始。螢幕閱讀器使用者只有在頁面把它標記為標題時，才能得到同樣的資訊。這樣他們就可以調出頁面上所有標題的列表，或者用一個按鍵直接跳到下一個，就像視力正常的讀者的目光順著頁面向下跳。

這就是標題處於整類無障礙工作中心的原因。標題級別 H1 到 H6 還傳達層級關係：H2 屬於其上方 H1 之下，H3 屬於其上方 H2 之下。當這個大綱正確時，使用者無需閱讀任何內容就能分辨哪些是主要章節，哪些是子章節。

破壞大綱的五個標題錯誤

1. 假裝成標題的加粗文字或帶樣式的段落

這是最常見的失敗，也最難靠肉眼發現，因為它看起來完全正確。

<!-- 失敗：看起來像標題，卻被讀作普通文字 -->
<p style="font-size: 24px; font-weight: bold;">Our Services</p>

<!-- 透過：真正的標題，用 CSS 設定樣式 -->
<h2 class="section-title">Our Services</h2>

WCAG 1.3.1「資訊和關係」正是為此而設：視覺上明顯的結構，也必須能被輔助技術獲取，而不只是透過樣式呈現。

2. 跳級

<!-- 失敗：從 H1 直接跳到 H3 -->
<h1>Maple Street Bakery</h1>
<h3>Today's Specials</h3>

<!-- 透過：沒有跳過任何級別 -->
<h1>Maple Street Bakery</h1>
<h2>Today's Specials</h2>

跳過的級別會讓使用者懷疑自己是否錯過了某個章節。H1 之後緊跟 H3，暗示某處存在一個 H2，而實際上並沒有。

3. 因尺寸而選擇級別

有人因為 H2 看起來太大而選了 H4。大綱為了解決視覺問題而被破壞。正確的做法是保持正確的級別，用 CSS 改變其外觀。

<h2 class="small-heading">Opening Hours</h2>

.small-heading { font-size: 1.1rem; }

4. 空標題

<!-- 失敗：被讀作標題，裡面卻甚麼都沒有 -->
<h2></h2>

空標題通常來自模板或頁面構建器，在文字被刪除後遺留了一個元素。螢幕閱讀器讀出一個標題，而使用者甚麼也聽不到。

5. 沒有 H1，或有多個相互競爭的 H1

每個頁面都應該有一個清晰的 H1 說明頁面是關於甚麼的，因為螢幕閱讀器傳統上把它當作頁面的主要標識。這是無障礙的最佳實踐，而不是 WCAG 的硬性失敗，有多個 H1 的頁面並不會自動出問題。值得修復是因為它會讓大綱變得混亂，尤其是當模板在標誌或橫幅中重複使用 H1 時。

這些錯誤有多常見

WebAIM 於 2026 年 2 月對排名前一百萬的首頁進行的年度分析，顯示了這一問題的普遍程度。

標題問題	佔首頁的比例
至少有一處跳過的標題級別	41.8%
多於一個 H1	18.1%
完全沒有標題	7.5%

這些數字描述的是由專業人員構建的大型網站。基於主題或頁面構建器搭建的小企業網站，出現同樣問題的可能性至少不會更低。

SEO 真正在乎甚麼

這是許多無障礙內容誇大其詞的地方，所以值得說得精確。

Google 多次表示標題順序不是排名因素。其搜尋代表曾說明，頁面沒有 H1 或有五個都可以正常排名，H1、H2、H3 的語義順序對無障礙有幫助，但不會對排名產生實質影響。所以跳過標題級別不會讓您丟掉排名。

Google 真正讀取的是標題所說的內容。像「營業時間和位置」這樣的標題，告訴搜尋引擎其下方的章節是關於甚麼的，就像告訴一個人一樣。這就是無障礙與 SEO 在這裡的真正交集：為章節命名的描述性標題同時服務兩類受眾。

所以，請為無障礙這個真實且可衡量的理由去修復標題結構。把任何 SEO 收益視為寫出清晰、描述性標題的副產品，而不是這樣做的理由。對人來說容易瀏覽的結構，對自動化系統來說也很可能更容易解析，但沒有人證實這是一種排名效應，也不應當把它當作排名效應來承諾。

如何檢查您自己的標題

1. 用螢幕閱讀器檢視大綱。 在 NVDA 中，按 Insert+F7 並選擇標題列表，或按 H 在標題之間跳轉。在 VoiceOver 中，用 VO+U 開啟轉子並選擇「標題」。您會聽到與使用者完全一樣的大綱。
2. 檢視頁面原始碼。 搜尋 <h 來檢視每個標題及其級別，並檢檢視起來像標題的東西是否其實是 <p> 或 <div>。
3. 從上到下閱讀大綱。 脫離頁面其餘部分，它是否說得通？級別是否有序？有沒有空的？
4. 或者執行掃描。 Axeazy 的免費掃描大約 60 秒就能檢查頁面的標題結構，同時涵蓋它支援的其他修復類別。兩項相關的結構檢查分別在表格標題指南和地標指南中介紹。

Axeazy 在這裡能幫上甚麼

標題的修復根據對頁面的改動程度分為三組。

規則	檢查內容	修復路徑
page-has-heading-one	頁面沒有 H1	自動修復，純粹新增，盡力而為
empty-heading	標題元素沒有內容	自動修復，純粹新增，盡力而為
heading-order	標題級別跳級或順序錯亂	已計算出，但需等待您批准
p-as-heading	帶樣式的文字充當標題	手動稽核

新增缺失的 H1 或處理空標題不會移動或重新命名任何東西，所以無需先詢問就會寫入。對現有標題重新排序會改變頁面的結構，所以 Axeazy 會計算出修復方案，但在您或您的開發人員批准之前不會寫入任何內容。被設定成看起來像標題的段落需要人來處理，因為只有瞭解頁面的人才能說出那段文字本來應該是甚麼。

其中三項是 axe-core 中的最佳實踐檢查，而不是正式的 WCAG 失敗。假標題問題最接近真正的 WCAG 1.3.1 問題。

修復如何落到您的網站上，取決於您的平臺。連線 GitHub 的 React 和 Next.js 網站會收到真實的 pull request。Shopify 商店會得到掃描結果和引導式清單，而不是對主題模板的自動更改。在 WordPress 上，標題修復不屬於免費外掛的三項即時修復，因此目前也走清單路徑。檢視完整的修復類別說明。

常見問題

一個頁面應該只有一個 H1 嗎？

力求只有一個。一個說明頁面主題的 H1，為螢幕閱讀器使用者提供清晰的起點。多個 H1 不是 WCAG 失敗，Google 也不會懲罰，但一個清晰的 H1 能讓大綱容易跟隨。

跳過標題級別會損害 SEO 嗎？

Google 表示標題順序不是排名因素，所以跳級不會讓您丟掉排名。受到傷害的是螢幕閱讀器使用者，他們依賴這些級別來理解大綱。

我可以因為 H4 看起來尺寸合適就用它嗎？

請保持正確的級別，用 CSS 改變尺寸。因標題級別的預設外觀而選擇它，是為了解決視覺問題而破壞大綱。

標題問題會在 ADA 索賠函中被引用嗎？

標題結構不在真實索賠函中最常被引用的那幾類之列，那些函件傾向於引用替代文字、跳過導航、語言屬性、表單標籤，以及連結或按鈕名稱。但對於透過標題瀏覽的人來說，它仍然是真實的障礙，值得憑其自身的價值去修復。

修復標題就能讓我的網站無障礙了嗎？

沒有任何單一修復能做到這一點。標題是一個人在頁面上找路方式中的重要一環，頁面可以有乾淨的大綱，卻仍存在其他問題，比如缺少表單標籤或無法到達的按鈕，需要各自單獨檢查。

參考來源

• WebAIM：螢幕閱讀器使用者調查 #10 結果
• WebAIM：The WebAIM Million，2026 年排名靠前首頁的報告
• W3C：理解成功準則 1.3.1，資訊和關係
• W3C：理解成功準則 2.4.6，標題和標籤
• Search Engine Journal：Google 談 H1 標題與 SEO
• Stan Ventures：Google 對標題順序與 SEO 的澄清