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 코드를 생성·수정한 뒤에는 위 규칙 위반 여부를 스스로 점검하고, 위반이 있으면 수정한 뒤 결과에 점검 내역을 표시한다.