15. 접근성 · 크로스브라우저
15-1. 대체 텍스트 규칙 〔v5.0 신설〕
“텍스트가 아닌 콘텐츠는 대체 가능한 텍스트와 함께 제공”(WCAG 1.1.1). 실무에서 가장 많이 틀리는 부분이라 케이스별로 못박습니다.
| 케이스 | 처리 | 예 |
|---|---|---|
| 장식용 아이콘 (옆에 글자가 있음) | aria-hidden="true" — 읽으면 중복 | <span class="jt-ico" aria-hidden="true">save</span> 저장 |
| 아이콘만 있는 버튼 | 버튼에 aria-label | <button class="jt-icon-btn" aria-label="설정 열기"> |
| 의미 있는 이미지 (제품 사진) | alt에 무엇인지 | alt="인투메디 클리닉스 리쥬 앰플 50ml" |
| 장식용 이미지 (배경 그래픽) | alt="" — 비우기. 빼면 파일명을 읽음 | <img src="hero.jpg" alt=""> |
| 차트·그래프 | 요약 문장 + 원본 수치 표 제공 | “3분기 적합률 98.2%, 전 분기 대비 +0.4%p” |
| QR·바코드 | 코드값을 텍스트로 병기 | LOT 26H21-03 |
| 판정·상태 색 | 글자 병기 필수 | 초록 배지 안에 “적합” |
15-2. 배포 전 체크리스트
- 뷰포트 메타 +
viewport-fit=cover -
jt-tokens.css링크만으로 폰트가 뜨는지 확인 (직접<link>를 넣었다면 중복 아닌지) - 한글·영문·中文(简·繁) 실제 렌더 확인(웹폰트 실패 시 폴백 포함)
- 최소 글자 12px, 캡션 11px 준수
- 모바일(≤639) / 태블릿 / 데스크탑 3폭 확인, 가로 스크롤 없음
- 표는
overflow-x:auto로 감쌈 - 터치 타깃 44px
- 안전영역
env(safe-area-inset-*)— 하단 탭바 사용 시 필수 -
prefers-reduced-motion대응 - 텍스트 대비 4.5:1 이상(라이트·다크 양쪽) · 폼 테두리 3:1 이상
-
--color-text-tertiary를 글자에 쓰지 않았는지 검색 확인 - 포커스 링이 키보드 탐색 시 보임(
:focus-visible) - 아이콘 폰트 로드 실패 시 리가처 원문 노출 안 됨 (
display=block확인) - 아이콘·이미지 대체 텍스트 (§15-1 표 기준)
- 판정·상태를 색만으로 전달하지 않음 (글자 병기)
- +40% 텍스트 팽창 테스트 — 버튼·탭·표 헤더를 영→불·독 수준으로 늘려도 잘림·튀어나옴 없음
- 태국어 등 무공백 언어 샘플 문장을 카드·표에 넣어도 가로 스크롤 없음
- Chrome · Safari · Edge · 모바일 Safari · 삼성인터넷 확인