{ "name": "Accessibility Rules", "description": "웹 접근성 표준을 준수하기 위한 가이드라인 및 규칙", "rules": { "wcag": { "conformanceLevel": "WCAG 2.1 AA", "principles": { "perceivable": { "textAlternatives": { "rule": "모든 비텍스트 콘텐츠에 대체 텍스트 제공", "implementation": [ "이미지에 적절한 alt 속성 제공", "아이콘 버튼에 접근 가능한 이름 제공", "복잡한 차트나 그래프에 상세 설명 제공" ], "examples": { "good": "\"회사", "bad": "" } }, "timeBasedMedia": { "rule": "시간 기반 미디어에 대체 수단 제공", "implementation": [ "동영상에 자막 제공", "오디오 콘텐츠에 대본 제공", "필요한 경우 수화 통역 제공" ] }, "adaptable": { "rule": "다양한 방식으로 표현 가능한 콘텐츠 제작", "implementation": [ "시맨틱 HTML 요소 사용", "콘텐츠의 논리적 구조 유지", "데이터 테이블에 적절한 헤더와 관계 정의" ], "examples": { "good": "", "bad": "
제출
" } }, "distinguishable": { "rule": "콘텐츠를 보고 듣기 쉽게 만들기", "implementation": [ "텍스트와 배경 간 충분한 대비(최소 4.5:1)", "텍스트 크기 조정 시 가독성 유지", "자동 재생 오디오 제어 기능 제공" ], "colorContrast": { "normalText": "최소 4.5:1", "largeText": "최소 3:1", "uiComponents": "최소 3:1" } } }, "operable": { "keyboardAccessible": { "rule": "모든 기능을 키보드로 사용 가능하게 구현", "implementation": [ "모든 상호작용 요소를 키보드로 접근 및 조작 가능하게 구현", "키보드 트랩 방지", "사용자 정의 컴포넌트에 적절한 키보드 지원 추가" ], "examples": { "good": "버튼", "bad": "
클릭 영역
" } }, "enoughTime": { "rule": "콘텐츠 읽고 사용할 충분한 시간 제공", "implementation": [ "시간 제한이 있는 경우 연장 또는 해제 옵션 제공", "자동 업데이트 콘텐츠 일시 정지 기능 제공", "자동 슬라이드쇼 제어 기능 제공" ] }, "seizures": { "rule": "발작 유발 콘텐츠 방지", "implementation": [ "초당 3회 이상 깜빡이는 콘텐츠 사용 금지", "애니메이션 제어 기능 제공" ] }, "navigable": { "rule": "사용자가 탐색하고 콘텐츠를 찾을 수 있도록 지원", "implementation": [ "페이지 타이틀 제공", "의미 있는 순서로 포커스 이동", "명확한 링크 텍스트 사용", "여러 경로로 페이지 접근 제공", "현재 위치 표시", "의미 있는 헤딩 구조 사용" ] }, "inputModalities": { "rule": "다양한 입력 방식 지원", "implementation": [ "터치 타겟 충분한 크기 제공 (최소 44x44px)", "제스처 대체 수단 제공", "모션 기능 비활성화 옵션 제공" ] } }, "understandable": { "readable": { "rule": "텍스트 콘텐츠를 읽고 이해할 수 있게 만들기", "implementation": [ "페이지 언어 지정", "특이한 단어나 약어 정의 제공", "적절한 독해 수준 유지" ], "examples": { "good": "", "bad": "" } }, "predictable": { "rule": "예측 가능한 방식으로 웹페이지 작동", "implementation": [ "포커스 시 자동 컨텍스트 변경 방지", "입력 시 자동 컨텍스트 변경 방지", "일관된 탐색 및 식별 제공" ] }, "inputAssistance": { "rule": "사용자의 실수 방지 및 정정 지원", "implementation": [ "오류 식별 및 설명 제공", "입력 지침 제공", "오류 방지 및 수정 지원", "중요 거래에 대한 확인 및 취소 기능 제공" ], "errorHandling": { "identification": "오류 발생 시 시각적, 텍스트적, 프로그래밍적으로 식별 가능하게 표시", "suggestion": "오류 수정 방법 제안", "prevention": "재확인, 검토, 취소 기능을 통한 오류 방지" } } }, "robust": { "compatible": { "rule": "현재 및 미래의 기술과 호환성 유지", "implementation": [ "유효한 HTML/마크업 사용", "UI 컴포넌트에 적절한 이름, 역할, 값 제공", "상태 메시지를 프로그래밍적으로 인식 가능하게 구현" ], "examples": { "good": "", "bad": "
☰
" } } } } }, "aria": { "landmarks": { "required": [ "banner/header", "navigation", "main", "contentinfo/footer" ], "usage": { "banner": "사이트 헤더 영역 (role=\"banner\" 또는
)", "navigation": "주 탐색 메뉴 (role=\"navigation\" 또는