檢測於 2026/8/31 · https://www.spiegel.de/
32 項關鍵障礙n · 另有 7 項待查。
分數如何計算?(起始 100 分)
| {n} 個表單欄位沒有可辨識的標記 | -18 |
| {n} 個連結在 HTML 中沒有可辨識的名稱 | -18 |
| {n} 個按鈕在 HTML 中沒有名稱 | -18 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -18 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -6 |
| 所提供的 HTML 中沒有 <h1> 標題 | -7 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -2 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -2 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -2 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -2 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -2 |
| {n} 條{nPlural} CSS 規則的文字對比可能過低 | -2 |
| 結果 | 0 / 100 |
可感知
{n} 個表單欄位沒有可辨識的標記
請檢查是否有透過 JavaScript 設定的 aria-label。
input, select, textarea
你應該這樣做: 將每個欄位連結到 <label for> 元素,或設定 aria-label/aria-labelledby。僅有 placeholder 並不足夠。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.button-spon
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.button-effi
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.button-mmo
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.button-hbm
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
input::-moz-placeholder, textarea::-moz-placeholder
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
input::placeholder, textarea::placeholder
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
body .richtext--inverted p
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
body .richtext--inverted a
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
body .richtext--inverted a:focus
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.richtextcredit.richtextcredit--inverted a
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.richtextsystem.richtextsystem--inverted a
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.richtextsystem.richtextsystem--inverted a:hover
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.richtextsystem.richtextsystem--inverted a:focus
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.text-shade-base
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.text-shade-light
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.text-shade-lighter
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.text-shade-lightest
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.text-white
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.placeholder-shade-base::-moz-placeholder
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.placeholder-shade-base::placeholder
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.hover\:text-shade-lighter:hover
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.hover\:text-shade-lightest:hover
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.hover\:text-white:hover
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.focus\:text-shade-base:focus
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.focus\:text-shade-lighter:focus
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.focus\:text-white:focus
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.disabled\:text-shade-base:disabled
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.disabled\:text-shade-light:disabled
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.peer:disabled~.peer-disabled\:text-shade-base
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.debug.svelte-1x5iokp
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.text-effi-primary-base
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.text-elf-primary-base
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.text-shade-dark
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.text-spon-primary-base
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
{n} 條{nPlural} CSS 規則的文字對比可能過低
必要值:4.5:1(一般)或 3:1(大字)。在「推定的頁面背景」情況下,無法確定實際背景 — 有疑慮時請在瀏覽器中檢查。發現包括:{examples}
.disabled\:text-shade-dark:disabled
你應該這樣做: 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
可操作
{n} 個連結在 HTML 中沒有可辨識的名稱
空連結,或僅有圖示/圖片而無 alt。透過 JavaScript 設定的 aria-label 在此不會被辨識。
a
你應該這樣做: 加入可見的連結文字,或在圖示連結上使用 aria-label 或帶 alt 的圖片。
{n} 個按鈕在 HTML 中沒有名稱
沒有文字也沒有 aria-label 的按鈕對螢幕報讀器而言是沉默的 — 除非名稱是透過 JavaScript 設定。
button
你應該這樣做: 加入按鈕文字或設定 aria-label。
所提供的 HTML 中沒有 <h1> 標題
每個頁面應以恰好一個 h1 開始。在透過 JavaScript 建構的頁面中,h1 可能只在瀏覽器中才出現 — 此時請檢查算繪後的 DOM。
body
你應該這樣做: 插入一個有意義的 <h1> 作為第一個標題(最好在伺服器端就有)。
已正確處理
- Textalternativen: keine automatisch erkennbaren Probleme
- 有跳至內容的跳過連結
- 有 <main> 地標
後續步驟
- {n} 個表單欄位沒有可辨識的標記. 將每個欄位連結到 <label for> 元素,或設定 aria-label/aria-labelledby。僅有 placeholder 並不足夠。
- {n} 個連結在 HTML 中沒有可辨識的名稱. 加入可見的連結文字,或在圖示連結上使用 aria-label 或帶 alt 的圖片。
- {n} 個按鈕在 HTML 中沒有名稱. 加入按鈕文字或設定 aria-label。
- {n} 條{nPlural} CSS 規則的文字對比可能過低. 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
- {n} 條{nPlural} CSS 規則的文字對比可能過低. 將文字顏色加深或背景調亮,直到達到相應的最低值。切勿將顏色作為唯一的區辨特徵。
每週重新掃描、以 JS 算繪、出現新障礙時寄送電子郵件 — 即將推出。
方法與限制
於 2026/8/31 檢測了 www.spiegel.de 在未登入的首次造訪時所提供的 HTML,另加同網域最多四個連結的 CSS 檔。已檢測:色彩對比(取自 CSS)、替代文字、表單標記、操作元件名稱、標題結構、頁面標題與頁面語言、縮放鎖定、重複的 id、正值 tabindex、地標。
未檢測: 一切透過 JavaScript 產生的內容、鍵盤可操作性、可見焦點、焦點順序、螢幕報讀器播報、登入後的內容、子頁面。自動檢測可找出約 20–35% 的 WCAG 違規 — 其餘須以人工檢查。這是一份快照,而非法律判定。