檢測於 2026/9/24 · https://www.heise.de/
5 項關鍵障礙n · 另有 2 項待查。
自上次掃描以來：無變化。
分數如何計算？（起始 100 分）
| 519 張圖片中有 40 張沒有 alt 屬性 | -18 |
| 4 個表單欄位沒有可辨識的標記 | -18 |
| 16 個連結在 HTML 中沒有可辨識的名稱 | -18 |
| 6 個按鈕在 HTML 中沒有名稱 | -18 |
| 5 條n CSS 規則的文字對比可能過低 | -18 |
| 所提供的 HTML 中沒有 <h1> 標題 | -7 |
| 6 個重複的 id 屬性 | -7 |
| 結果 | 0 / 100 |
可感知
519 張圖片中有 40 張沒有 alt 屬性
透過 JavaScript 載入的圖片未計入此處。
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="3377" height="1898"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="1920" height="1079"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="3200" height="1798"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="300" height="250">
你應該這樣做： 為每個 <img> 加上 alt：具意義的圖片給簡短描述，純裝飾圖片用 alt=""。
4 個表單欄位沒有可辨識的標記
請檢查是否有透過 JavaScript 設定的 aria-label。
<input type="text" name="q" placeholder="Suchen"><input type="text" name="q" placeholder="Suchen"><select name="in"><input type="text" name="fs" placeholder="Im Preisvergleich suchen">
你應該這樣做： 將每個欄位連結到 <label for> 元素，或設定 aria-label／aria-labelledby。僅有 placeholder 並不足夠。
5 條n CSS 規則的文字對比可能過低
必要值：4.5:1（一般）或 3:1（大字）。在「推定的頁面背景」情況下，無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括：`.dark a-gift-link dialog`: #e0e0e0 auf #fff (Vorfahren-Hintergrund) = 1.32:1 · `.a-android-native-app-prompt__close-banner`: #323232 auf rgba(0,0,0,0) = 1.64:1 · `a-opt-in[is-active] .opt-in__footnote`: #959595 auf #ffffff (Standard) (Seitenhintergrund, angenommen) = 3.00:1 · `.a-android-native-app-prompt__load-app`: #fff auf #27a209 = 3.36:1 · `a-topic .topic-label`: #fff auf #ed3725 = 4.06:1
.dark a-gift-link dialog, .a-android-native-app-prompt__close-banner, a-opt-in[is-active] .opt-in__footnote, .a-android-native-app-prompt__load-app, a-topic .topic-label
你應該這樣做： 將文字顏色加深或背景調亮，直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
可操作
16 個連結在 HTML 中沒有可辨識的名稱
空連結，或僅有圖示／圖片而無 alt。透過 JavaScript 設定的 aria-label 在此不會被辨識。
<a-click-performance><a name="topnavi.ho.magazine-nav.ct" class="hover:bg-brand dark:hover:<a name="topnavi.ho.magazine-nav.ix" class="hover:bg-brand-alternative<a name="topnavi.ho.magazine-nav.foto" class="hover:bg-brand dark:hove
你應該這樣做： 加入可見的連結文字，或在圖示連結上使用 aria-label 或帶 alt 的圖片。
6 個按鈕在 HTML 中沒有名稱
沒有文字也沒有 aria-label 的按鈕對螢幕報讀器而言是沉默的 — 除非名稱是透過 JavaScript 設定。
<button class="scroll-left text-ho-text"><button class="scroll-right text-ho-text"><button class="scroll-left text-ho-text"><button class="scroll-right text-ho-text">
你應該這樣做： 加入按鈕文字或設定 aria-label。
所提供的 HTML 中沒有 <h1> 標題
每個頁面應以恰好一個 h1 開始。在透過 JavaScript 建構的頁面中，h1 可能只在瀏覽器中才出現 — 此時請檢查算繪後的 DOM。
body
你應該這樣做： 插入一個有意義的 <h1> 作為第一個標題（最好在伺服器端就有）。
穩健
6 個重複的 id 屬性
例如 heisetopnavi_search, HEI_M_Incontent-2-label, HEI_M_Incontent-2, circle。會破壞 label-for 與 aria 的關聯。
[id]
你應該這樣做： 配置唯一的 id。
後續步驟
- 519 張圖片中有 40 張沒有 alt 屬性. 為每個 <img> 加上 alt：具意義的圖片給簡短描述，純裝飾圖片用 alt=""。
- 4 個表單欄位沒有可辨識的標記. 將每個欄位連結到 <label for> 元素，或設定 aria-label／aria-labelledby。僅有 placeholder 並不足夠。
- 16 個連結在 HTML 中沒有可辨識的名稱. 加入可見的連結文字，或在圖示連結上使用 aria-label 或帶 alt 的圖片。
- 6 個按鈕在 HTML 中沒有名稱. 加入按鈕文字或設定 aria-label。
- 5 條n CSS 規則的文字對比可能過低. 將文字顏色加深或背景調亮，直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
每週重新掃描、以 JS 算繪、出現新障礙時寄送電子郵件 — 即將推出。
方法與限制
於 2026/9/24 檢測了 www.heise.de 在未登入的首次造訪時所提供的 HTML，另加同網域最多四個連結的 CSS 檔。已檢測：色彩對比（取自 CSS）、替代文字、表單標記、操作元件名稱、標題結構、頁面標題與頁面語言、縮放鎖定、重複的 id、正值 tabindex、地標。
未檢測： 一切透過 JavaScript 產生的內容、鍵盤可操作性、可見焦點、焦點順序、螢幕報讀器播報、登入後的內容、子頁面。自動檢測可找出約 20–35% 的 WCAG 違規 — 其餘須以人工檢查。這是一份快照，而非法律判定。
覆蓋層小工具（切換對比或字型的無障礙按鈕）並不能讓網站符合規範——找到的障礙必須在原始碼中修正。 為什麼覆蓋層工具沒有幫助