1. 웹 접근성의 정의2. 준수 이유3. 장애의 유형과 해소 방법4. 웹 접근성 지침(Guideline)5. 세부 지침(Guideline)5-1. 인식의 용이성5-1-1. 이미지 대체 텍스트 - 단순 광고/정보 이미지 - alt 속성5-1-2. 이미지 대체 텍스트 - 아이콘, 이모지 - alt 속성5-1-3. 이미지 대체 텍스트 - 링크/QR코드 이미지 - alt 속성5-1-3. 이미지 대체 텍스트 - 리스트형 정보 이미지 - ul,li 사용5-1-4. 이미지 대체 텍스트 - 데이터 차트 이미지 - table 사용
1. 웹 접근성의 정의
- 어떠한 사용자(장애인, 노인 등)가 어떠한 기술 환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것
2. 준수 이유
- 장애인차별금지법(장차법)
- 차별금지 내용
- 모든 법인 적용
- 전자정보 및 비전자정보에 대하여 장애인이 비장애인과 동등하게 접근, 이용할 수 있도록 수화, 문자 등 필요한 수단 제공
- 3년 이하 징역 또는 3천만원 이하 벌금
- 웹의 창시자 팀 버너스 리의 의견
- “웹의 힘은 보편성에 있다. 장애에 구애 없이 모든 사람이 접근할 수 있도록 하는 것이 웹의 필수 요소다”
3. 장애의 유형과 해소 방법
- 사전적 정의
- 신체 기관이 본래의 제 기능을 하지 못하거나 정신 능력에 결함이 있는 상태
- 어떤 사물의 진행을 가로막아 거치적거리게 하거나 충분한 기능을 하지 못하게 함, 또는 그런 일
- 장애 환경
- 시각, 청각, 운동
- 전맹, 저시력, 색맹, 색약, 노안, 난청, 지체 장애
- 환경
- 운전 중, 스피커 없음, 마우스 없음, 운영체제/브라우저 미지원, 네트워크 저속, 접속 불안정
- 해소 방법
- 시각 장애
- 전맹
- 스크린 리더: 웹에 보이는 모든 이미지, 글씨를 음성으로 듣고 정보를 파악
- 점자 정보 단말기: 웹의 내용을 점자로 변환해 파악
- 저시력
- 화면 확대
- 색약, 색맹
- 고대비
- 운동 장애
- 중증 운동 장애 (목만 움직일 수 있는 경우)
- 헤드 포인터 + 빅키 키보드: 포인터 스틱이 달린 헬멧을 장착하고 키보드를 사용
- 손 운동 장애 (손 떨림 장애, 한 손 장애 등 한 손만 사용 가능)
- 트랙볼 마우스, 한 손 사용자용 키보드:
- 청각 장애
- 알림 음성
- 텍스트 정보로 대체
- 비장애인 대상
- 맥 사용자
- 맥 미지원 등
- 느린 인터넷
- CSS 로딩 실패 등
4. 웹 접근성 지침(Guideline)
- 공식 지침
- Web Content Accessibility Guidelines
- W3C에서 작성한 웹 접근성 지침
- Korean Web Content Accessibility Guidelines
- WCAG를 한국화한 지침 (한국형 웹 접근성 지침)
- KWCAG
- 원칙 4가지, 지침 13가지, 검사 항목 24가지
- 원칙
- 인식의 용이성
- 운용의 용이성
- 이해의 용이성
- 견고성
- 지침
- 인식의 용이성
- 대체 텍스트
- 멀티미디어 대체 수단
- 명료성
- 운용의 용이성
- 입력장치 접근성
- 충분한 시간 제공
- 광과민성 발작 예방
- 쉬운 네비게이션
- 이해의 용이성
- 가독성
- 예측 가능성
- 콘텐츠의 논리성
- 입력 도움
- 견고성
- 문법 준수
- 웹 애플리케이션 접근성
5. 세부 지침(Guideline)
WCAG(Web Content Accessibility Guidelines) 2.1은 웹 콘텐츠를 보다 더 접근 가능하게 만들기 위한 광범위한 권장표준을 포함하고 있다. 이 지침을 준수하면, 전맹과 저시력, 난청과 청각장애, 운동장애, 언어장애, 광과민성, 그리고 이러한 장애의 조합뿐만 아니라 학습장애와 인지장애를 위한 약간의 조절을 포함하여 훨씬 더 광범위한 장애인들을 위한 보다 더 접근 가능한 콘텐츠를 만들 수 있다. 그러나 이 지침은 이러한 장애를 지닌 사람들을 위한 모든 사용자 요구를 다루지는 않는다. 이 지침은 데스크톱, 랩톱, 태블릿, 모바일 장치에서의 웹 콘텐츠의 접근성을 다룬다. 이 지침을 준수하면, 전반적으로 사용자들도 웹 콘텐츠를 더 많이 사용할 수 있도록 해 줄 것이다. - 웹 콘텐츠 접근성 지침 (WCAG) 2.1
5-1. 인식의 용이성
- 스크린리더로 콘텐츠로 음성으로 듣는 경우, 이미지의 경우 별도로 텍스트를 제공해야 한다.
- alt 사용 시 주의사항
- 스크린 리더는 ‘이미지’ 임을 전달하므로, 텍스트에 ‘이미지’가 포함되지 않아야 한다.
- alt 속성을 제공하지 않을 경우, 스크린 리더는 src 속성의 파일명을 읽어 사용자에게 전달한다.
- 이미지에 대한 설명과 동일한 텍스트가 화면 상에 있다면 대체 텍스트는 생략한다.
- alt=""는 이미지가 시각적으로만 중요하며, 콘텐츠나 기능적으로 중요하지 않음을 나타낸다.
5-1-1. 이미지 대체 텍스트 - 단순 광고/정보 이미지 - alt 속성
<img src="160314.png" alt="주식수수료 평생무료 비대면계좌개설 신규/온라인/유관기관 제비용 제외 2018년 12월 31일까지 선물/옵션 1년 무료, 신용이자 연 3.5% 60일 우대">
5-1-2. 이미지 대체 텍스트 - 아이콘, 이모지 - alt 속성
<img src="search-icon.png" alt="검색" /> <img src="brown_img_5.png" alt="미안해하는 브라운">
5-1-3. 이미지 대체 텍스트 - 링크/QR코드 이미지 - alt 속성
<a href="home.html"> <img src="logo.png" alt="홈페이지로 이동" /> </a>
<a href="http://www.naver.com"> <img src="qr_code.png" alt="http://www.naver.com 바로 가기 QR코드"> </a>
5-1-3. 이미지 대체 텍스트 - 리스트형 정보 이미지 - ul,li 사용
<img src="160314.png" alt=""> <ul class="blind"> <li>주식수수료 평생무료 비대면계좌개설 신규/온라인/유관기관 제비용 제외</li> <li>2018년 12월 31일까지 선물/옵션 1년 무료</li> <li>신용이자 연 3.5% 60일 우대</li> </ul>
5-1-4. 이미지 대체 텍스트 - 데이터 차트 이미지 - table 사용
<img src="graph.png" alt="" /> <table class="blind"> <caption>...</caption> <thead> <tr> <th scope="col">년도</th> <th scope="col">학과</th> <th scope="col">지원 수</th> </tr> </thead> <tbody> <tr> <td>2003</td> <td>언어학</td> <td>10200명</td> </tr> ... </tbody> </table>