개발자 모범 사례
한국어 해설 KO
접근성을 고려한 개발 워크플로우와 QA 모범 사례를 학습합니다.
학습 목표
접근성을 고려한 코드 리뷰 기준을 설명할 수 있다
접근 가능한 컴포넌트 설계 원칙을 이해한다
프레임워크별 접근성 지원 기능을 나열할 수 있다
접근성 정책 성명서의 구성 요소를 설명할 수 있다
접근성 코드 리뷰 기준: 모든 인터랙티브 요소가 키보드로 접근 가능한가, 시맨틱 HTML을 올바르게 사용했는가, 이미지에 적절한 alt가 있는가, 폼 레이블이 연결되었는가, ARIA가 올바르게 사용되었는가(불필요한 ARIA가 없는가), 색상 대비가 충분한가, 포커스 관리가 적절한가를 점검합니다.
접근 가능한 컴포넌트 설계: 시맨틱 HTML을 기반으로 구축합니다. 키보드 상호작용 패턴을 WAI-ARIA Authoring Practices Guide(APG)에 따라 구현합니다. 상태 변경 시 ARIA 상태를 업데이트합니다. 반응형 디자인에서 터치 타겟 크기를 최소 44×44px로 유지합니다(WCAG 2.5.5). 컴포넌트 문서에 접근성 사용법을 포함합니다.
프레임워크 접근성 지원: React — JSX에서 htmlFor(for 대체), aria-* 속성 직접 사용, Fragment로 불필요한 DOM 방지. Next.js — next/image의 alt 필수, next/link의 자동 접근성 처리. Vue — v-bind로 동적 ARIA 속성 바인딩. Angular — CDK a11y 모듈(FocusTrap, LiveAnnouncer). ESLint 플러그인(eslint-plugin-jsx-a11y)으로 정적 분석 강화.
접근성 정책 성명서(Accessibility Statement): WCAG 적합성 수준과 목표를 명시합니다. 알려진 접근성 제한 사항을 솔직하게 공개합니다. 접근성 관련 문의/피드백 연락처를 제공합니다. 최근 접근성 평가일을 명시합니다. 지속적 개선 의지를 표명합니다. EU WAD에서는 접근성 성명서가 법적 필수입니다.
Original Text EN
Learn development workflows and QA best practices that incorporate accessibility.
Learning Objectives
Explain accessibility-focused code review criteria
Understand accessible component design principles
List accessibility features in popular frameworks
Describe the components of an accessibility statement
Accessibility code review criteria: Are all interactive elements keyboard-accessible? Is semantic HTML used correctly? Do images have appropriate alt? Are form labels connected? Is ARIA used correctly (no unnecessary ARIA)? Is color contrast sufficient? Is focus management proper?
Accessible component design: Build on semantic HTML. Implement keyboard interaction patterns per the WAI-ARIA Authoring Practices Guide (APG). Update ARIA states on state changes. Maintain touch target sizes of at least 44×44px in responsive design (WCAG 2.5.5). Include accessibility usage in component documentation.
Framework accessibility support: React — htmlFor (replacing for in JSX), direct aria-* attributes, Fragment to avoid unnecessary DOM. Next.js — alt required on next/image, automatic accessibility handling in next/link. Vue — v-bind for dynamic ARIA attributes. Angular — CDK a11y module (FocusTrap, LiveAnnouncer). ESLint plugins (eslint-plugin-jsx-a11y) strengthen static analysis.
Accessibility Statement: State the WCAG conformance level and goals. Honestly disclose known accessibility limitations. Provide contact information for accessibility inquiries/feedback. State the date of the last accessibility evaluation. Express commitment to continuous improvement. Under EU WAD, accessibility statements are legally required.