웹접근성 가이드 : 운용의 용이성

0. 운용의 용이성

1) 정의 : 어떤 사용자가 어떤 환경에서도 키보드만으로도 모든 사이트의 모든 콘텐츠를 이용

- 일반 사용자 : 키보드, 마우스 사용

- 시각, 손, 팔에 장애 가진 사용자는 마우스 이용이 어려워 웹 사이트 이용이 불편

2) 검사 항목

- 입력장치 접근성

  : 2.1.1 키보드 사용 보장   2.1.2 초점 이동   2.1.3 조작 가능

- 충분한 시간 제공

  : 2.2.1 응답시간 조절  2.2.2 정지 기능 제공

- 광과민성 발작 예방

  : 2.3.1 깜빡임과 번쩍임 사용 제한

- 쉬운 네비게이션

  : 2.4.1 반복 영역 건너뛰기   2.4.2 제목 제공   2.4.3 적절한 링크 텍스트

1. 키보드 사용 보장

검사항목8. 키보드로만 모든 콘텐츠 이용하도록 함

- 예외 

 : 자유롭게 움직이는 아날로그적인 기능, 시뮬레이션과 같은 콘텐츠, 입체적인 시각화 기능, 마우스를 끌어서 거리를 측정할 수 있는 기능

-> 마우스로 이용 가능한 것은 키보드로 사용할 수 있도록 해야 함

(오류유형)

- 마우스 제어 가능하나 키보드로 제어할 수 없는 경우

ex) 이미지에 onClick 자바코드 이벤트를 적용한 경우

 -> 방법 : A, input, select, textarea, button 등으로 수정되어야 함

<span><img src="" alt="왼쪽" onclick="this.src="."/><span> (x)

-> 방법 : <button type="button" class="prev" onclick="prev();"> 이전 내용 </button>

<img onclick="location.href=URL;" alt....> 링크 있는 것-> 방법 : <a href="url><img ..... ></a>

- 마우스에 대응되는 키보드 이벤트 핸들러를 적용하지 않아 키보드 접근이 안되는 경우

: 키보드 포커스 초점 영역이 벗어나면 동작하지 않음 -> 키보드 이벤트 핸들러 추가

ex) <a onmouseover= ... onmouseout= ... <

-> 방법 : <a mouseover=" onfocus= onmouseout= "" onblur ="" />

# 마우스 이벤트 : mousedown, mouseup, mouseover, mouseout 이 있음

# 키보드 이벤트 : keydown(어떤 키가 눌렸을 떄), keyup(어떤 키가 눌렸다가놓을 때), focus(객체가 초점 받을 때), blur(객체가 초점 벗어날때)

-readonly 속성을 사용하여 키보드 접근이 안되는 경우

-> readonly 속성 제거하고 버튼을 href 유효한 URL로 수정

- 마우스 종속적인 자바코드를 사용한 경우(키보드로 2차 메뉴를 볼 수 없는 메뉴바) - hover에만 기능 제공

: hover에 정의했던 기능에서 keyup 이벤트 추가

- 부가 어플리케이션 콘텐츠의 wmode값 설정으로 키보드 이용이 불가능한 경우

 : wmode를 transparent로 지정하여 키보드가 접근하지 못하는 상태 

-> 방법 : 플래시 콘텐츠 wmode값을 window로 지정하여 수정

ex)

<param name="wmode" value="transparent>

 -> <param name="wmode" value="window" (HTML문서 위에 플래시 콘텐츠를 구성하는 경우, 투며ㅑㅇ한 느낌을 주려면 아예 플래시 저작도구 내에서 레이어를 겹치는 효과를 만들어 내고 웹 문서안에서는 wmode값을 window로 지정해 줌)

(주의사항)

- onkeypress, onkeydown, onkeyup 이벤트 핸들러를 사용하여 키보드로 제어가 불가한 경우 감점

- 지리정보, 가상현실(VR) 콘텐츠 경우 예외 인정하나, 기타 인터페이스는 키보드만으로 사용할 수 있어야 함

- 키보드 탭 메뉴에서 탭1->탭2->탭3로 이동하여 모든 탭 내용을 확일할수 없는 경우 감점

- onfocus="this.blur();"를 사용하는 경우 검사항목 8,9,19에서 동시 감점

- 플래시 콘텐츠의 wmode값을 transparent 또는 opaque로 지정하면 화면 낭독기로 인식 불가

3) 평가포인트

- <img>태그는 키보드로 접근 어려움

2. 초점 이동

검사항목9. 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 함

- 초점이동(검사항목9)은 검사항목8, 19와 관련있음

# 초점시각화는 키보드 사용보장(검사항목8) - 키보드가 접근할 수 없어 초점여부를 볼수 없는 경우

 : tab index, 자바스크립트 코드 포커스를 강제 이동시켜 논리적 순서가 지키지 않은 경우 : 초점이동 준수X

# 초점논리적 순서 : 콘텐츠 선형구조(검사항목19)랑 관련 있음 - 초점을 안보이게 감추거나 정확하게 어떤 객체의 라인, 초점이 겹쳐 확인되지 않는 경우 - 초점이동 준수되지 못함

 : CSS를 제거하고 콘텐츠 순서가 논리적이지 X -> 콘텐츠 선형구조 준수X

- 초점을 받았을 때 시각적으로 구분 가능하고 현재 키보드 위치를 알아야 함

(오류유형)

- 초점 이동순서가 논리적이지 않으며 일관성이 없는 경우

-> 방법 : 논리적 순서로 소스코드 배열하여 CSS 활용하여 초점 개선

ex) ul -li로 이루어진 구조에서 아래와 같이 css를 추가

     ul {position:relative}

     ul li.btn { position:absolute; right:0 top:0; } 

- 초점 또는 키보드 위치를 나타내는 요소가 시각적으로 표시되지 않는 경우

-> 방법 : onfocus="this.blur();"를 제거하여 개선 

    ex) <a href=""onfocus="this.blur();"> <img ...>  -> <a href=""><img...>로 수정

# tip

: 초점 또는 키보드 위치를 나타내는 요소를 자바스크립트 뿐만 아니라 CSS로도 감출 수 있음

a:focus {outline:0;} 를 css에 추가.

- <area> 요소의 진행 순서에 의미 있으나 키보드 접근 순서가 의미와 일치하지 않는 경우

 -> 방법 : 이미지 맵을 부서명과 그에 속한 "과 " 계층의 순서로 소스 순서 바꿈

# onfoucs="this.blur();"를 사용하면 키보드 접근, 초점의 시각적 구분이 불가하고 의도하지 않은 초점 변화가 실행되므로 검사항목 8,9,19에서 동시 감점

3) 평가포인트

- 탭 등을 이용하여 버튼 등에 초점이 잘 잡히는지 확인

3. 조작 가능

조작기능이란 : 사용자의 입력 및 컨트롤을 조작할 수 있도록 하는 것

: (검사기능10) 손떨림있는 사용자와 시각장애인도 컨트롤을 용이하게 찾아서 사용

-> 대각선길이가 6.0mm이상 되도록, 컨트롤 테두리 안쪽으로 1픽셀이상의 여백을 제공해야 함

4. 응답시간 조절

검사기능11. 응답시간 조절

1) 기본개념

응답시간 조절이란 : 제한된 시간안에 요구된 지시, 읽어야할 컨텐츠 시간을 조절할 수 있도록 조절할 수 있어야 함

-> 해당감각에 있는 장애 사용자에게는 정해진 제한 시간이 문제가 될 수 있음 

-> 적용된 시간을 멈추거나 연장, 회피할 수 있어야 함

ex) 3초 뒤에 이동합니다 문구, 시간후 종료하는 앱

2) 오류유형

- 페이지 이동시 회피 수단 제공 (x) - 페이지 이동에 대해 확인 및 취소 버튼 제공, 충분한 시간 제공하여 개선

- 제한 시간을 연장하는 방법에 제한 시간이 있는 경우(x)

: 자동 로그인 시간을 연장하기 위해 특정 시간을 제공 -> 로그인 연장 시간 키 제공

3) 주의사항

- 원칙적으로 콘텐츠의 이용에 따르는 시간 조절을 허용할 수 없는 콘텐츠는 예외로 인정

- 검사대상은 자동전환 페이지, 제한시간 연장, 제한시간 만료 경도 등이 해당됨

4) 평가포인트

- 회피수단 제공하지 않거나 응답시간 제한 있으면 오류

- 자동전환 페이지는 사용자가 인지할 수 있는지, 충분한 시간을 제공했는지 확인

# 보안상 문제로 시간제한이 필요한 경우 연장기능 제공

# 경매나 실시간 게임, 듣기평가용 콘텐츠는 예외

5. 정지 기능 제공

검사항목 12. 정지기능 제공

1) 정지기능 제공 : 자동으로 변경되는 콘텐츠는 움직임 제어가 가능해야 함

ex) 스크롤되는 배너, 뉴스, 실시간 검색어 등과 같이 자동으로 흐르거나 움직이는 콘텐츠

ex) 자동으로 변경되는 플래시 콘텐츠, 의미없는 장식적인 변화를 위해 이미지가 변경되는 경우

-> 정보 제공하는 콘텐츠가 자동으로 변경되는 경우 반드시 이전, 다음, 정지 기능을 제공해야 함

2) 오류유형

- 시간에 따라 변화하는 콘텐츠에 정지, 이전, 다음 기능이 없는 경우

-> 정지, 이전, 다음 버튼 소스를 앞부분으로 수정

- 시간에 따라 변화하는 콘텐츠가 마우스와 키보드로 제어 불가능한 경우 (x)

-> 콘텐츠를 제저할 수 있는 정지버튼을 제공하여 수정

3) 주의사항

- 움직이는 배너, 뉴스 등 시간에 따라 변화하는 콘텐츠를 키보드와 마우스로 평가

- 키보드 포커스 및 마우스 오버시 콘텐츠의 변화가 멈춰지면 정지기능이 제공된 것으로 인정

- 검사대상은 자동적으로 스크롤되는 배너, 자동 변경되는 실시간 검색순위 등이 해당

4) 평가포인트

- 자동으로 변경되는 콘텐츠인지 확인 -> 동작 여부 확인

- 시간에 따라 변화하는 콘텐츠는 정지, 이전, 다음 기능있는지 확인

ex) 실시간 검색 순위, 자동 배너

6. 깜박임과 번쩍임

검사항목 13. 깜빡입과 번쩍임 사용 제한

1) 기본개념

- 경고없이 초당 3~50초 깜박이면 번쩍이면 발작 일어날 수 있음

 : 깜박임 있으면 미리 알려야 함

# 깜박임이 3초 이하면 문제 없음

2) 평가포인트

- 초당 3~50회 주기로 반짝이는 컨텐츠를 제공하지 않거나 깜빡임이 3초미만인 경우 준수한 것

- 사전경고없이 초당 3~50회 깜빡이면 오류

- PEAT는 정확한 깜빡임 수치를 판단하기 위한 툴 (http://trace.wisc.edu/peat/)

7. 반복영역 건너뛰기 제공

검사항목14. 반복영역 건너뛰기

1) 기본내용

- 콘텐츠 영역은 건너뛸수 있어야 함(복잡한 페이지는 본문 영역으로 건너띄는 링크를 반드시 제공)

- 필요성 : 시각 및 상지장애인들이 쉽게 쓰기 위해 필요

- 방법 :  바로가기 제공(링크 아이디와 본문 아이디 연결시켜야)

 -> <li><a href="#contents">본문 바로가기</a>

     <div id="contents">

- 메뉴 수 적으면 반복영역 건너뛰기 제공 필요 없음

- 반복영역 건너띄기 제공 : 3개 이하로 제공하는게 바람직 

# 건너 띄기 링크는 시각장애인 뿐만 아니라 화면에 잘 보이도록 제공함

2) 평가포인트

- 반복되는 영역을 건너띄기 링크를 제공하면 준수

- 링크 동작여부도 확인함

- 화면 내 본문 바로가기 링크를 항상 표시함

- 본문 바로가기 제공해야 함

 : body 요소 다음으로 제공해야 함

 : Display: none 속성과 같이 CSS를 통해 화면에서 숨기는 경우, CSS를 제거한 상태에서는 키보드 접근도 가능하고 동작에 문제 없지만 CSS가 적용된 상태에서는 시각적으로 표시도 되지 않음

8. 제목 제공

검사항목15. 제목 제공

1) 기본내용

- 제목은 페이지 접근할 때 가장 먼저 이해할 수 있는 중요 주제로, 콘텐츠 내용을 잘 나타내야 함

- 제목 제공은 페이지, 프레임, 콘텐츠 블록에 적절한 제목을 제공하는 것

- 콘텐츠 구분은 <h1> ~ <h6>요소를 활용하여 제공해야 하며, <frame>, <frameset>, <iframe>에 대한 목적을 title로 제공해야 함

2) 오류 개선

- 반복된 특수문자 제공

- 페이지 분류 더 가능한데 상위범주로 제목 제공한 경우( title에 분명히 정보 제공)

- <frame>, <iframe>, <frameset>요소에 title속성이 없거나 속성값을 비운 경우 -> 각 tag내 title에 내용이 명시 되어야 함

- 버어있는 프레임에는 내용없음, 빈 프레임 등 정보를 제공해줘야 함

# 페이지 제목 부분은 스크린리더가 읽어주는 부분이므로 반복적으로 특수문자를 사용하지 않는 것이 좋음

3) 평가포인트

- 사용자가 이용할 수록 적절한 제목을 제공하였는지 확인

- 프레임마다 간단명료한 제목 제공하였는지 확인

 : <h1~h6> 적절히 제공했는지 확인

- 사용자가 가장 먼저 인식하는 정보 : 내용을 제목으로 지정

9. 적절한 링크 텍스트 제공

검사항목16. 적절한 링크 텍스트

1) 기본개념

- 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 함

2) 오류유형

 - 목적이나 용도를 알기 어려운 링크 텍스트를 제공한 경우 

 -> 링크 텍스트에 "자세한 내용은 필릭스블로그 공지사항을 확인해주세요" 라고 써야함 / 자세한 링크는 클릭해주세요(X)

 : 링크 텍스트를 단순히 URL경로로만 제공하는 경우

3) 평가포인트

- 링크가 적절한지 검사(텍스트 정보로 링크에 대해 알수 있는지 확인)

- OpenWAX이용하여 검사 가능 : 16번 항목 : 링크에 텍스트 정보가 있는지 없는지 나옴

웹/모바일 접근성 관련 궁금 한 것들은 물어봐 주세요 ^^

공감 혹은 댓글은 

글쓴이에게 큰 도움이 됩니다~