1. 접근성이란?
사전적 의미로는 사용자가 어떠한 제품이나 서비스 등에 접근해 편리하게 이용할 수 있는 정도를 뜻합니다.
2. 웹 접근성이란?
어떠한 사용자가 어떠한 기술환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것. 간단히 정리하면 '모든 사용자가 모든 기기에서 웹에 접근할 수 있도록 하는 것'입니다.
왜 만들기도 힘든데 웹 접근성을 지켜야 할까요
2-1. 첫 번째 이유 : 법
장애인차별금지법 때문입니다.
장애인차별금지및권리구제등에관한법률
www.law.go.kr
장애인 차별 금지법 처벌 법적 진행 절차 1
- (인권위)민/형사 고발
- 형사:3개월 이내 수사, 민사:손해배상제도 절차
- 악의로 인정될 경우 3년 이하 징역 또는 3천 만원 이하 벌금
장애인 차별 금지법 처벌 법적 진행 절차 2
- (인권위) 진정 접수
- (인권위) 협의, 조정, 구제조치 등 시정권고
- (법무부) 불이행 확인일로부터 3개월 내 시정명령
- 정당한 사유없이 명령 불이행 시 3천만원 이하 과태료
2-2. 두 번째 이유 : 장애환경
장애란?
- 어떤 사물의 진행을 가로막아 거치적거리게 하거나 충분한 기능을 하지 못하게 함. 또는 그런 일
- 두 번째 신체 기관이 본래의 제 기능을 하지 못하거나 정신 능력에 결함이 있는 상태.
즉, 신체적 또는 정신적 결함이 있는 것 뿐만 아니라 정보를 얻지 못하도록 방해하는 것도 장애가 된다는 말입니다.
이런 장애 환경에는 여러 장애들과 노안, 운전 중일 때 소음이 심할 때 스피커가 없어서 소리를 듣지 못할 때 소프트웨어가 지원되지 않거나 네트워크가 접속되지 않는 경우들도 있습니다.
장애 환경
1. 전맹 시각 장애
시력이 전혀, 거의 없어 앞을 볼 수 없습니다.
이분들은 더욱 발달된 다른 감각(청각/촉각)으로 웹을 이용합니다.
청각적으로는 스크린리더가 웹에 존재하는 이미지, 글씨를 음성으로 읽어주어 이를 통해 정보를 파악할 수 있으며,
촉각적으로는 점자 정보 단말기를 통해 점자를 손으로 읽으면서 웹 페이지의 내용을 인식합니다.
* 스크린 리더 : 스크린을 읽어주는 프로그램, 프로그램 실행 후 웹에 접근하면 웹 페이지를 읽어줌.
2. 저시력 시각 장애
안경이나 렌즈, 치료, 수술로 해결할 수 없는 시력으로써 일상적인 생활이 어렵습니다.
이분들은 좀더 크고 선명하게 볼 수 있는 기능을 이용합니다.
시력 저하인 분들은 화면이 뿌옇게 보여서 내용을 잘 인식할 수가 없습니다.
시야 장애를 가진 분들은 페이지의 일부만 볼 수 있습니다. 이런 분들은 화면 확대 기능을 이용합니다.
색약, 색맹은 색상을 분별하는데 어려움이 있는 분들입니다. 색이 다른 색으로 보이거나 전색맹인 경우는 아예 웹 페이지가 흑백으로 보입니다. 이런 분들은 더 선명하게 웹 페이지를 볼 수 있도록 고대비를 사용합니다.
3. 중증 운동 장애
손 또는 팔을 사용하지 못하고 목만 움직일 수 있는 장애 환경입니다.
보조기기를 이용하여 키보드를 조작할 수 있습니다.
보조기기로는 헤드 포인터, 빅키 키보드, 키가드가 있습니다.
손을 대신하여 타이핑 가능한 포인터 스틱을 머리에 고정하여 키보드를 조작하고 자판이 큼직한 빅키 키보드와 타이핑 스틱이 엇나가지 않도록 보조해주는 키가드로 보다 정확하게 타이핑할 수 있습니다.
4. 손 운동 장애
한 손만 사용 가능하거나 손 떨림 현상으로 인하여, 마우스나 키보드의 정교한 조작이 어려운 장애 환경입니다.
이분들은 보조기기를 이용하여 마우스와 키보드를 쉽게 조작할 수 있습니다.
보조기기로는 한 손 사용자용 키보드와 트랙볼 마우스가 있습니다.
한 손자용 키보드는 한 손으로만 사용하기 때문에 일반 키보드와 비교했을 때 위치와 모양이 다르고 트랙볼 마우스는 큰 볼을 굴려서 마우스 포인터를 쉽게 이동할 수 있으며, 별도로 제공되는 버튼을 한 번만 클릭해 정교한 조작을 쉽게 할 수 있습니다.
5. 청각 장애
들을 수 없기 때문에 알림음, 영상 같은 정보를 제공받을 수 없습니다.
이분들은 안내 문구나 자막 같은 화면의 글씨를 읽습니다.
6. 맥 사용자
여태까지 살펴 본 장애유형 이외에 맥 환경인데 웹을 윈도우에서만 사용이 가능한 경우도 웹에 접근이 불가능하기 때문에 장애가 됩니다.
7. 느린 인터넷
인터넷이 느린 경우 로딩이 잘 안되어 UI가 깨지는 등의 경우는 오히려 비장애인들이 웹 페이지를 인식하는데 불편함을 줄 수 있습니다.
이런 이유로 법적요소를 준수해야 합법적인 웹사이트를 개발할 수 있기 때문에 접근성을 지켜야 합니다.
3. 웹 접근성 지침 소개
법에 조항들이 있듯이 접근성에도 지침이 있습니다. 해외 웹 접근성 지침과 국내 웹 접근성 지침에 대해 살펴보도록 하겠습니다.
3-1. WCAG(Web Content Accessibility guidelines)
W3C에서 발표한 웹 콘텐츠 접근성 지침입니다.
3-2. KWCAG(Korean Web Content Accessibility guidelines)
해외 웹 표준 기술 동향을 토대로 국내 설정에 맞게 반영된 한국형 웹 콘텐츠 접근성 지침.
원칙 4개, 지침 13개, 항목 24개로 구성.
한국도 2009년 5월 '국가 정보화 기본법'을 개정해 '장애인 · 고령자 등의 정보 접근 및 이용 보장'을 명시했으며, 2015년까지 한국 내 모든 인터넷 사이트가 웹 접근성을 보장하게 규정했습니다.
3-3. 적절한 대체 텍스트 제공
장애 유형에서 언급했듯이 시각적으로 정보를 습득하는데 어려움을 겪는 사용자들은
스크린리더와 같은 보조 기술을 사용하여 해당 콘텐츠를 음성으로 듣습니다.
스크린리더는 페이지 내 텍스트들을 읽어주지만 이미지는 무슨 이미지인지 대체 텍스트가 존재해야 읽어줍니다.
따라서 웹 페이지에서 텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 합니다.
특정 사례들에 따른 대체 텍스트 적용 방법을 알아보도록 하겠습니다.
텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야합니다. 대체 텍스트가 없다면 img태그의 사진에 대해 스크린이 알아서 읽어주지 않기 때문에 시각 장애인의 경우 이미지에 대한 정보를 얻을 수 없을 것 입니다. 따라서 alt로 대체 텍스트를 제공해야합니다.
alt로 대체 텍스트 제공
텍스트가 있는 이미지를 이미지 요소로 마크업할 때 대체 텍스트는 이미지 요소의 alternative속성인 'alt'에 적용해주시면 됩니다.
<img src="160314.png" alt="주식수수료 평생무료 비대면계좌개설 신규/온라인/유관기관 제비용 제외 2018년 12월 31일까지 선물/옵션 1년 무료, 신용이자 연 3.5% 60일 우대">앞서 설명했듯이 비장애인들은 이미지를 보면 시각적으로 내용 인식이 가능하지만 시각적으로 인식이 불가능한 사용자들은 청각적으로 내용을 인식할 수 있도록 보는 것과 듣는 것이 동등하게 대체 텍스트를 제공해야 합니다.
스크린 리더로 들으면 alt 값을 읽어줍니다.
img 요소뿐만 아니라 추가적으로 input의 type이 image이거나 button인 경우, 또는 이미지맵의 area에도 대체 텍스트가 존재한다면 alt로 제공해 주시면 됩니다.
마크업으로 대체 텍스트 제공
대체 텍스트가 너무 긴 경우에는 이미지에는 대체 텍스트를 빈 값으로 제공하고 대체 텍스트를 마크업으로 제공하는 방법도 있습니다.
<img src="160314.png" alt="">
<p class="blind">
주식수수료 평생무료 비대면계좌개설 신규/온라인/유관기관 제비용 제외
2018년 12월 31일까지 선물/옵션 1년 무료, 신용이자 연 3.5% 60일 우대
</p>예를 들어 이미지 내부 콘텐츠가 리스트로 되어 있어서 ul, li로 마크업하면 스크린리더에서 목록이라고 알아서 읽어주며 기본적으로 스크린리더는 해당 요소에 따라 내용을 읽어주기 때문에 구조적 마크업이 가능한 콘텐츠는 마크업으로 대체 텍스트를 제공해주는 것이 좋습니다.
여기서 주의할 점은 해당 마크업을 보이지 않게 처리할 때 "display:none"이나 "visibility:hidden"을 사용하면 스크린리더에서 읽어주지 않기 때문에 다른 방법으로 보이지 않게 처리해야 합니다.
데이터 차트나 복잡한 콘텐츠
데이터 차트나 복잡한 콘텐츠도 사용자가 해당 콘텐츠의 의미를 충분히 파악할 수 있도록 대체 텍스트를 제공해야 합니다. 현재는 콘텐츠가 데이터 차트 이미지이기 때문에 테이블 마크업으로 다음과 같이 대체 텍스트를 재공해주고 있습니다.
<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>
의미 있는 이미지
의미 있는 이미지의 경우에도 대체 텍스트를 시각적으로 보는 것과 동등하게 제공해야 합니다.
<img src="btn_next.png" alt="다음 콘텐츠 보기">
배경 이미지
의미 있는 이미지가 이미지 요소가 아닌 배경으로 처리된 경우에도 다음와 같이 대체 텍스트를 제공해야 합니다.
<a href="#" class="link_next">다음 콘텐츠 보기</a> .link_next{
background-image:url('./img/icon_next.png');
}
의미 없는 이미지
의미 없는 이미지는 alt를 제공하지 않아도 될까요?
우선 기본적으로 이미지 요소에는 alt속성을 필수로 제공해야 합니다. alt속성을 아예 제공하지 않으면 스크린리더는 src에 있는 파일명을 읽어줍니다.
또한 alt 속성을 제공하지만 alt 값에 띄어쓰기가 하나라도 적용되어 있는 경우도 마찬가지로 파일명을 읽어줍니다.
따라서 단순히 장식이나 시각적인 형태를 위해 사용되는 콘텐츠의 경우는 대체 텍스트로 공백 문자, 즉 다음와 같이 파일명을 읽는 일이 없이 아무것도 읽어주지 않도록 alt를 빈 값으로 제공해야 합니다.
<img src="123456.jpg" alt="">
이모티콘 이미지
이모티콘의 의미가 다 다른 만큼 ‘미안해하는 브라운’처럼 시각적으로 인식하는 것과 동일하게 대체 텍스트를 제공해야 합니다.
<img src="brown_img_5.png" alt="미안해하는 브라운">
QR코드 이미지
QR코드의 경우 비장애인들은 이미지를 찍어서 링크를 연결할 수 있지만 시각적으로 인식할 수 없는 사용자들은 해당 링크 주소를 알 수 있도록 대체 텍스트를 제공해야 합니다.
<a href="http://www.naver.com">
<img src="qr_code.png" alt="http://www.naver.com 바로 가기 QR코드">
</a>
썸네일 이미지
썸네일 이미지와 텍스트를 각각 링크로 구현하는 경우 이미지의 대체 텍스트와 링크 텍스트가 중복이 되기 때문에 스크린리더에서 동일한 내용을 2번 읽어줍니다.
따라서 다음과 같이 이미지와 텍스트를 하나의 링크로 묶어주고 대체 텍스트가 이미 존재하기 때문에 이미지에는 alt를 빈 값으로 제공해 주는 것이 좋습니다.
<a href="…">
<img src="thumb01.jpg" alt="">
<span>웨딩 사진을 모티브로 만든 도일리 #프랑스자수</span>
</a>
캡차 이미지
캡차란 사용자가 실제 사람인지 컴퓨터 프로그램인지를 구별하기 위해 사용되는 방법입니다.
캡차 이미지에 대체 텍스트로 이미지에 있는 텍스트를 제공하면 스크린리더를 사용하는 분들에게는 정답을 알려주는 것이 되므로 캡차 이미지에는 대체 텍스트로 '캡차' 또는 '보안 문자'라고 제공하고 따로 음성으로 들을 수 있도록 청각적 캡차를 제공해야 합니다.
<img src="text.jpg" alt="보안 문자">사용자가 업로드하는 이미지
사용자가 업로드하는 이미지의 경우 사용자가 직접 대체 텍스트를 작성할 수 있도록 안내와 함께 툴을 제공해야 합니다. 사용자가 입력한 내용이 대체 텍스트로 제공되도록 구현하면 됩니다.
3-4. 자막 제공
멀티미디어 대체 수단 제공
예를 들어 동영상을 볼 때 청각적으로 내용을 인식할 수 없는 사용자는 동영상에서 나오는 음성을 들을 수 없습니다.
따라서 시각적으로도 인식할 수 있도록 멀티미디어 콘텐츠에 포함된 음성 및 대사와 동등하게 대체 수단을 제공해야 합니다.
대체 수단은 자막, 대본, 원고, 수화 중 하나로 제공해주시면 됩니다.
사용자가 업로드하는 멀티미디어
제3자가 영상을 업로드하는 경우 사용자가 대체 콘텐츠를 제공할 수 있도록 툴을 제공해야 합니다.
음성이 나오지 않는 영상
멀티미디어 콘텐츠가 음성 정보 없이 텍스트만 제공되는 경우는 시각적으로만 인식이 가능하므로 따로 원고를 제공하는 등의 방법을 통해 대체 콘텐츠를 제공해야 합니다.
3-5. 색에 무관한 콘텐츠 인식
콘텐츠는 색에 관계없이 인식될 수 있어야 합니다.
즉, 색을 구분하지 못하더라도 콘텐츠를 인식하는데 문제가 없어야 한다는 말입니다.
색으로만 구분한 사례
- 차트
- 슬라이드 버튼 선택 여부
- 페이지내이션
- 탭 버튼 선택 여부
색으로만 구분한 경우 색을 구분하기 힘든 사용자는 인식하기 어렵기 때문에 패턴, 굵기, 모양, 테두리 등의 다양한 방법으로 구분해야 합니다.
3-6. 명확한 지시 사항 제공
지시 사항은 모양, 크기, 위치, 방향, 색, 소리 등 관계없이 인식될 수 있어야 합니다.
즉, 지시 사항을 특정 단일 감각에만 의존하면 안됩니다.
여러 감각으로 지시 사항을 인식하는데 문제가 없는 콘텐츠를 제공해야 합니다.
모양으로만 정보 제공
회원가입 시 필수 입력 항목들 앞에 별표 문자 모양으로만 정보를 제공하고 있는 경우 오류입니다.
따로 "*표시는 필수 입력 사항입니다."라는 설명을 제공해하거나,
'*'가 이미지인 경우 대체 텍스트를 "필수"나 "필수 입력사항"이라고 제공하거나,
'*'영역에 "필수"라는 정보를 숨김 텍스트로 제공하면 됩니다.
위치나 방향으로만 정보 제공
왼쪽의 숫자를 입력하라고 방향으로만 정보를 지시하는 경우 오류이며 시각적으로 인식이 어려운 사용자의 경우 왼쪽이 어딘지 알기 힘듭니다.
크기로만 정보 제공
"작은 버튼을 클릭하세요."라고 크기로만 정보 제공하는 경우 오류입니다.
대상이 되는 버튼이 '작은 버튼'이라는 대체 텍스트를 포함하고 있지 않을 경우 시각적으로 인식이 어려운 사용자는 어떤 요소를 지칭하는지 알 수 없기 때문입니다.
색으로만 정보 제공
"보라색 지역은 관할 지역입니다."라고 색으로만 정보를 제공하고 있어 오류 사례입니다. "서울, 경기, 인천지역은 관할 지역입니다." 라고 명확하게 정보를 제공해야 합니다.
* 이외에 음성, 음향으로만 정보를 제공하는 경우도 마찬가지로 오류이니 주의해야 합니다.
3-7. 텍스트 콘텐츠의 명도 대비
페이지 글씨가 작아도 알아보기 힘들지만 명도 대비가 낮아도 가독성이 떨어져서 내용을 인식하기 어렵습니다.
노안, 저시력, 색약, 색맹 등의 사용자들도 불편함이 없도록 콘텐츠를 제공해야 하며
비장애인들도 명도 대비가 높다면 콘텐츠를 더 잘 인식할 수 있습니다.
따라서 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5:1 이상이어야 합니다.
텍스트 명도 대비
페이지에 존재하는 모든 텍스트에 대해 명도 대비를 준수해야 하는 것은 물론이고, 텍스트가 이미지로 된 경우에도 명도 대비를 준수해야 합니다.
텍스트와 배경색 간의 명도 대비는 4.5:1 이상이 되도록 구현해야 합니다.
의미 있는 이미지 명도 대비
텍스트뿐만 아니라 의미 있는 이미지의 경우에도 이미지를 인식할 수 있도록 명도 대비를 준수해야 합니다.
확대 가능한 브라우저에서 명도 대비
명도 대비가 4.5:1 이상 이어야 한다고 말씀드렸는데요, 확대가 가능한 브라우저에서는 최소 3:1 이상이면 준수입니다.
그래도 명도 대비가 높을수록 가독성이 높기 때문에 4.5:1 이상이 되도록 구현해주시기 바랍니다.
웹 페이지를 본다고 가정했을 때 의미 있는 좌우 버튼, 텍스트, 이미지에 있는 텍스트 등의 명도 대비가 모두 준수되어야 합니다.
다만, 로고, 장식 목적의 콘텐츠, 마우스나 키보드를 활용하여 초점을 받았을 때 명도 대비가 커지는 콘텐츠 등은 예외로 합니다.
3-8. 자동 재생 금지
웹 페이지에서는 소리가 자동으로 재생되지 않아야 합니다.
여기서 소리는 동영상, 오디오, 음성, 배경 음악 등 콘텐츠가 제공하는 모든 소리를 말합니다.
이런 소리가 자동 재생됨으로 인해 스크린리더 사용자가 콘텐츠를 인식하고 사용하는데 방해받지 않아야 합니다.
페이지 진입 시 자동 재생되는 3초 이상의 배경음 콘텐츠(동영상 포함)
아무것도 모르는 상태로 페이지 진입 시 자동으로 음악이 나오거나 동영상이 재생되는 경우 스크린리더 음성과 겹치게 되면서 페이지의 내용을 인식하기 어렵습니다.
따라서 콘텐츠에 포함된 멀티미디어 파일은 정지 상태로 제공되어야 하고 사용자가 요구할 경우에만 재생 가능하도록 제공해야 합니다.
불가피하게 제공할 경우 해결 방안
- 3초 내에 정지
- ESC 키 선택 시 정지
- 소스 상 가장 먼저 제공하여 정지 기능 실행 가능하도록 구현
3-9. 콘텐츠 간의 구분
웹 페이지에는 다양한 콘텐츠들이 존재하는데요,
이런 콘텐츠를 통해 정보를 인식할 때 이웃한 콘텐츠는 구별될 수 있어야 합니다.
즉, 웹 페이지를 구성하는 모든 이웃한 콘텐츠는 시각적으로 구분되도록 제공해야 합니다.
이웃한 콘텐츠 구분 방법
- 테두리 이용하여 구분
- 콘텐츠 사이에 시각적인 구분선을 삽입하여 구분
- 서로 다른 무늬를 이용하여 구분
- 콘텐츠 배경색 간의 명도대비(채도)를 달리하여 구분
- 줄 간격 및 글자 간격을 조절하여 구분
- 기타 콘텐츠를 시각적으로 구분할 수 있는 방법을 통해 구분
3-10. 키보드 사용 보장
비장애인들은 마우스를 사용하여 쉽게 웹 페이지를 탐색하지만
마우스를 사용하지 못하는 키보드 사용자는 키보드로 웹 페이지를 탐색합니다.
따라서 웹 페이지에서 제공하는 모든 기능을 키보드만으로도 사용할 수 있도록 제공해야 합니다.
사례에 따른 해결 방안
- 마우스 오버 시 드롭 다운 메뉴가 노출
>> 키보드 접근 시에도 드롭 다운 메뉴가 노출되고 메뉴에 접근 가능하도록 구현
- 자동 롤링 콘텐츠에 마우스 오버 시 전체 콘텐츠가 노출
>> 키보드 접근 시에도 전체 콘텐츠가 노출되도록 구현
- 특정 버튼에 마우스 오버 시 레이어 노출
>> 키보드 접근 시에도 레이어가 노출되도록 구현
- 이미지 또는 초점을 받을 수 없는 요소에 마우스 이벤트 적용
>> 마우스로 조작 가능한 컨트롤의 경우 되도록 a링크나 버튼과 같이 초점을 받을 수 있는 요소로 구현
- a링크 요소에 href속성이 없는 경우
>> 마우스로는 조작이 가능하지만 키보드 접근은 불가능. 따라서 a링크에는 href 속성을 반드시 제공
- a링크에 href속성은 있지만 onfocus="this.blur();"가 적용이 되어 있는 경우
>> 초점을 초기화 시켜 이후 콘텐츠로 키보드 접근이 불가능하므로 onfocus="this.blur();" 제거하고 구현
- 키보드가 함정에 빠져 더 이상 키보드 접근이 되지 않는 경우
>> 키보드가 함정에 빠지지 않고 마우스 사용시와 동일하게 접근 가능하도록 구현
즉, 마우스로 조작 가능한 기능과 키보드로 조작 가능한 기능이 동일하도록 구현해야 합니다.
3-11. 초점 이동
키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 합니다.
논리적 초점 이동
초점은 일반적으로 좌에서 우, 상에서 하로 이동할 것이라고 예측합니다.
스크린리더 사용자와 키보드 사용자 모두 초점이 논리적으로 이동해야 웹 페이지를 탐색하는데 어려움이 없습니다.
따라서 초점 이동은 논리적 구조로 마크업하여 사용자가 예측하는 이동 순서와 일치해야 합니다.
예를 들어, 초점 이동이 아이디 입력, 비밀번호 입력, 로그인 버튼, 아이디 저장 순서이면 로그인 버튼을 먼저 클릭하기 때문에 아이디 저장을 못할 가능성이 있습니다.
따라서 아이디, 비밀번호 입력 후 아이디 저장에 먼저 초점이 이동했다가 로그인 버튼으로 논리적으로 초점이 이동해야 합니다.
tabindex
추가적으로 tabindex 속성을 이용하여 초점 이동을 강제로 변경하는 경우도 오류인데요, 기본적으로 마크업이 논리적으로 이루어져 있다면 굳이 tabindex를 사용할 이유는 없습니다.
* Tabindex에 대한 자세한 내용은 페이지에 있는 링크 참고
레이어 팝업
초점 이동 순서 : 레이어 팝업 노출시키는 컨트롤 > 레이어 팝업 내부 > 레이어 팝업 닫기 > 레이어 팝업 노출시키는 컨트롤
오류 사례에서는 보통 초점이 레이어 내부로 가지 않고 노출만 시킨 상태로 다음 컨트롤로 이동하기 때문에 초점이 레이어 뒤로 가서 가려지는 경우가 있습니다.
초점이 보이지 않으면 키보드 사용자는 페이지를 잘 이용할 수 없으므로 논리적으로 초점을 이동시켜야 합니다.
초점 표시
마우스가 아닌 키보드로 웹을 사용하는 분들은 초점이 어디에 위치하는지 알 수 있어야 합니다.
시각적으로 초점이 보이지 않으면 어디에 초점이 있는지 알 수가 없어서 컨트롤을 선택할 수 없습니다.
따라서 키보드 접근 시 해당 컨트롤이 초점을 받았음을 시각적으로 구별할 수 있어야 합니다.
"hideFocus"적용하거나 CSS에서 "outline:none"처리를 하거나 8번 키보드 사용 보장에서 언급했던 onfocus="this.blur();"를 사용하면 전부 초점이 보이지 않게 되어 주의하셔야 합니다.
3-12. 조작 가능
웹 페이지에서 컨트롤을 마우스로 조작할 때 컨트롤이 너무 작으면 클릭하기 어렵습니다.
사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 합니다.
컨트롤 대각선 길이 6mm 이상
컨트롤이 너무 작아서 클릭하기 불편하셨던 적 없으신가요?
비장애인들도 컨트롤이 작으면 조작이 힘든데요, 정교한 마우스 조작을 할 수 없는 분들은 더 힘듭니다.
따라서 웹에서 컨트롤의 대각선 길이는 6mm 이상으로 구현되어야 합니다.
컨트롤 테두리 안쪽으로 1픽셀 이상의 여백
컨트롤이 연달아 있을 때 1픽셀 이상의 여백이 있지 않으면 컨트롤 구분도 힘들고 잘못 선택할 확률도 높습니다.
따라서 컨트롤은 테두리 안쪽으로 1픽셀 이상의 여백을 두어야 합니다.
3-13. 응답 시간 조절
콘텐츠를 탐색하는데 시간이 오래 걸리는 사용자들은 시간제한이 있는 콘텐츠를 인식하기 어렵습니다.
따라서 시간제한이 있는 콘텐츠는 응답 시간을 조절할 수 있어야 합니다.
시간제한이 있더라도 온라인 경매, 실시간 게임 등과 같이 반응 시간의 조절이 원천적으로 허용되지 않는 경우에는 이 검사 항목이 적용되지 않습니다.
다만, 이 경우에도 사용자에게 시간제한이 있다는 것을 미리 알려주고, 종료되었을 경우에도 알려주어야 합니다. 세션 시간이 20시간 이상인 콘텐츠는 예외로 간주합니다.
시간 연장이 불가능한 콘텐츠
- 충분한 시간 제공
- 종료 안내
- 조절 수단 제공
웹 콘텐츠 제작 시 시간제한이 있는 콘텐츠는 가급적 포함하지 않는 것이 바람직하며,
보안 등의 사유로 시간제한이 반드시 필요할 경우에는 이를 회피할 수 있는 수단을 제공해야 합니다.
특히 은행 사이트에서 보안을 위해 로그인 시간에 제한이 있는 경우를 많이 볼 수 있는데요,
아무런 공지 없이 자동으로 로그아웃 되는 경우도 오류이지만 종료 시간을 공지하고 있어도 수단을 제공하지 않으면 오류입니다.
반응 시간이 완료되기 전에 이를 조절할 수 있는 수단을 제공해야 하며 반응 시간 조절 기능은 최소 20초 이상의 충분한 시간을 두고 사전에 알려 주어야 합니다.
페이지 자동 전환
- 연장 가능 수단 제공
- 해제 가능 수단 제공
페이지 진입 시 바로 리프래시되는 것이 아니라 Meta 요소의 refresh 속성 등을 사용하여 일정 시간이 지난 뒤 페이지가 자동 전환되는 경우도 마찬가지로 오류입니다.
따라서 이전 예시처럼 연장할 수 있는 수단을 제공하거나 이를 해제할 수 있는 수단을 제공해야 합니다.
스크린리더 사용자와 키보드 사용자도 이를 인지하고 수단까지 가는데 시간이 부족하지 않아야 합니다.
응답 시간 조절에 대한 접근성을 준수한다면 문서를 읽고 이해하는데 더 많은 시간이 필요한 지적 장애 또는 학습 장애가 있는 사용자도 시간제한이 있는 콘텐츠를 시간에 관계없이 이용할 수 있습니다.
3-14. 정지 기능 제공
자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 합니다.
웹 콘텐츠는 스크롤 및 자동 갱신되는 콘텐츠를 장애인 사용자가 이용할 수 있도록 일시 정지할 수 있는 수단을 제공해야 합니다.
자동 변경 슬라이드
이전, 다음, 정지 기능을 제공해야 하며 정지 버튼이 없더라도 마우스 오버 시와 키보드 접근 시에 정지되도록 구현하면 정지 기능을 제공한 것으로 인정됩니다.
자동 변경 콘텐츠
실시간 검색어처럼 자동 변경되는 콘텐츠에 이전, 다음, 정지 기능이 제공되지는 않더라도 마우스 오버 시와 키보드 접근 시 모든 콘텐츠가 보이고 탐색 가능하면 준수입니다.
비장애인들도 이전 콘텐츠를 보고 싶었는데 넘어가 버린 경우 이를 제어할 수 없으면 해당 콘텐츠가 나올 때까지 기다려야 하므로 이전, 다음, 정지 기능을 제공하거나 전체 콘텐츠를 제공해야 합니다.
스크롤 및 자동 갱신되는 콘텐츠는 사용하지 않는 것이 좋으며, 사용 시에는 제어할 수 있는 기능을 제공해야 합니다.
자동으로 변경되는 콘텐츠를 제어 가능하도록 구현하면 이를 이용하기 어려운 지체 장애인, 노인, 뇌 병변 장애인들도 이용할 수 있습니다.
3-15. 깜빡임과 번쩍임 사용 제한
초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 합니다.
깜빡임과 번쩍임 사용 제한에 대해 살펴보도록 하겠습니다.
1997년에 일본에서 포켓몬스터 전뇌 전사 폴리곤 편이 방영되었을 때 이 영상으로 인해 750명 정도의 어린아이들이 구토, 어지럼증 증세를 호소하였으며, 심한 경우에는 경련을 일으키거나, 의식 상실, 호흡 장애 등을 겪었습니다.
원인은 밝은 빛의 화면 점멸이 연속적으로 나오는 장면을 보고 일어난 '광과민성 발작'으로 밝혀졌습니다.
광과민성 발작이란 오랜 시간 불규칙적으로 깜빡거리는 광과에 자극받아 생기는 간질 발작입니다.
이런 이유 때문에 게임이나 애니메이션에서는 시작 전에 방을 밝게 하고 일정거리 이상 떨어져서 즐기라는 문구가 생겨나기도 했습니다.
해결 방안
- 번쩍이는 콘텐츠가 차지하는 면적의 합이 화면 전체 면적의 10% 미만
- 시간을 3초 미만으로 제한
- 사전에 경고하고 중단 가능한 수단을 제공
깜빡거리고 번쩍거리는 영상은 비장애인들도 눈에 피로를 느낄 수 있기 때문에 가능하면 제공하지 않는 것이 좋습니다.
콘텐츠가 초당 3~50회 깜빡이는지를 확인할 수 있는 'PEAT'라는 프로그램이 있는데요, 이를 다운로드하는 방법은 페이지 내 링크를 참고해주시기 바랍니다.
3-16. 반복 영역 건너뛰기
웹 페이지에 공통적으로 들어있는 부분을 반복 영역이라고 하는데요, 스크린리더 사용자는 페이지가 로드 되거나 갱신될 때마다 반복 영역을 다시 듣게 됩니다.
키보드 사용자도 탭을 여러 번 반복해서 접근해야 하는 불편을 방지하기 위해 반복되는 영역을 건너뛸 수 있는 기능을 제공해야 합니다.
반복 영역 건너뛰기 제공 방법
- 마크업상 최 상단에 위치
- 건너뛰기 링크가 페이지 내에 존재
- 키보드 접근 시 화면에 노출
- "하단 메뉴로 바로 가기"와 같은 위치 정보 제공은 부적절
<body>
<div id="skip_nav">
<a href="#content">본문 바로 가기</a>
<a href="#menu">주 메뉴 바로 가기</a>
…
<div id="content">
…
<div id="menu">
…
</body>정리하자면 반복 영역 건너뛰기는 마크업상 최 상단에 위치해야 하고 건너뛰기 링크가 페이지 내에 존재해야 합니다.
즉, 본문 바로 가기를 선택하면 이 content를 id로 가진 영역이 페이지 내에 있어야 한다는 것입니다.
키보드 접근이 가능하고 접근 시 화면에 보이도록 구현해야 하며, 키보드 접근이 불가능하면 8번 키보드 접근 보장에도 영향을 미칩니다.
반복 영역 건너뛰기 링크에 "하단 메뉴로 바로 가기"와 같이 위치 정보를 제공하면 하단이 어디인지 인식하기 힘들기 때문에 부적절합니다. 이는 4번 명확한 지시 사항 제공에도 영향을 미칩니다.
3-17. 제목 제공
페이지 제목 제공
웹 페이지의 제목은 유일하고 서로 다르게 제공해야 합니다.
그렇게 제공하면 여러 페이지가 열려 있는 경우 비장애인들도 제목만 보고 구분하여 빨리 선택할 수 있습니다.
스크린리더 사용자도 제목이 전부 똑같이 제공되어 있거나 내용과 다르게 제공되어 있으면 인식하기 힘들기 때문에 페이지 제목을 적절하게 제공해야 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>로그인</title>
...
페이지 제목은 해당 내용을 이해할 수 있도록 제일 하위분류로 적절하게 제공해야 합니다.
뉴스 상세 페이지 제목도 마찬가지로 해당 뉴스에 대한 타이틀을 제목으로 제공해야 하며 게시판의 경우에도 글 읽기, 글 보기, 목록 등 각각의 게시판 용도에 맞게 페이지 제목을 제공해야 합니다.
각 페이지의 핵심 내용을 제목으로 제공해주시면 됩니다.
프레임 제목 제공
프레임이나 아이프레임에도 각 프레임을 설명하는 간단 명료한 제목을 제공해야 합니다.
광고를 아이프레임으로 제공한 경우 다음과 같이 아이프레임의 title을 "광고"라고 제공하면 됩니다.
<iframe src="https://nv.veta.naver.com/fxshow?su=SU10079&nrefreshx=0" title="광고"></iframe>
내용이 없는 빈 프레임의 경우에도 title을 다음과 같이 "빈 프레임" 또는 "내용 없음" 등으로 제공해야 합니다.
<iframe data-veta-preview="main_frame" title="빈 프레임" width="0" height="0" >
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onload="initAd()" marginwidth="0" marginheight="0">
</body>
</html>
</iframe>웹 페이지를 구성하는 모든 프레임에 제목을 제공하면 시각 장애인, 지적 장애인, 중증 지체 장애인 등의 사용자가 프레임 제목을 통해 프레임 간을 매우 편리하게 이동할 수 있습니다.
콘텐츠 제목 제공
콘텐츠 블록에도 제목을 제공해야 합니다.
<h3 class="an_tit">
<a href="http://newsstand.naver.com" class="an_ta" target="_blank">뉴스스탠드</a>
</h3>뉴스스탠드 콘텐츠는 헤딩 태그로 콘텐츠의 제목을 "뉴스스탠드"라고 제공하는 것이 적절하며,
여기에서 주의할 사항은 뉴스스탠드랑 동일한 depth에 있는 콘텐츠는 하위나 상위 콘텐츠가 아니기 때문에 동일한 헤딩 태그로 일관성 있게 제목을 제공해야 합니다.
이때 제목을 숨김 처리할 경우 1번 항목에서 언급했듯이 "display:none"나 "visibility:hidden"속성은 스크린리더에서 읽어주지 않기 때문에 다른 방법으로 보이지 않게 처리해야 합니다.
특수 기호 사용 제한
연속된 특수기호를 사용하게 되면 스크린리더에서 불필요한 음성을 반복해서 출력하게 되므로 시각적인 장식을 위해 반복되는 특수문자는 제공하지 않아야 하며 특수 기호는 1개까지만 사용 제한을 두고 있습니다.
페이지, 프레임, 콘텐츠 제목 모두 마찬가지입니다.
* 이 글은 부스트코스 웹 UI강의에서 참고한 내용입니다.
