- Web accessibility(웹 접근성)이란?
- 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킨다. 사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있다.
접근에 대한 개념의 다양성으로 인한 인식의 부족보다는 접근성에 대한 개념을 잘못 이해하고 있는 것이 더 욱 문제이다. 즉, 접근성을 단지 장애인에게 국한된 문제라고 잘못 이해하고 있는 경우가 대부분이라는 것이다. 비록 접근성 준수가 장애인에게 가장 혜택이 많이 돌아가는 것은 사실이지만, 접근성이란 장애인뿐만 아니라 모든 사람이 정보통신 기기나 서비스를 손쉽게 활용할 수 있도록 만드는 것을 말하는 것이다.
-
"웹의 힘은 그 광범위함에 있다. 장애에 구애없이 모든 사람이 접근할 수 있다는 것이 웹의 본질적인 면이다." - 팀 버너스 리
- The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.
-
장애란?
- 어떤 사물의 진행을 가로막아 거치적거리게 하거나 충분한 기능을 하지 못하게 하는 것 또는 그런 일
- 두 번재 신체 기관이 제 기능을 하지 못하거나 정신 능력에 결함이 있는 상태
-
장애 환경
- 전맹 시각 장애: 시력이 거의 없어 앞을 볼 수 없음. 다른 감각으로 웹을 이용
- 저시력 시각 장애: 일상적인 생활이 어려운 정도, 좀 더 크고 선명하게 볼 수 있는 기능 필요
- 중증 운동 장애: 손과 팔을 사용하지 못하고, 보조기기이 도움이 필요
- 손 운동 장애: 한 손만 가능, 정교한 조작이 어려움
- 청각 장애: 안내 문구나 자막과 같은 화면의 문자에 의존
- 맥 사용자: 윈도우에서만 사용이 가능한 경우
- 느린 인터넷: 인터넷 환경이 열악한 경우, 로딩 속도가 웹 페이지를 인식하는데 불편하게 만듬
- WCAG: Web Content Accessibility Guidelines
- W3C에서 발표한 웹 콘텐츠 접근성 지침
- KWCAG: Korean Web Content Accessibility Guidelines
- 해외 웹 표준 기술 동향을 기준으로 국내 실정에 맞게 반영된 웹 접근성 지침
텍스트가 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다.
- alt 속성
<img src="160314.png" alt="주식수수료 평생무료 비대면계좌개설 신규/온라인/유관기관 제비용 제외 2018년 12월 31일까지 선물/옵션 1년 무료, 신용이자 연 3.5% 60일 우대">버튼과 같은 의미 있는 이미지의 경우에도 대체 텍스트를 시각적으로 보는 것과 동등하게 제공
<img src="btn_next.png" alt="다음 콘텐츠 보기">
<img src="brown_img_5.png" alt="미안해하는 브라운">
<a href="http://www.naver.com">
<img src="qr_code.png" alt="http://www.naver.com 바로 가기 QR코드">
</a>
<img src="text.jpg" alt="보안 문자">- 마크업
<img src="160314.png" alt="">
<p class="blind">
주식수수료 평생무료 비대면계좌개설 신규/온라인/유관기관 제비용 제외
2018년 12월 31일까지 선물/옵션 1년 무료, 신용이자 연 3.5% 60일 우대
</p>이미지 테그와 대체 텍스트로 사용하고 있는 P 테그에 동일한 내용이 중복되면 스크린리더에서 같은 내용을 반복해서 전달하게 됨으로 이미지 테그의 알트는 비워둔다. 단, alt 속성을 완전히 지울 경우. src에 입력된 파일명을 읽기 때문에 알트 속성을 비운 상태로 사용한다.
<a href="…">
<img src="thumb01.jpg" alt="">
<span>웨딩 사진을 모티브로 만든 도일리 #프랑스자수</span>
</a>- 데이터 차트나 복잡한 콘텐츠
<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>- 사용자가 업로드하는 이미지 이미지 업로드 시에, 사용자가 대체 텍스트로 입력한 내용이 실제로 대체 텍스트로 제공되도록 구현
멀티미디어 콘텐츠에는 자막, 대본 또는 수화를 제공해야 한다.
- 사용자가 업로드하는 멀티미디어의 경우 대체 콘텐츠를 제공할 수 있도록 도구를 제공
콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
- 색으로만 구분하는 것이아니라, 패턴이나 테두리, 모양으로 구분
- 적용될 수 있는 범위
- 차트
- 슬라이드 버튼 선택 여부
- 페이지내이션
- 탭 버튼 선택 여부
지시 사항은 모양, 크기, 위치, 방향, 색 소리 등에 관계없이 인시될 수 있어야 한다.
- 모양으로만 정보 제공하지 않기
*는 필수 입력사항입니다. 라고 설명을 제공
- 위치나 방향으로 정보 제공하지 않기
- 크기로만 정보 제공하지 않기
- 색으로만 정보 제공하지 않기
- "보란색 지역은 관할 지역입니다." => "서울, 경기, 인천지역은 관할 지역입니다."
텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.
- 확대가 가능한 브라우저에서는 최소 3:1 이상이면 준수
- 의미있는 이미지에 있는 텍스트에도 명도 대비가 준수되어야 한다.
- 단, 로고, 장식 목적의 콘텐츠가 마우스나 키보드를 활용해서 초점을 받았을 때 명도 대비가 커지는 콘텐츠는 예외로 한다.
자동으로 소리가 재생되지 않아야 한다.
- 자동으로 재생되는 3초 이상의 배경음 또는 동영상
- 페이지 진입 시 자동으로 음악이 나오거나 동영상이 재생되는 경우 스크린리더 음성과 겹치게 되면서 페이지의 내용을 인식하기 어렵게 만듬
- 불가피하게 제공할 경우
- 3초 내에 정지
- ESC 키 선택 시 정지
- 소스 상 가장 먼저 제공하여 정지 기능 실행 가능하도록 구현
이웃한 콘텐츠는 구별될 수 있어야 한다.
- 이웃한 콘텐츠 구분 방법
- 테두리 이용
- 콘텐츠 사이에 시각적인 구분선 삽입
- 콘텐츠 배경색 간의 명도대비(채도)를 다르게하여 구분
- 줄 간격 및 글자 간격을 조절
- 콘텐츠를 시각적으로 구분할 수 있는 방법을 통해서 구분
모든 기능은 키보드만으로 사용할 수 있어야 한다.
- 마우스 오버 시 기능과 키보드 접근 시 기능을 동일하게 구현
- 키보드 사용이 보장되야 하는 부분
- 마우스 오버 시 드롭 다운 메뉴
- 자동 롤링 콘텐츠에 마우스 오버 시에 나타나는 전체 콘텐츠
- 특정 버튼에 마우스 오버 시 레이아웃 노출되는 경우
- 이미지 또는 초점을 받을 수 없는 요소에 마우스 이벤트가 적용된 경우
- a 링크 요소에 href 속성이 없는 경우 => href 속성을 제공
- a 링크에 href 속성은 있지만 onfocus="this.blur();"가 적용된 경우
- 키보드가 함정에 빠져 더 이상 키보드 접근이 되지 않는 경우
키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 한다.
- 논리적 초점 이동
- 초점은 일반적으로 좌에서 우, 상에서 하로 이동할 것이라고 예측된다. 따라서 초점 이동은 논리적 구조로 마크업하여 사용자가 예측하는 이동 순서와 일치해야 한다. 예를들어, 초점 이동이 '아이디 입력 -> 비밀번호 입력 -> 로그인 버튼 -> 아이디 저장' 순서로 되어 있다면 로그인 버튼을 먼저 클릭하기 때문에 아이디 저장을 못할 가능성이 있음
- tabindex를 사용해서 초점 이동을 강제로 변경하는 경우도 오류에 해당한다.
- 초점 표시
- 키보드 사용자도 초점이 어디에 위치하는지 알 수 있어야 함
- 시각적으로 초점이 보여야 한다. => 초점을 받았음을 시각적으로 구별할 수 있어야 함
- 레이어 팝업을 열었을 때, 초점은 레이어 팝업 안으로 들어가야 한다.
- 팝업을 닫았을 때는 다시 초점이 레이어 팝업을 호출한 메뉴로 돌아간다.
사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.
- 컨트롤 대각선의 길이는 6mm 이상으로 한다.
- 컨트롤 테두리 안쪽으로 1픽셀 이상의 여백을 둔다.
시간 제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
- 시간 제한이 있는 콘텐츠
- 20초 이상의 충분한 시간 제공
- 종료 안내
- 조절 수단 제공
- 페이지 자동 전환
- 연장 가능 수단 제공
- 해제 가능 수단 제공
자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
- 자동 변경 슬라이드
- 이전, 다음, 정지 기능을 제공. (마우스 오버나 키보드 접근 시에 정지되도록 구현한 것도 제공한 것으로 인정됨)
- 자동 변경 콘텐츠가
- 실시간 검색처럼 자동 변경되는 콘텐츠에 이전, 다음, 정지 기능이 제공되지 않더라도 마우스 오버나 키보드 접근 시에 모든 콘텐츠가 보이고 탐색 가능하면 준수임
초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
- 사용 제한 이유
- 광과민성 발작의 원인이 됨
- 눈에 피로를 느낄 수 있음, 가능하면 제공하지 않는 것이 좋음
- 해결 방안
- 번쩍이는 콘텐츠가 차지하는 면적의 합이 화면 면적의 10% 미만으로
- 시간을 3초 미만으로 제한
- 사전에 경고하고 중단 가능한 수단을 제공
- 분석도구: PEAT
콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다. 페이지가 로드되거나 갱신될 때 마다, 웹 페이지에서 공통적으로 제공되는 레이아웃을 건너 뛸 수 있도록 지원하는 것
- 반복 영역 건너뛰기 제공 방법
- 건너뛰기 메뉴를 마크업 최 상단에 위치 (탭 키를 눌렀을 때 가장 처음에 접근 되도록)
- 건너뛰기 링크가 페이지 내에 존재
- 키보드 접근 시 화면에 노출
- "하단 메뉴로 바로 가기"와 같은 위치 정보 제공은 부적절함
<body>
<div id="skip_nav">
<a href="#content">본문 바로 가기</a>
<a href="#menu">주 메뉴 바로 가기</a>
…
<div id="content">
…
<div id="menu">
…
</body>페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
- 페이지 제목 제공
- 웹 페이지의 title(제목)은 유일하고 서로 다르게 제공되어야 한다.
- 아이프레임 제목 제공
- 프레임을 설명하는 간단 명료한 제목을 제공한다.
<iframe src="https://nv.veta.naver.com/fxshow?su=SU10079&nrefreshx=0" title="광고"></iframe>- 내용이 없는 빈 프레임의 경우에는 "빈 프레임" 또는 "내용 없음"으로 제공
- 콘텐츠 제목의 일관성
- 동일한 depth(깊이)에 있는 콘텐츠는 같은 레벨의 헤딩 태그로 일관성 있게 제목을 제공
- 특수 기호 사용 제한, 1개까지만 사용을 제한할 것
링크 텍스트는 용도나 목적을 이애할 수 있도록 제공해야 한다.
- 빈 링크는 제거
- 독립적 이미지 링크
<a href="#">
<img src="btn_next.png" alt="다음 콘텐츠 보기">
</a>- 독립적 배경 이미지 링크
<a href="#" class="link_next">다음 콘텐츠 보기</a>- 썸내일 링크
<a href="…">
<img src="thumb01.jpg" alt="">
<span>웨딩 사진을 모티브로 만든 도일리 #프랑스자수</span>
</a>- 명확한 링크 제공
<p>
더 자세한 사항을 보려면
<a href="#">여기</a>를 클릭하세요.
</p>위에서 여기는 오류로 진단. 링크의 용도나 목적을 알 수 있도록 적절한 링크 텍스트를 제공해야 함. 아래 처럼 텍스트 숨김 처리를 통해서 제공해주는 것이 좋음.
<a href="…">
<span class="hide">공지사항</span>더 보기
</a>주로 사용하는 언어를 명시해야 한다.
- 기본 언어 표시
- html 태그에 lang 속성을 사용하여 ISO 639-1에서 지정한 두 글자로 된 언어 코드로 제공
- 문서 타입별 기본 언어 표시
- HTML 4.01/HTML5 표준
<html lang="ko">
- XHTML 1.0 표준
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
- XHTML 1.1 표준
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
사용자가 의도하지 않는 기능(새 창, 초점에 의한 맥락 변환 등)은 실행되지 않아야 한다.
- 페이지 진입 시 뜨는 새 창(팝업)
- 화면을 가리는 레이어 팝업
- 반복 영역 건너뛰기보다 먼저 팝업을 제어할 수 있도록 구현하거나, 화면을 가리지 않고 가장 상단에 레이어 팝업을 제공해야 한다.
- 사전에 인식할 수 없는 새창
- window.open을 사용해서 새 창을 띄우는 경우, 새 창이 뜬다는 것을 감지할 수 없음으로 추가적인 방법이 필요함
- 아래의 3개의 예제 중에 blind 클레스를 활용한 예가 가장 베스트 케이스이다.
<a href="…">이용약관<span class="blind">새 창</span></a>
<a href="…" title="새 창">이용약관</a>
<a href="…" target="_blank">이용약관</a>- 컨트롤 선택 시 기능 실행
- 콤보 상자, 라디오 버튼, 체크 상자 등의 컨트롤을 선택했을 때 기능이 실행되거나 서식 제출이 일어나지 않아야 한다.
- 별도의 닫기 버튼을 제공하여 체크 후 닫기 버튼 클릭이 현재 팝업이 닫히는 기능으로 이어지도록 구현해야 한다.
- select 테그에서 onchange 이벤트 적용
- option을 선택하자마자 페이지가 이동되는 경우는 오류
- 사용자가 의도하지 않는 기능이 실행되지 않도록 구현
콘텐츠는 논리적인 순서로 제공해야 한다.
- 메뉴와 내용을 따로 마크업하는 경우 스크린리더 사용하자는 메뉴를 다 읽어주고 나서야 내용을 확인할 수 있기 때문에 어떤 메뉴에 대한 내용인지 인식할 수 없다.
- 탭1 제목 > 탭1 내용 > 탭2 제목 > 탭2 내용
<a href="…">상품</a> <div>상품 내용</div> <a href="…">쇼핑몰</a> <div>쇼핑몰 내용</div>
- 해당 탭 콘텐츠에 제목 제목
<ul class="category"> <li><a href="…">상품</a></li> … </ul> <div class="flick-container"> <h2 class="blind">상품</h2> 상품 내용 </div>
- 제목 > 내용 > 더 보기 콘텐츠 구조
<div class="noti_section">
<h3><span class="blind">공지사항</span></h3>
<ul class="lst_noti">
<li>
<a href="…">[복구완료] 10/19 (금), '뮤직'...</a>
</li>
<li>
<a href="…">[복구완료] 10/17 (수), '지도'...</a>
</li>
</ul>
<a href="…"><span class="blind">공지사항</span>더보기</a>
</div>표는 이해하기 쉽게 구성해야 한다.
-
제목 셀은 th, 내용 셀은 td로 마크업
-
제목 셀이 존재하는 경우 scope 속성으로 행인지, 열인지 구분
-
XHTML, HTML4
- caption으로 제목을 제공, table의 summary 속성으로 요약 정보를 제공
<table summary="부서별 직원 수, 합계 정보"> <caption>직원 관리 현황 표</caption> <thead> <tr> <th scope="col">번호</th> <th scope="col">부서</th> <th scope="col">직원 수</th> </tr> </thead> <tfoot> <tr> <th scope="row">합계</th> <td></td> <td>15명</td> </tr> </tfoot> <tbody> <tr> <td>1</td> <td>총무부</td> <td>5명</td> </tr> ...
-
HTML5
- caption에 제목과 요약 정보를 모두 제공
<table> <caption> <strong>직원 관리 현황 표</strong> <span>부서별 직원 수, 합계 정보</span> </caption> <thead> <tr> <th scope="col">번호</th> <th scope="col">부서</th> <th scope"col">직원 수</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>총무부</td> <td>5명</td> </tr> ...
-
복잡한 표
- id와 headers 속성을 이용해서 마크업
<thead> <tr> <th rowspan="2" scope="col" id="date">기준일</th> <th colspan="2" scope="col" id="gsale">경기도 매매가</th> </tr> <tr> <th scope="col" id="price">면적단가</th> <th scope="col" id="change">변동액</th> </tr> </thead> <tbody> <tr> <th scope="row" id="d20181020">2018.10.20</th> <td headers="date d20181020 gsale price">902</td> <td headers="date d20181020 gsale change">유지 0</td> </tr> ...
- 테이블의 902라는 값이 적힌 셀을 읽을 때, 스크린리더에서 속성과 아이디값을 참조함
- 기준일 2018년 10월 20일 경기도 매매가 면적단가 902
- date > d20181020 > gsale > price
-
레이아웃 테이블
- 레이아웃 테이블은 구조적으로 마크업 하는 것이 좋다. 테이블로 마크업하는 경우, 데이터 테이블로 착각하여 혼란을 줄 수 있기 때문
사용자 입력에는 대응하는 레이블을 제공해야 한다.
- 레이블이란?
- 사용자 입력의 용도 또는 역활에 대한 설명을 뜻함.
- 레이블이 시각적으로 노출되어 있는 경우
- 레이블과 입력 서식이 1:1 매칭인 경우
<label for="user_id">아이디</label> <input type="text" id="user_id" /> <label for="user_pw">비밀번호</label> <input type="text" id="user_pw" />
- 레이블과 선택 서식이 1:1 매칭인 경우
<label for="user_gender">성별</label> <select id="user_gender"> <option value selected>성별</option> <option value="0">남자</option> <option value="1">여자</option> </select>
- 레이블과 라디오 버튼, 체크 박스가 1:1 매칭인 경우
<input type="radio" id="gender_male" /> <label for="gender_male">남자</label> <input type="radio" id="gender_female" /> <label for="gender_female">여자</label> <input type="checkbox" id="agree" /> <label for="agree">이용약관에 동의합니다.</label>
- 레이블과 입력 서식이 1:다 매칭인 경우 => 각 입력 서식에 대해 title을 제공
<input type="text" title="생년월일 중 년 4자리 입력" /> <input type="text" title="생년월일 중 월 입력" /> <input type="text" title="생년월일 중 일 입력" />
- 레이블이 시각적으로 노출되지 않은 경우 -> 각 입려 서식에 대해 title을 제공
<input type="text" title="아이디" />
<input type="text" title="비밀번호" />- 레이블과 타이틀의 중복 제공을 피하고, 1:1 매칭인 경우에는 우선적으로 레이블을 제공하고 이외의 경우에는 타이틀로 설명을 제공한다.
입력 오류를 정정할 수 있는 방법을 제공해야 한다.
- 작성된 내용이 삭제되지 않고 오류가 있는 부분만을 수정할 수 있도록 한다.
- 오류가 발생한 원인을 알려준다.
- 오류 발생 시점으로 초점을 이동 시킨다.
마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
- 준수 사항
- 요소의 열고 닫음 확인
- 요소의 중첩 확인
- 중복된 속성 사용 확인
- id 값 중복 확인
콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.
- 여기서 말하는 웹 애플리케이션이란 웹 콘텐츠에 포함되어 특정한 기능을 수행하도록 구성된 소프트웨어의 일종으로 예를 들어 플래시 같은 것을 말한다.
- 접근성이 어려운 플래시의 경우 HTML 버전을 선택할 수 있는 대체 수단이나 대체 텍스트를 제공해야 한다.
- Colour Contrast Analyser (CCA)
- 전경 색과 배경색의 명도 대비를 확인
- 명도 대비는 최소 3:1 이상이 되도록 구현
- KWCAG a11y inspector: 크롬 확장 프로그램
- 컨트롤의 대각선 길이를 측정해주는 프로그램
- 컨트롤 대각선 크기를 6mm 이상으로 구현
- OpenWAX: 크롬 확장 프로그램
- 접근성 진단 프로그램
- 자동 진단이 정확하지는 않아 수동 진단 병행 필요
- W3C Validation
- 웹 표준 검사: 접근성 오류, 마크업 오류
- 스크린을 읽어주는 사용자 도구
- 기기에 따라 제공되는 스크린리더가 다르며, 읽어주는 방식에 차이가 있음
- OS에 따른 스크린리더의 종류
- 윈도우 (설치형)
- 센스리더 베이직 6.5
- NVDA Version 2018.4
- Android (시스템 제공)
- Talkback
- Voice Assistant
- MAC (시스템 제공)
- VoiceOver
- iOS (시스템 제공)
- VoiceOver
- 윈도우 (설치형)