2026. 9. 24.에 점검함 · https://www.spiegel.de/
심각한 장벽 1건 · 추가로 4건 확인 필요.
지난 스캔 이후: 변경 없음.
점수는 어떻게 산정되나요? (시작 점수 100)
| HTML에서 이름이 없는 버튼 21개 | -18 |
| 인식 가능한 라벨이 없는 폼 필드 1개 | -7 |
| HTML에서 인식 가능한 이름이 없는 링크 3개 | -7 |
| 제공된 HTML에 <h1> 제목이 없습니다 | -7 |
| 텍스트 대비가 너무 낮을 수 있는 CSS 규칙 5개n | -7 |
| 결과 | 54 / 100 |
인식 가능
인식 가능한 라벨이 없는 폼 필드 1개
JavaScript로 설정된 aria-label이 있는지 확인하세요.
<input name="suchbegriff" id="search-input-field" placeholder="Seite durchsuchen ...">
이렇게 하세요: 각 필드를 <label for> 요소와 연결하거나 aria-label / aria-labelledby를 설정하세요. placeholder만으로는 충분하지 않습니다.
텍스트 대비가 너무 낮을 수 있는 CSS 규칙 5개n
필요: 4.5:1(일반) 또는 3:1(큰 텍스트). “가정된 페이지 배경”의 경우 실제 배경을 확실히 판단할 수 없었습니다 — 의심스러우면 브라우저에서 확인하세요. 발견된 예: `.text-shade-base`: #989694 auf #ffffff (Standard) (Seitenhintergrund, angenommen) = 2.95:1 · `.debug.svelte-1x5iokp`: red auf #ffffff (Standard) (Seitenhintergrund, angenommen) = 4.00:1 · `.text-effi-primary-base`: #e64415 auf #ffffff (Standard) (Seitenhintergrund, angenommen) = 4.04:1 · `.text-shade-dark`: #807e7c auf #ffffff (Standard) (Seitenhintergrund, angenommen) = 4.04:1 · `.text-elf-primary-base`: #3c8771 auf #ffffff (Standard) (Seitenhintergrund, angenommen) = 4.29:1
.text-shade-base, .debug.svelte-1x5iokp, .text-effi-primary-base, .text-shade-dark, .text-elf-primary-base
이렇게 하세요: 해당 최소값에 도달할 때까지 텍스트 색을 어둡게 하거나 배경을 밝게 하세요. 색을 유일한 구분 수단으로 사용하지 마세요.
운용 가능
HTML에서 이름이 없는 버튼 21개
텍스트도 aria-label도 없는 버튼은 이름이 JavaScript로 설정되지 않는 한 스크린 리더에 무음입니다.
<button class="bg-white flex items-center justify-around bg-white d><button class="bg-white flex items-center justify-around bg-white d><button><button class="flex items-center justify-center my-auto rounded-cir>
이렇게 하세요: 버튼 텍스트를 추가하거나 aria-label을 설정하세요.
HTML에서 인식 가능한 이름이 없는 링크 3개
빈 링크 또는 alt 없는 아이콘/이미지만 있음. JavaScript로 설정된 aria-label은 여기서 인식되지 않습니다.
<a target="_self" class="block svelte-1x5iokp"><a target="_self" class="flex flex-col text-black dark:text-shade-ligh<a target="_self" class="text-black dark:text-shade-lightest block">
이렇게 하세요: 보이는 링크 텍스트를 추가하거나, 아이콘 링크에는 aria-label 또는 alt 있는 이미지를 사용하세요.
제공된 HTML에 <h1> 제목이 없습니다
각 페이지는 정확히 하나의 h1로 시작해야 합니다. JavaScript로 구성되는 페이지에서는 h1이 브라우저에서만 생성될 수 있습니다 — 그럴 때는 렌더링된 DOM에서 확인하세요.
body
이렇게 하세요: 의미 있는 <h1>을 첫 제목으로 삽입하세요(가능하면 서버 측에서).
이미 올바르게 해결됨
- 텍스트 대안: 자동으로 인식 가능한 문제 없음
- 콘텐츠로 건너뛰는 링크가 있습니다
- <main> 랜드마크가 있습니다
다음 단계
- HTML에서 이름이 없는 버튼 21개. 버튼 텍스트를 추가하거나 aria-label을 설정하세요.
- 인식 가능한 라벨이 없는 폼 필드 1개. 각 필드를 <label for> 요소와 연결하거나 aria-label / aria-labelledby를 설정하세요. placeholder만으로는 충분하지 않습니다.
- HTML에서 인식 가능한 이름이 없는 링크 3개. 보이는 링크 텍스트를 추가하거나, 아이콘 링크에는 aria-label 또는 alt 있는 이미지를 사용하세요.
- 제공된 HTML에 <h1> 제목이 없습니다. 의미 있는 <h1>을 첫 제목으로 삽입하세요(가능하면 서버 측에서).
- 텍스트 대비가 너무 낮을 수 있는 CSS 규칙 5개n. 해당 최소값에 도달할 때까지 텍스트 색을 어둡게 하거나 배경을 밝게 하세요. 색을 유일한 구분 수단으로 사용하지 마세요.
주간 재스캔, JS 렌더링, 새 장벽 발생 시 이메일 — 곧 제공.
방법 & 한계
2026. 9. 24.에, www.spiegel.de가 로그인 없이 첫 호출 시 제공하는 HTML과 동일 도메인의 연결된 CSS 파일 최대 4개를 점검했습니다. 점검 대상: 색상 대비(CSS에서), 텍스트 대안, 폼 라벨, 컨트롤 이름, 제목 구조, 페이지 제목과 언어, 확대/축소 잠금, 중복 id, 양수 tabindex 값, 랜드마크.
점검하지 않음: JavaScript로 생성되는 모든 것, 키보드 운용성, 보이는 포커스, 포커스 순서, 스크린 리더 안내, 로그인 뒤의 콘텐츠, 하위 페이지. 자동 테스트는 WCAG 위반의 약 20~35 %를 발견합니다 — 나머지는 수동 점검이 필요합니다. 스냅샷이며 법적 판단이 아닙니다.
오버레이 위젯(대비나 글꼴을 바꾸는 접근성 버튼)으로는 사이트가 적합해지지 않습니다. 발견된 장벽은 소스 코드에서 고쳐야 합니다. 오버레이가 도움이 되지 않는 이유