ACCESSIBILITY · A11Y
누구나
쓸 수 있게
화면 크기도, 밝기도, 마우스 유무도 사람마다 다릅니다. 그 차이 앞에서 직접 확인한 기준만 이 페이지에 담았습니다.
01 · LIVE PREVIEW
설정을 켜면, 바로 바뀝니다
왼쪽에서 설정을 바꾸면 오른쪽 예시 화면에 그대로 적용됩니다. 이 설정은 예시 화면에만 적용되며, 저장되지 않습니다.
화면 설정
터치 기기에서는 '커서 크게'가 그대로 보이지 않을 수 있습니다(마우스 커서 전용 기능입니다).
공지첫 방문자 상담은 이메일로 먼저 받습니다
이번 주 소식
작은 설정 변경이 얼마나 큰 차이를 만드는지 이 문단에서 확인해 보세요.
글자 크기 대응
큰 글자에서도 줄바꿈이 자연스럽습니다.
고대비 대응
배경과 글자의 경계가 뚜렷합니다.
02 · KEYBOARD
마우스 없이도 끝까지
스킵 링크, 포커스 순서, 포커스 가두기까지 — 마우스를 내려놓고 키보드만으로 확인해 보세요.
스킵 링크
이 페이지 맨 위에서 Tab을 한 번 누르면 "본문 바로가기" 버튼이 화면에 나타납니다. 반복되는 메뉴를 건너뛰고 바로 본문으로 이동합니다.
맨 위로 이동해 Tab 눌러보기포커스 순서
아래 항목을 Tab으로 옮겨 다녀보세요. 숫자는 눈으로 보는 사람을 위한 표시입니다 — 스크린리더 사용자는 순서를 직접 겪기 때문에 굳이 읽지 않아도 됩니다.
아래 항목에 포커스를 옮기면 순서를 알려드립니다.
포커스 가두기(모달)
모달을 열면 Tab이 모달 안에서만 순환합니다. 배경은 마우스로 눌러도 반응하지 않고(inert), Esc를 누르거나 닫기를 누르면 모달을 열었던 버튼으로 포커스가 되돌아갑니다.
03 · CONTRAST CHECKER
숫자로 확인하는 대비
색 두 개를 고르면 상대휘도 공식으로 대비비를 계산합니다. WCAG AA·AAA 기준과 바로 비교합니다.
가나다 Aa 본문 예시
이 문단은 위에서 고른 두 색으로 실시간 렌더링됩니다.
04 · ACCESSIBLE NAME
이름 없는 버튼은, 이름이 없습니다
아이콘만 있는 버튼 두 개를 나란히 뒀습니다. 접근 가능한 이름을 실제로 계산해서 보여줍니다.
나쁜 예 — aria-label 없음
접근 가능한 이름:
시각적으로는 하트 아이콘이 보이지만, 코드에는 이름이 없습니다.
좋은 예 — aria-label 지정
접근 가능한 이름:
같은 모양이지만 aria-label="찜 목록에 추가"가 이름을 채웁니다.
위 결과는 접근 가능한 이름을 계산하는 규칙(aria-label → aria-labelledby → 텍스트 → title 순)을 간단히 흉내 낸 값이며, 실제 스크린리더 음성 출력과 정확히 같지 않을 수 있습니다.
05 · BEFORE / AFTER
같은 화면, 다른 결과
겉모습은 비슷해도 안쪽 구조가 다르면 결과가 달라집니다. 이 섹션의 '나쁜 예'도 색으로만 표시하지 않습니다 — "나쁜 예"라는 글자를 그대로 씁니다.
라벨 없는 입력창
나쁜 예 — placeholder만 사용
값을 입력하면 안내 문구가 사라지고, 자동완성과도 잘 맞지 않습니다.
좋은 예 — label 연결
label을 눌러도 입력창에 포커스가 가고, 스크린리더가 항상 "이름"을 먼저 읽습니다.
오류를 알리는 방법
나쁜 예 — 색으로만 표시
테두리만 붉게 바뀝니다. 스크린리더는 무엇이 잘못됐는지 알려주지 않습니다.
좋은 예 — 아이콘 + 텍스트 병기
올바른 이메일 형식이 아닙니다.
06 · CHECKLIST
이 페이지가 지키는 것
위에서 확인한 것들을 이 페이지 스스로도 지켰습니다.
- 모든 입력 요소에 <label>을 연결합니다.
- 포커스가 가능한 모든 요소에 :focus-visible 표시를 둡니다.
- 색만으로 의미를 전달하지 않습니다 — 텍스트나 아이콘을 함께 씁니다.
- 본문 바로가기(스킵 링크)를 제공합니다.
- 시스템의 모션 줄이기 설정을 존중합니다.
- 모달은 포커스를 가두고, 닫으면 원래 위치로 되돌립니다.
- 장식용 아이콘은 스크린리더가 건너뛰도록 처리합니다.
- 대비비는 실제 계산값으로 확인하고, 근거 없이 "충분하다"고 쓰지 않습니다.
웹접근성 인증(예: WA 마크)을 받은 적은 없습니다. 위 항목은 이 페이지를 만들며 직접 지킨 기준이며, 실제 프로젝트에서는 콘텐츠 특성에 맞춰 항목을 더합니다.
이 화면도, 이미 있는 서비스에 접근성만 더하는 것도 만듭니다.
새로 짓는 일도, 이미 있는 것을 고치고 더하는 일도 합니다.
07 · CONTACT
접근성부터 확인하고 싶다면
지금 있는 화면에 이 정도만 더하는 것도, 처음부터 이 기준으로 짓는 것도 같은 방식으로 만듭니다.
체크리스트 하나만 필요해도, 전체 진단이 필요해도 이야기부터 시작해요.
이야기부터 시작하기