초록상점 카페 — 접근성 검사
수리 전후 같은 도구로 세 페이지를 검사했습니다
수리 전
63.6%
위반 47건 · 규칙 4개
수리 후
100%
위반 0건
| 원인 | 고친 곳 | 전 | 후 |
|---|---|---|---|
| 자동 검사로 잡힌 것 | |||
| 카드와 버튼이 div | 카드 → a, 나머지 → button | 16 | 0 |
| 대체 텍스트가 파일명 | 메뉴 사진 5종, 약도 | 10 | 0 |
| 색 변수 두 개 | --muted, --brand | 18 | 0 |
| 확대 차단 | viewport 세 줄 | 3 | 0 |
| 사람이 찾은 것 (도구는 보고하지 않음) | |||
| 포커스 표시 제거 | outline:none → :focus-visible | 전역 | 해결 |
| 메뉴 순서 불일치 | CSS order 제거, 마크업 정렬 | 3면 | 해결 |
| div 오버레이 모달 | <dialog> + showModal() | 1 | 해결 |
| 검색창에 이름표 없음 | label for 연결 | 1 | 해결 |
| 알레르기를 색으로만 | 글자 병기 | 1 | 해결 |
| 제목 구조 없음 | h1~h3 부여 | 3면 | 해결 |
| 랜드마크 없음 | header·nav·main·footer, 표 | 3면 | 해결 |
| 작고 이름 없는 아이콘 | 44px + aria-label | 3 | 해결 |
증상 예순 건 남짓이 원인 열두 개에서 나왔습니다. 카드 컴포넌트 하나가 세 페이지에 복제되어 있었고, 색 변수 두 줄이 대비 미달 열여덟 건을 만들고 있었습니다.