□ 웹 접근성이란?
- 모든 사람이 장애 여부와 상관없이 웹 사이트와 응용 프로그램을 사용할 수 있도록 보장하는 것
1. 접근성이 필요한 사용자 그룹
- 영구적 장애를 가진 사용자
; 시각, 청각, 운동, 인지적 장애
- 일시적 장애를 가진 사용자
; 부상, 환경적 제약(밝은 햇빛, 시끄러운 환경)
- 상황적 제약이 있는 사용자
; 한 손으로 사용, 작은 화면, 느린 인터넷
- 고령 사용자
2. 비즈니스 관점에서의 가치
- 법적 요구사항 충족
- 사용자 기반 확대
; 약 15%의 세계 인구가 장애를 가짐
- SEO 개선
; 접근성 좋은 사이트는 검색 엔진 최적화에도 유리
- 브랜드 이미지 향상
□ 웹 접근성 표준지침과 가이드라인
1. WCAG(Web Content Accessibility Guidelines)
[4가지 핵심 원칙]
1. 인식의 용이성(Perceivable)
- 사용자가 장애 무 등에 관계없이 웹사이트에서 제공하는 모든 기능을 인식할 수 있도록 제공하는 것을 의미
; 대체 텍스트, 멀티미디어 대체수단, 적응성, 명료성의 4가지 지침으로 구성
2. 운용의 용이성(Operable)
- 사용자가 장애 유무 등에 관계없이 웹사이트에서 제공하는 모든 기능을 운용할 수 있도록 제공하는 것을 의미
; 입력장치 접근성, 충분한 시간 제공, 광과민성 발작 예방, 쉬운 내비게이션, 입력 방식의 5가지 지침으로 구성
3. 이해의 용이성(Understandable)
- 사용자가 장애 유무 등에 관계없이 웹사이트에서 제공하는 콘텐츠를 이해할 수 있도록 제공하는 것을 의미
; 가독성, 예측 가능성, 입력 도움의 3가지 지침으로 구성
4. 견고성(Robust)
- 사용자가 콘텐츠를 이용할 수 있도록 기술에 영향을 받지 않아야 함을 의미
; 문법 준수, 웹 애플리케이션 접근성의 2가지 지침으로 구성
2. 국내 관련 법규
- 장애인차별금지법
- 국가정보화기본법
- 한국형 웹 콘텐츠 접근성 지침 2.2
□ HTML의 시맨틱 마크업
1. 시맨틱 HTML 요소의 중요성
- 의미를 명확히 전달
- 스크린 리더 사용자에게 문서 구조 전달
- 검색 엔진 최적화(SEO) 향상
2. 주요 시맨틱 요소
- h1 ~ h6
- header, nav, main, section, article, aside, footer
- ul, ol, dl
□ 키보드 접근성
1. 키보드 네비게이션의 중요성
- 모든 기능은 키보드만으로 사용 가능해야 함
- 논리적인 탭 순서 유지
- 현재 포커스된 요소를 시각적으로 구분
2. 키보드 트랩 방지하기
- 모달이나 대화상자에서 탭 순환 구현
- Esc 키로 닫기 기능 제공
□ WAI-ARIA
- WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications)는 웹 콘텐츠와
웹 애플리케이션의 접근성을 향상시키기 위한 기술 명세
1. 역할(Roles): 요소의 목적이나 기능을 정의
- 주요 역할: button, dialog, tablist, tab, menu, alert
2. 속성(Properties): 요소의 특성이나 관계를 설명
- 주요 속성: aria-label, aria-labelledby, aria-describedby, aria-required
3. 상태(States): 요소의 현재 상태를 나타냄
- 주요 상태: aria-checked, aria-selected, aria-expanded, aria-disabled
4. ARIR 사용 원칙
가. 기본 HTML을 먼저 사용
- <button> > <div role="button">
나. 필요할 때만 ARIA를 사용
- 불필요한 ARIA는 추가하지 말 것
다. 모든 ARIA 인터랙티브 요소는 키보드 제어 가능해야 함
- role="button"은 키보드 이벤트 필요
라. 모든 요소에 접근 가능한 이름 제공
- 버튼, 입력 필드 등에 항상 레이블 제공
마. 상태 업데이트 확실히 하기
- JS로 UI 변경 시 ARIA 속성도 업데이트
□ 접근성 테스트 방법
1. 자동화된 테스트 도구
- Lighthouse: 브라우저 내장 도구
- axe: 자동화된 접근성 테스트 라이브러리
- Wave: 웹사이트 접근성 평가 도구
2. 수동 테스트
- 키보드 전용 탐색
- 스크린 리더 테스트
- 텍스트 크기 200% 확대 테스트
- 고대비 모드 테스트
□ 결론
1. 웹 접근성은 모든 사용자를 위한 것
- 장애를 가진 사용자뿐만 아니라 모든 사용자의 사용성을 향상시켜 더 넓은 사용자층 확보가 가능하다.
2. 시맨틱 마크업의 중요성
- 체계적인 문서 구조 제공으로 스크린 리더 사용자의 경험을 향상시킴과 SEO 개선 효과를 기대할 수 있다.
3. 키보드 접근성 확보 및 ARIA
- 모든 기능은 마우스 없이도 사용이 가능해야 한다
- ARIA는 기본 HTML 시맨틱이 부족할 때 필요한 부분에만 명확하게 사용한다
4. 지속적인 테스트와 개선 필요
⭐발표자 : 이선우님
□ 웹 접근성이란?
- 모든 사람이 장애 여부와 상관없이 웹 사이트와 응용 프로그램을 사용할 수 있도록 보장하는 것
1. 접근성이 필요한 사용자 그룹
- 영구적 장애를 가진 사용자
; 시각, 청각, 운동, 인지적 장애
- 일시적 장애를 가진 사용자
; 부상, 환경적 제약(밝은 햇빛, 시끄러운 환경)
- 상황적 제약이 있는 사용자
; 한 손으로 사용, 작은 화면, 느린 인터넷
- 고령 사용자
2. 비즈니스 관점에서의 가치
- 법적 요구사항 충족
- 사용자 기반 확대
; 약 15%의 세계 인구가 장애를 가짐
- SEO 개선
; 접근성 좋은 사이트는 검색 엔진 최적화에도 유리
- 브랜드 이미지 향상
□ 웹 접근성 표준지침과 가이드라인
1. WCAG(Web Content Accessibility Guidelines)
[4가지 핵심 원칙]
1. 인식의 용이성(Perceivable)
- 사용자가 장애 무 등에 관계없이 웹사이트에서 제공하는 모든 기능을 인식할 수 있도록 제공하는 것을 의미
; 대체 텍스트, 멀티미디어 대체수단, 적응성, 명료성의 4가지 지침으로 구성
2. 운용의 용이성(Operable)
- 사용자가 장애 유무 등에 관계없이 웹사이트에서 제공하는 모든 기능을 운용할 수 있도록 제공하는 것을 의미
; 입력장치 접근성, 충분한 시간 제공, 광과민성 발작 예방, 쉬운 내비게이션, 입력 방식의 5가지 지침으로 구성
3. 이해의 용이성(Understandable)
- 사용자가 장애 유무 등에 관계없이 웹사이트에서 제공하는 콘텐츠를 이해할 수 있도록 제공하는 것을 의미
; 가독성, 예측 가능성, 입력 도움의 3가지 지침으로 구성
4. 견고성(Robust)
- 사용자가 콘텐츠를 이용할 수 있도록 기술에 영향을 받지 않아야 함을 의미
; 문법 준수, 웹 애플리케이션 접근성의 2가지 지침으로 구성
2. 국내 관련 법규
- 장애인차별금지법
- 국가정보화기본법
- 한국형 웹 콘텐츠 접근성 지침 2.2
□ HTML의 시맨틱 마크업
1. 시맨틱 HTML 요소의 중요성
- 의미를 명확히 전달
- 스크린 리더 사용자에게 문서 구조 전달
- 검색 엔진 최적화(SEO) 향상
2. 주요 시맨틱 요소
- h1 ~ h6
- header, nav, main, section, article, aside, footer
- ul, ol, dl
□ 키보드 접근성
1. 키보드 네비게이션의 중요성
- 모든 기능은 키보드만으로 사용 가능해야 함
- 논리적인 탭 순서 유지
- 현재 포커스된 요소를 시각적으로 구분
2. 키보드 트랩 방지하기
- 모달이나 대화상자에서 탭 순환 구현
- Esc 키로 닫기 기능 제공
□ WAI-ARIA
- WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications)는 웹 콘텐츠와
웹 애플리케이션의 접근성을 향상시키기 위한 기술 명세
1. 역할(Roles): 요소의 목적이나 기능을 정의
- 주요 역할: button, dialog, tablist, tab, menu, alert
2. 속성(Properties): 요소의 특성이나 관계를 설명
- 주요 속성: aria-label, aria-labelledby, aria-describedby, aria-required
3. 상태(States): 요소의 현재 상태를 나타냄
- 주요 상태: aria-checked, aria-selected, aria-expanded, aria-disabled
4. ARIR 사용 원칙
가. 기본 HTML을 먼저 사용
- <button> > <div role="button">
나. 필요할 때만 ARIA를 사용
- 불필요한 ARIA는 추가하지 말 것
다. 모든 ARIA 인터랙티브 요소는 키보드 제어 가능해야 함
- role="button"은 키보드 이벤트 필요
라. 모든 요소에 접근 가능한 이름 제공
- 버튼, 입력 필드 등에 항상 레이블 제공
마. 상태 업데이트 확실히 하기
- JS로 UI 변경 시 ARIA 속성도 업데이트
□ 접근성 테스트 방법
1. 자동화된 테스트 도구
- Lighthouse: 브라우저 내장 도구
- axe: 자동화된 접근성 테스트 라이브러리
- Wave: 웹사이트 접근성 평가 도구
2. 수동 테스트
- 키보드 전용 탐색
- 스크린 리더 테스트
- 텍스트 크기 200% 확대 테스트
- 고대비 모드 테스트
□ 결론
1. 웹 접근성은 모든 사용자를 위한 것
- 장애를 가진 사용자뿐만 아니라 모든 사용자의 사용성을 향상시켜 더 넓은 사용자층 확보가 가능하다.
2. 시맨틱 마크업의 중요성
- 체계적인 문서 구조 제공으로 스크린 리더 사용자의 경험을 향상시킴과 SEO 개선 효과를 기대할 수 있다.
3. 키보드 접근성 확보 및 ARIA
- 모든 기능은 마우스 없이도 사용이 가능해야 한다
- ARIA는 기본 HTML 시맨틱이 부족할 때 필요한 부분에만 명확하게 사용한다
4. 지속적인 테스트와 개선 필요
⭐발표자 : 이선우님