코스 개요
법적 맥락 및 접근성 기본
모듈 1: 접근성 법의 소개와 그 중요성
- 새로운 접근성 법 (6월 28일부터 시행) 개요
- 법률적 요구 사항과 마감 기한
- 공공 부문, 민간 기업 및 개발자에게 미치는 영향
- 접근성이 왜 중요한지: 사회적, 윤리적, 비즈니스 관점
- 불준수에 대한 처벌
- 접근성 표준 (WCAG 2.1/2.2, ARIA) 개요
- 장애 유형
모듈 2: 접근성 원칙 및 지침
- POUR 원칙 (인지 가능, 조작 가능, 이해 가능, 견고)
- WCAG 가이드라인 소개
- ARIA 역할, 상태 및 속성
- 접근성에 대한 의미론적 HTML의 역할
모듈 3: 접근성 개발 환경 설정
- 도구: 브라우저 개발자 도구, 스크린 리더 (NVDA, VoiceOver), 접근성 확장 프로그램
- 접근성 린터 및 자동화된 접근성 테스트 도구 설정
- 일반적인 접근성 테스트 도구 개요
- 모바일 시뮬레이터와 실제 장치에서의 접근성 테스트 설정 (VoiceOver/TalkBack, Android Accessibility Scanner, Xcode Accessibility Inspector 사용).
모듈 4: 실용적인 코딩 – 의미론적 HTML 및 키보드 내비게이션
- 접근성을 위한 의미론적 마크업 작성
- 완전한 키보드 탐색 보장
- 포커스 관리 기법
- 폼 및 대화형 요소를 접근성 있게 처리하기
네이티브 모바일 앱에서의 접근성 (선택적 추가 모듈, 1.5시간)
- 주요 플랫폼 가이드라인 (Google Material, Apple Human Interface)
- 모바일에서 내비게이션, 버튼, 폼을 접근성 있게 만드는 방법
- 일반적인 모바일 접근성 문제와 해결 방안
- VoiceOver 및 TalkBack으로 실습 테스트하기
고급 코딩 및 보조 기술
모듈 5: 접근성 CSS 및 시각적 디자인
- 컬러 대비와 텍스트 크기의 최선의 관행
- 포커스 스타일 및 가시적 포커스 표시
- 접근성을 위한 반응형 디자인 고려 사항
- 애니메이션과 전환에서의 접근성 함정 피하기
- 모바일 화면을 위한 컬러 대비와 크기 가이드라인.
모듈 6: 동적 콘텐츠 및 리치 인터넷 애플리케이션을 위한 ARIA
- 언제, 어떻게 ARIA 속성을 사용할 것인지
- 스크린 리더를 위한 실시간 영역 관리
- 접근성 있는 위젯과 커스텀 컴포넌트 만들기
- ARIA가 SPA (Single Page Applications)에서의 역할
- 모바일에서는 네이티브 플랫폼에서의 접근성 역할과 라벨에 대해 논의 (예: Android의 contentDescription, iOS의 accessibilityLabel).
모듈 7: 실용적인 코딩 실험실: 접근성 컴포넌트 구축
- 접근성 있는 버튼, 모달, 드롭다운, 탭 만들기
- 접근성을 고려한 폼 검증 및 오류 처리 구현
- 실제 UI 컴포넌트에 ARIA와 의미론적 HTML 사용
테스트, 준수, 지속적인 접근성
모듈 8: 접근성 테스트 및 감사
- 스크린 리더와 키보드만으로의 수동 테스트 기법
- axe, Lighthouse, pa11y 등의 도구를 사용한 자동화된 테스트
- QA 팀을 위한 접근성 테스트 케이스 작성
- CI/CD 파이프라인에서의 접근성 테스트 통합
- 모바일 네이티브 앱에서 접근성 감사를 수행하는 방법 (수동 테스트, Accessibility Scanner 등의 자동화된 도구, Android용 Espresso, iOS용 XCTest)
모듈 9: 수정 및 지속적인 접근성
- 일반적인 접근성 문제와 해결 방법
- 유산 코드베이스에서의 접근성 관리
- 기능 업데이트 및 리팩터링 중에 접근성을 유지하는 방법
- 다중 플랫폼 앱 (모바일, 데스크탑, 웹)에서의 접근성
모듈 10: 최종 실용적인 연습과 요약
- 접근성 표준을 충족하는 작은 앱/모듈을 구축하거나 재구성하기
- 피어 리뷰 및 그룹 토론
- Q&A 및 피드백 세션
- 지속적인 학습과 준수 업데이트를 위한 자원
요건
- HTML, CSS, JavaScript에 대한 기초부터 중급 지식
- 모바일 앱 기술 (Android, IOS)에 대한 기초부터 중급 지식
- 프론트엔드 프레임워크 (React, Angular, Vue 등)에 대한 이해가 유용함
- 모바일 앱 개발에 대한 이해가 유용함
- 웹/모바일 개발 라이프사이클에 대한 기본적인 이해
- 개발 환경이 설정된 노트북 (코드 에디터, 브라우저 개발자 도구)
대상층
- 프론트엔드/백엔드/모바일 개발자
- 코딩 지식이 있는 UI/UX 디자이너
- 접근성 테스트에 중점을 둔 QA 엔지니어
- 접근성 준수와 관련된 제품 소유자 및 프로젝트 관리자
회원 평가 (5)
"트레이너가 우리의 팀이 프로젝트에 Human-Centered Design (HCD)을 적용하는 방법을 실시간으로 보여주는 접근 방식이 정말 좋았습니다. 또한 트레이너가 프로젝트의 전반적인 이해에 시간을 할애했는데, 이는 UX와 UI를 더 나은 방식으로 접근할 수 있는 명확하고 실제적인 지침을 제공하는 데 도움이 되었습니다."
Nichole Bryant Joven - Grundfos
코스 - Human-Centered Design (HCD)
기계 번역됨
The fact that there were practical examples with the content
Smita Hanuman - Standard Bank of SA Ltd
코스 - Basel III – Certified Basel Professional
I did like how the instructor seemed very knowledgeable with Figma.
January Oliva - Eko Health
코스 - User Experience Design with Figma
- exercises are practical - trainer is helpful in answering our specific questions
Germaine Choi - The Hong Kong Jockey Club
코스 - User Experience (UX) Design
Atmosphere, approach to the exercises and comments about the tasks. It was so nice and relaxed way of relay the knowledge