You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
261 lines
14 KiB
261 lines
14 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "e6d0f456dfc22afb41bbdefeb5ec179d",
|
|
"translation_date": "2026-01-06T15:44:45+00:00",
|
|
"source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
|
|
"language_code": "ko"
|
|
}
|
|
-->
|
|
# 종합 웹사이트 접근성 감사
|
|
|
|
## 지침
|
|
|
|
이 과제에서는 실제 웹사이트에 대해 전문적인 수준의 접근성 감사를 수행하며, 학습한 원칙과 기법을 적용합니다. 이 실습 경험은 접근성 장벽과 해결책에 대한 이해를 심화시켜 줍니다.
|
|
|
|
접근성 문제로 보이는 웹사이트를 선택하세요. 이는 이미 완벽한 사이트를 분석하는 것보다 더 많은 학습 기회를 제공합니다. 좋은 후보는 오래된 웹사이트, 복잡한 웹 애플리케이션, 또는 풍부한 멀티미디어 콘텐츠를 포함하는 사이트입니다.
|
|
|
|
### 1단계: 전략적 수동 평가
|
|
|
|
자동화 도구를 사용하기 전에 포괄적인 수동 평가를 수행하세요. 이 인간 중심의 접근 방식은 도구가 놓치는 문제를 자주 발견하며 실제 사용자 경험을 이해하는 데 도움을 줍니다.
|
|
|
|
**🔍 필수 평가 기준:**
|
|
|
|
**네비게이션 및 구조:**
|
|
- 키보드만으로(탭, Shift+탭, Enter, 스페이스, 화살표 키) 사이트 전체를 탐색할 수 있나요?
|
|
- 모든 인터랙티브 요소에 포커스 표시기가 명확히 보이나요?
|
|
- 제목 구조(H1-H6)가 논리적인 콘텐츠 개요를 생성하나요?
|
|
- 주요 콘텐츠로 건너뛰는 스킵 링크가 있나요?
|
|
|
|
**시각적 접근성:**
|
|
- 사이트 전반에 걸쳐 충분한 색상 대비가 확보되어 있나요(일반 텍스트 최소 4.5:1)?
|
|
- 중요한 정보를 전달하기 위해 색상만 의존하나요?
|
|
- 모든 이미지에 적절한 대체 텍스트가 있나요?
|
|
- 200%로 확대해도 레이아웃이 정상 작동하나요?
|
|
|
|
**콘텐츠 및 커뮤니케이션:**
|
|
- "여기를 클릭"과 같은 모호한 링크 텍스트가 있나요?
|
|
- 시각적 단서 없이도 콘텐츠와 기능을 이해할 수 있나요?
|
|
- 양식 필드가 적절히 라벨링되고 그룹화되어 있나요?
|
|
- 오류 메시지는 명확하고 도움이 되나요?
|
|
|
|
**인터랙티브 요소:**
|
|
- 모든 버튼과 폼 컨트롤이 키보드만으로 작동하나요?
|
|
- 동적 콘텐츠 변경이 스크린 리더에 알려지나요?
|
|
- 모달 대화상자 및 복잡한 위젯이 적절한 접근성 패턴을 따르나요?
|
|
|
|
📝 **특정 사례, 스크린샷, 페이지 URL과 함께 결과를 문서화**하세요. 문제뿐 아니라 잘 된 점도 기록합니다.
|
|
|
|
### 2단계: 종합 자동화 테스트
|
|
|
|
이제 업계 표준 접근성 테스트 도구를 사용해 수동 평가 결과를 검증하고 확장하세요. 각 도구는 강점이 다르므로 여러 도구를 사용하는 것이 전체적인 검토에 도움이 됩니다.
|
|
|
|
**🛠️ 필수 테스트 도구:**
|
|
|
|
1. **Lighthouse 접근성 감사** (Chrome/Edge 개발자 도구 내장)
|
|
- 여러 페이지에서 감사 실행
|
|
- 특정 지표 및 권장 사항에 집중
|
|
- 접근성 점수 및 구체적 위반 사항 기록
|
|
|
|
2. **axe DevTools** (브라우저 확장 - 업계 표준)
|
|
- Lighthouse보다 더 자세한 문제 탐지
|
|
- 수정용 구체적 코드 예 제공
|
|
- WCAG 2.1 기준에 대한 테스트
|
|
|
|
3. **WAVE 웹 접근성 평가기** (브라우저 확장)
|
|
- 접근성 기능 시각적 표현
|
|
- 오류와 긍정적 특징 모두 강조
|
|
- 페이지 구조 이해에 탁월
|
|
|
|
4. **색상 대비 분석기**
|
|
- WebAIM 대비 검사기(특정 색상 쌍 검사)
|
|
- 페이지 전체 분석용 브라우저 확장
|
|
- WCAG AA 및 AAA 기준 테스트
|
|
|
|
**🎧 실제 보조 기술 테스트:**
|
|
- **스크린 리더 테스트**: NVDA(Windows), VoiceOver(Mac), TalkBack(Android) 사용
|
|
- **키보드 전용 탐색**: 마우스를 분리하고 사이트 전체 탐색
|
|
- **확대 테스트**: 200%, 400% 확대 수준에서 기능 테스트
|
|
- **음성 제어 테스트**: 가능하다면 음성 탐색 도구 사용
|
|
|
|
**📊 결과 정리:**
|
|
- 문제 설명 및 위치
|
|
- 심각도 수준 (치명적/높음/중간/낮음)
|
|
- 위반된 WCAG 성공 기준
|
|
- 문제 탐지 도구
|
|
- 스크린샷 및 증거 제공
|
|
|
|
### 3단계: 종합 결과 문서화
|
|
|
|
기술적 이슈와 사용자 영향 모두에 대한 이해를 보여주는 전문적인 접근성 감사 보고서를 작성하세요.
|
|
|
|
**📋 필수 보고서 섹션:**
|
|
|
|
1. **요약** (1페이지)
|
|
- 웹사이트 URL 및 간략 설명
|
|
- 전반적 접근성 성숙도 수준
|
|
- 가장 심각한 문제 3가지
|
|
- 장애 사용자에 대한 예상 영향
|
|
|
|
2. **방법론** (½페이지)
|
|
- 테스트 접근법 및 사용 도구
|
|
- 평가한 페이지 및 기기/브라우저 조합
|
|
- 평가 기준(WCAG 2.1 AA)
|
|
|
|
3. **상세 결과** (2-3페이지)
|
|
- WCAG 원칙별 문제 분류 (인지성, 조작성, 이해성, 견고성)
|
|
- 스크린샷과 구체적 사례 포함
|
|
- 발견한 긍정적 접근성 기능 기록
|
|
- 자동 도구 결과와 상호 참조
|
|
|
|
4. **사용자 영향 평가** (1페이지)
|
|
- 각 장애 유형 사용자에 대한 문제 영향
|
|
- 실제 사용자 경험 시나리오
|
|
- 비즈니스 영향 (법적 위험, SEO, 사용자 기반 확장)
|
|
|
|
**📸 증거 수집:**
|
|
- 접근성 위반 스크린샷
|
|
- 문제 사용자 흐름 화면 녹화
|
|
- 도구 리포트( PDF로 저장)
|
|
- 문제를 보여주는 코드 예시
|
|
|
|
### 4단계: 전문적인 수정 계획
|
|
|
|
접근성 문제 수정에 대한 전략적이고 우선순위가 지정된 계획을 개발하세요. 이는 실제 비즈니스 제약을 고려한 전문 웹 개발자의 사고력을 보여줍니다.
|
|
|
|
**🎯 최소 10개 이슈에 대해 구체 개선 권장사항 작성:**
|
|
|
|
**각 문제별로 제공할 것:**
|
|
|
|
- **문제 설명**: 잘못된 점과 왜 문제인지 명확히 설명
|
|
- **WCAG 참조**: 위반된 구체적 성공 기준 (예: "2.4.4 링크 목적(문맥 내) - 레벨 A")
|
|
- **사용자 영향**: 다양한 장애 유형 사용자에 미치는 영향
|
|
- **해결책**: 구체적 코드 변경, 디자인 수정, 프로세스 개선
|
|
- **우선순위**: 치명적(기본 사용 차단)/높음(중대한 장벽)/중간(사용성 문제)/낮음(개선사항)
|
|
- **실행 난이도**: 시간/복잡도 추정 (빠른 개선/적당한 노력/대규모 개편)
|
|
- **테스트 검증 방법**: 수정 효과 검증 방법
|
|
|
|
**개선 예시 항목:**
|
|
|
|
```
|
|
Issue: Generic "Read more" link text appears 8 times on homepage
|
|
WCAG Reference: 2.4.4 Link Purpose (In Context) - Level A
|
|
User Impact: Screen reader users cannot distinguish between links when viewed in link list
|
|
Solution: Replace with descriptive text like "Read more about sustainability initiatives"
|
|
Priority: High (major navigation barrier)
|
|
Effort: Low (30 minutes to update content)
|
|
Testing: Generate link list with screen reader - each link should be meaningful standalone
|
|
```
|
|
|
|
**📈 전략적 실행 단계:**
|
|
|
|
- **1단계 (0-2주)**: 기본 기능 차단하는 치명적 문제
|
|
- **2단계 (1-2개월)**: 사용자 경험 개선을 위한 높은 우선순위 개선사항
|
|
- **3단계 (3-6개월)**: 중간 우선순위 개선 및 프로세스 개선
|
|
- **4단계 (지속적)**: 지속적 모니터링 및 개선
|
|
|
|
## 평가 루브릭
|
|
|
|
접근성 감사는 기술적 정확성과 전문적 발표 능력을 기준으로 평가됩니다:
|
|
|
|
| 기준 | 우수 (90-100%) | 양호 (80-89%) | 만족 (70-79%) | 개선 필요 (<70%) |
|
|
|----------|-------------------|---------------|---------------------|------------------------|
|
|
| **수동 테스트 깊이** | 모든 POUR 원칙 포괄 평가, 상세 관찰 및 사용자 시나리오 포함 | 대부분 접근성 영역 잘 다룸, 명확한 결과와 일부 사용자 영향 분석 | 핵심 영역 기본 평가, 적절한 관찰 포함 | 제한적 테스트, 표면적 관찰 및 최소 사용자 영향 고려 |
|
|
| **도구 활용 및 분석** | 필수 도구 모두 효과적으로 사용, 결과 상호 참조, 명확 증거 제공, 도구 한계 분석 | 대부분 도구 활용, 문서 양호, 일부 상호 참조 및 충분한 증거 | 필수 도구 사용, 기본 문서 및 일부 증거 | 도구 사용 최소, 문서 부족 또는 증거 누락 |
|
|
| **문제 식별 및 분류** | 15개 이상 구체적 문제 식별, 정확한 심각도 분류, 깊은 이해 보여줌 | 10-14개 문제 식별, 좋은 분류 및 탄탄한 이해 | 7-9개 문제 식별, 적절한 WCAG 커버 및 기본 분류 | 7개 미만 문제 식별, 범위 제한 또는 분류 미흡 |
|
|
| **해결책 품질 및 실행 가능성** | 10개 이상 상세하고 실행 가능한 해결책, 정확한 WCAG 참조, 실현 가능한 일정과 검증 방법 포함 | 8-9개 잘 개발된 해결책, 대체로 정확한 참조와 좋은 실행 세부사항 포함 | 6-7개 기본 해결책, 일부 세부사항 포함, 전반적 현실적 접근 | 6개 미만 해결책, 세부사항 부족, 비현실적 실행 방안 |
|
|
| **전문적 소통** | 보고서 조직 우수, 명확한 문체, 요약 포함, 적절한 기술 용어와 비즈니스 문서 표준 준수 | 잘 조직됨, 양호한 글쓰기, 대부분 필수 섹션 포함, 적절한 어조 | 기본적인 조직과 문체, 필수 섹션 포함 | 조직 미흡, 불명확한 문장, 주요 섹션 누락 |
|
|
| **실무 적용성** | 비즈니스 영향, 법적 고려, 사용자 다양성, 실제 도전 과제 이해 | 실무 적용 좋은 이해와 일부 비즈니스 맥락 포함 | 실무 적용 기본적 이해 | 실무 적용과의 연계 부족 |
|
|
|
|
## 고급 도전 과제 옵션
|
|
|
|
**🚀 추가 도전을 원하는 학생을 위한:**
|
|
|
|
- **비교 분석**: 경쟁 사이트 2-3곳 감사 후 접근성 성숙도 비교
|
|
- **모바일 접근성 집중**: Android TalkBack 또는 iOS VoiceOver를 이용한 모바일 접근성 심층 분석
|
|
- **국제적 관점**: 각국 접근성 기준(EN 301 549, 섹션 508, ADA) 조사 및 적용
|
|
- **접근성 성명서 검토**: 웹사이트 기존 접근성 성명서(있는 경우)를 결과와 비교 평가
|
|
|
|
## 제출물
|
|
|
|
전문적인 분석과 실질적 실행 계획을 보여주는 종합 접근성 감사 보고서를 제출하세요:
|
|
|
|
**📄 최종 보고서 요구사항:**
|
|
|
|
1. **요약** (1페이지)
|
|
- 웹사이트 개요 및 접근성 성숙도 평가
|
|
- 주요 발견사항 요약 및 비즈니스 영향
|
|
- 우선순위 권장 조치
|
|
|
|
2. **방법론 및 범위** (1페이지)
|
|
- 테스트 방법, 사용 도구, 평가 기준
|
|
- 평가한 페이지/섹션 및 한계사항
|
|
- 기준 준수 프레임워크(WCAG 2.1 AA)
|
|
|
|
3. **상세 결과 보고서** (3-4페이지)
|
|
- 수동 테스트 관찰 및 사용자 시나리오
|
|
- 자동화 도구 결과 및 상호 참조
|
|
- WCAG 원칙별 정리된 문제와 증거
|
|
- 확인된 긍정적 접근성 기능
|
|
|
|
4. **전략적 개선 계획** (3-4페이지)
|
|
- 우선순위 개선 권장사항(최소 10개)
|
|
- 실행 일정 및 노력 추정
|
|
- 성공 지표 및 검증 방식
|
|
- 장기적 접근성 유지 전략
|
|
|
|
5. **지원 증거** (부록)
|
|
- 접근성 위반 및 테스트 도구 스크린샷
|
|
- 문제 및 해결책을 보여주는 코드 예시
|
|
- 도구 보고서와 감사 요약
|
|
- 스크린 리더 테스트 노트 또는 녹화물
|
|
|
|
**📊 형식 요구사항:**
|
|
- **문서 형식**: PDF (전문적 발표)
|
|
- **단어 수**: 2,500-3,500 단어 (부록 및 스크린샷 제외)
|
|
- **시각 자료**: 스크린샷, 도표, 예시 포함
|
|
- **인용**: WCAG 가이드라인 및 접근성 자료 적절히 참조
|
|
|
|
**💡 우수 팁:**
|
|
- 일관된 제목과 스타일로 전문 보고서 형식 사용
|
|
- 탐색 용이성을 위한 목차 포함
|
|
- 기술적 정확성과 명확한 비즈니스용 언어의 균형 유지
|
|
- 기술 구현과 사용자 영향 이해 모두 강조
|
|
|
|
## 학습 성과
|
|
|
|
이 종합 접근성 감사 과제를 완료하면 다음과 같은 필수 전문 기술을 갖추게 됩니다:
|
|
|
|
**🎯 기술 역량:**
|
|
- **접근성 테스트 숙련도**: 업계 표준 수동 및 자동 테스트 방법 숙달
|
|
- **WCAG 적용 경험**: 웹 콘텐츠 접근성 지침을 실제 시나리오에 적용
|
|
- **보조 기술 이해**: 스크린 리더와 키보드 탐색 직접 사용 경험
|
|
- **문제-해결 매핑**: 접근성 장벽 식별 및 구체적, 실행 가능한 개선책 개발 능력
|
|
|
|
**💼 전문 직무 능력:**
|
|
- **기술적 소통**: 다양한 이해관계자를 위한 전문 접근성 보고서 작성 경험
|
|
- **전략적 계획 수립**: 사용자 영향과 실행 가능성에 따른 개선 우선순위 결정 능력
|
|
- **품질 보증**: 개발 생명주기 내 접근성 테스트 이해
|
|
- **위험 평가**: 법적·비즈니스·윤리적 접근성 준수 중요성 인식
|
|
|
|
**🌍 포용적 설계 마인드셋:**
|
|
- **사용자 공감**: 다양한 사용자 요구와 보조 기술 상호작용에 대한 깊은 이해
|
|
- **유니버설 디자인 원칙**: 접근성 설계가 장애인뿐만 아니라 모든 사용자에게 이익을 줌을 인지
|
|
- **지속적 개선**: 지속적인 접근성 평가 및 향상 체계 마련
|
|
- **옹호 기술**: 향후 프로젝트와 팀에서 접근성 모범 사례를 촉진할 자신감
|
|
|
|
**🚀 경력 준비:**
|
|
이 과제는 실제 접근성 컨설팅 프로젝트를 반영하여 포트폴리오 가치가 높은 경험을 제공합니다.
|
|
- 체계적 문제 해결 접근법
|
|
- 기술 세부 사항과 비즈니스 영향 모두 주의
|
|
- 복잡한 기술 개념 명확한 소통
|
|
- 웹 개발의 법적 및 윤리적 책임 이해
|
|
|
|
완료 후, 모든 웹 개발 역할에서 접근성 이니셔티브에 의미있게 기여하고 평생 포용적 설계 관행을 옹호할 준비가 되어 있을 것입니다.
|
|
|
|
---
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
**면책 조항**:
|
|
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 저희는 정확성을 위해 노력하고 있으나, 자동 번역은 오류나 부정확한 부분이 있을 수 있음을 알려드립니다. 원문은 본래 작성된 언어로 된 문서가 권위 있는 출처로 간주되어야 합니다. 중요한 정보의 경우 전문적인 인간 번역을 권장합니다. 이 번역의 사용으로 인해 발생하는 오해나 잘못된 해석에 대해서는 저희가 책임지지 않습니다.
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |