실습 데모 목록

접근성 기본 규칙 세트

책 8장에서 만드는 규칙입니다. 프로젝트의 AI 규칙 파일에 통째로 붙여 넣으면 됩니다.

AI 코딩 도구가 매번 읽는 규칙 파일(CLAUDE.md, AGENTS.md, Cursor Rules 등)에 그대로 붙여 넣으세요. 한 번 넣어두면 앞으로 만드는 모든 화면에 적용됩니다. 각 규칙을 왜 그렇게 정했는지는 책 8장에서 다룹니다.

규칙 전문

## 접근성 규칙 (모든 UI 작업에 적용)

이 프로젝트의 화면은 키보드만 사용하는 사용자와 스크린리더 사용자가
모든 기능을 사용할 수 있어야 한다. 아래 규칙은 예외 없이 적용한다.

### 구조
- 클릭 요소: 동작 실행은 <button>, 페이지 이동은 <a href>.
  div/span + onclick 금지. role과 tabindex로 흉내 내지 않는다.
- 제목은 <h1>~<h6>를 순서대로. 스타일 때문에 제목 레벨을 건너뛰지 않는다.
- 페이지 구조는 <header> <nav> <main> <footer> 랜드마크를 사용한다.

### 이미지·색
- 모든 <img>에 alt 작성. 정보가 있으면 내용을 설명하고,
  장식이면 alt=""(빈 값)로 둔다. 파일명을 alt에 넣지 않는다.
- 텍스트와 배경의 명도 대비는 4.5:1 이상(큰 텍스트 3:1).
- 색만으로 상태를 구분하지 않는다. 아이콘·텍스트를 병행한다.

### 폼·상호작용
- 모든 입력 필드에 <label>을 연결한다. placeholder로 label을 대신하지 않는다.
- 오류 메시지는 텍스트로 표시하고 해당 필드와 연결한다.
- 모달을 열면 포커스를 모달 안으로 옮기고, 닫으면 원래 위치로 되돌린다.
  ESC로 닫을 수 있게 한다.
- 포커스 표시(outline)를 제거하지 않는다. 디자인 변경은 허용, 삭제는 금지.

### 모바일·모션·문서
- 뷰포트에서 확대를 막지 않는다 (user-scalable=no, maximum-scale 금지).
- 양수 tabindex 금지. 글자 크기는 rem 단위, 본문 1rem(16px) 이상.
- 애니메이션에는 prefers-reduced-motion 대응을 포함한다.
- 문서에 lang="ko"와 페이지를 설명하는 <title>을 지정한다.
- 화면 갱신을 시각으로만 알리지 않는다. 상태 메시지는 role="status"로 함께 알린다.

### 작업 방식
- UI 코드를 생성·수정한 뒤에는 위 규칙 위반 여부를 스스로 점검하고,
  위반이 있으면 수정한 뒤 결과에 점검 내역을 표시한다.