05. 운용의 용이성 (1)

운용의 용이성 (1)

- 키보드 사용 보장에 대해 이해할 수 있다.
- 초점 이동과 조작 기능에 대해 설명할 수 있다.
- 응답시간 조절에 대해 설명할 수 있다.
- 정지 기능에 대해 이해할 수 있다.

키보드 사용 보장

"텍스트를 입력하기 위한 키보드 조작 이외에도 마우스로 이용할 수 있는 모든 기능에 대해 키보드로 이용할 수 있도록 하는 것"

키보드 사용 보장의 필요성

• 마우스를 이용하기 어려운 사용자가 키보드를 이용할 수 있도록 한다.
• 일반 사용자도 키보드로 더욱 빠르고 정확한 컨트롤 가능해진다.

키보드 사용 검사항목 해설

예외

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

마우스로 이용 가능한 기능을 키보드로 이용할 수 있도록 구현

키보드 사용 보장 제공 방법

기준 : 모든 기능을 키보드로 접근가능하고, 사용 가능하도록 제공한 경우 준수한 것으로 인정

오류 유형 1 : 마우스가 제어할 수 있는 요소를 키보드로 제어할 수 없는 경우

1. 오류 사례 : 이미지에 onclick 자바코드 이벤트를 적용한 경우 -> A, input, select, textarea, button등으로 수정
2. 오류 사례 : 마우스에 대응되는 키보드 이벤트 핸들러를 적용하지 않아 키보드 접근이 안 되는 경우 -> 키보드 이벤트 핸들러 추가
3. 오류 사례 : readonly 속성을 사용하여 키보드 접근이 안 되는 경우 -> readonly 속성 제거, 버튼을 href에 유효한 URL로 수정
4. 오류 사례 : 마우스에 종속적인 자바코드를 사용한 경우 -> hover에 정의했던 기능에서 keyup 이벤트 추가

오류 사례 1 - 기타 이미지 키보드 적용법 ( 출처 : 배움나라 - 류영일 외, '장애인차별금지법에 대응하는 웹 접근성과 품질인증', 에이콘 출판사,2013 )

 

오류 사례 2 - 마우스와 키보드 이벤트 핸들러 비교 ( 출처 : 배움나라 )

오류 유형 2 : 부가 어플리케이션 콘텐츠의 wmode 값 설정으로 키보드 이용이 불가능한 경우 -> 플래시 콘텐츠 wmode 값을 window로 지정하여 수정

wmode 값에 따른 레이어의 변화 ( 출처 : 배움나라 - 류정일 외, '장애인차별금지법에 대응하는 웹 접근성과 품질인증', 에이콘 출판사,2013 )

 

키보드 사용 보장의 주의사항

1. 반드시 IE8에서 확인할 것
2. onkeypress, onkeydown, onkeyuo 이벤트 핸들러를 사용하여 키보드로 제어가 불가한 경우 감점
3. 지리정보(GIS), 가상현실(VR) 콘텐츠의 경우 예외 인정하나 기타 인터페이스는 키보드만으로 사용할 수 있어야 함
4. 키보드로 탭 메뉴에서 탭1->탭2->탭3으로 이동하여 모든 탭 내용을 확인 할 수 없는 경우 감점
5. onfocus="this.blur();"를 사용하는 경우 검사항목 8, 9, 19에서 동시 감점
6. 플래시 콘텐츠의 wmode 값을 transparent 또는 opaque로 지정하게 되면 화면낭독기로 인식이 불가함

초점 이동

"키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.

초점 : 웹사이트에서 현재 위치하는 영역을 시각적으로 안내하기 위해 제공되는 형태로써 포커스 형태와 커서 형태 등으로 위치를 안내하는 것

• 시각장애인이나 상지장애인 등 키보드로만 웹 사이트 이용하는 사용자
• 현재의 초점의 위치를 이해하고 원하는 콘텐츠를 이용할 수 있도록 함

초점 이동 검사항목 해설

초점 이동 검사항목 해설1 ( 출처 : 배움나라 )

초점 이동 검사항목 해설2 ( 출처 : 배움나라 )

초점 이동 제공 방법

기준 : 키보드 초점을 받은 링크, 컨트롤 및 입력 서식은 초점을 받지 않는 객체들로부터 구분될 수 있도록 제공한 경우 준수한 것으로 인정

오류 유형 1 : 초점의 이동순서가 논리적이지 않으며 일관성이 없는 경우 -> 논리적 순서로 소스코드 배열하여 CSS 활용 하여 초점 개선

오류 유형 2 : 초점 또는 키보드의 위치를 나타내는 요소가 시각적으로 표시되지 않은 경우 -> onfocus="this.blur(); " 를 제거하여 개선

CSS 활용한 초점 부각 방법 ( 출처 : 배움나라 )

기타 tip ( 출처 : 배움나라 )

오류 유형 3 : <area> 요소의 진행 순서에 의미가 있으나 키보드 접근 순서가 의미와 일치하지 않은 경우 -> 이미지 맵을 부서명과 그에 속한 '과' 계층의 순서로 소스 순서 바꿈

초점 이동의 주의사항

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

응답시간 조절

조각 가능의 개념 조작

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

콘텐츠에 포함돈 모든 컨트롤은 대각선 방향의 길이를 6.0mm 이상으로 제공

조각 가능의 필요성

조각 가능

터치스크린을 채용한 기기를 이용하는 손 떨림이 있는 사용자와 시각 장애인도 컨트롤을 용이하게 찾아서 조작가능

키보드 사용 보장 제공 방법

링크, 사용자 입력, 기타 컨트롤 등의 안쪽 여백

링크, 사용자 입력 및 기타 컨트롤은 테두리 안쪽으로 1 픽셀 이상의 여백을 두고 이곳에서는 위치 지정 도구의 조작에 반응하지 않도록 구현하는 것이 바람직

조작 가능

제공방법

기준 : 웹 페이지에서 제공하는 모든 이웃한 컨트롤들은 개별적으로 선택하고 사용할 수 있도록 대각선 길이가 6.0mm 이상의 크기와 컨트롤의 안쪽 여백이 1픽셀 이상을 갖도록 제공한 경우

오류 유형

• 컨트롤의 크기가 대각선으로 6.0mm 이상 제공하지 않은 경우
• 링크, 사용자 입력, 기타 컨트롤의 테두리 안쪽으로 1픽셀 이상의 여백을 제공하지 않은 경우

응답시간 조절

"제한된 시간 안에 요구되는 지시, 읽어야 할 내용이 있는 콘텐츠의 경우 그 시간을 조절할 수 있도록 기능을 제공해야 한다."

• 일반적인 사용자 수준에 맞추어 주어진 제한시간은 감각에 장애가 있는 사용자에게는 접근 방식에 따라 시간이 부족할 수 있음
• 적용된 제한시간을 멈추거나 회피할 수 있도록 하여 동등한 정보의 인식을 위해 보안

응답시간 조절의 검사항목 해설

• 제한된 시간이 일반적인 사용자를 위해 제시된 경우 응답시간 조절 예외 인정
• 제한된 시간이 일반적으로 사용자를 위한 것일 경우 장애인과 같은 사용자에게는 차별 요소가 될 수 있음

시간 제한이 있는 콘텐츠에 대해서도 정지, 시간을 연장할 수 있는 기능을 제공해야 함

응답시간 조절의 검사항목 해설 (예)  ( 출처 : 배움나라 )

 

응답시간 조절 제공 방법

기준 : 시간 제한이 있는 콘텐츠의 응답시간을 조절할 수 있도록 제공한 경우 준수한 것으로 인정

오류유형 1 : 페이지 재 이동시 회피할 수 있는 수단을 제공하지 않은 경우 -> 확인, 취소 버튼 제공 및 충분한 시간 제공하여 개선

오류유형 2 : 제한 시간을 연장하는 방법에 제한 시간이 있는 경우 -> 로그인 연장 단축키 제공하여 개선

응답시간 조절의 주의사항

1. 원천적으로 콘텐츠의 이용에 따르는 시간 조절을 허용할 수 없는 콘텐츠는 예외로 인정
2. 검사대상은 자동전환 페이지(Redirection page), 제한시간 연장, 제한시간 만료 등이 해당됨

정지 기능 제공

"자동 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.

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

• 자동으로 움직이는 콘텐츠 대한 인식이 느린 고령자, 어린이, 인지 등에 장애가 있는 사용자의 경우 콘텐츠를 인식하는 시간이 오래 걸림
• 고령자, 어린이, 인지 등에 장애가 있는 사용자가 자동으로 변경되는 콘텐츠를 놓치지 않도록 함

정지 기능 제공의 검사항목 해설

자동 롤링 배너존, 포털의 한줄 뉴스같은 콘텐츠를 주로 검사

정지 기능 제공의 검사항목 해설 (예)  ( 출처 : 배움나라 )

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

정지 기능 제공 방법

기준 : 자동으로 변경되는 콘텐츠의 움직임을 제어할 수 있도록 제공한 경우 준수한 것으로 인정

오류유형 1 : 시간에따라 변화하는 콘텐츠에 정지, 이전 다음 기능이 없는 경우 -> 정지, 이전, 다음 버튼 소스를 앞 부분으로 수정

오류유형 2 : 시간에 따라 변화하는 콘텐츠가 마우스와 키보드로 제어 불가능한 경우 -> 콘텐츠를 제어할 수 있는 정지 버튼을 제공하여 수정

정지 기능 제공의 주의사항

1. 움직이는 배너, 뉴스 등 시간에 따라 변화하는 콘텐츠를 키보드와 마우스로 평가
2. 키보드 포커스 및 마우스 오버 시 콘텐츠의 변화가 멈춰지면 정지 기능이 제공된 것으로 인정
3. 검사대상은 자동적으로 스크롤되는 배너, 자동 변경되는 실시간 검색순위 등이 해당

 

학습정리

키보드 사용 보장

• '키보드 사용 보장'의 개념 : 모든 기능은 키보드만으로도 사용 할 수 있어야 함
• '키보드 사용 보장'의 필요성 - 마우스를 이용하기 어려운 사용자의 어려움 해소
• '키보드 사용 보장'의 검사항목 해설 - 마우스로 이용 가능한 키보드로도 이용할 수 있도록 구현
• '키보드 사용 보장'의 제공 방법 - 모든 기능을 키보드로 접근, 사용 가능하도록 제공

초점 이동

• '초점 이동'의 개념 : 키보드에 의한 초점이 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 함
• '초점 이동'의 필요성 - 키보드로만 웹 사이트를 이용하는 사용자 어려움 해소
• '초점 이동'의 검사항목 해설 - 초점을 받았을 때 시각적으로 구분, 사용자가 현재 키보드 위치를 이해할 수 있도록 함
• '초점 이동'의 제공 방법 - 키보드 초점을 받은 링크, 컨트롤 및 입력 서식 초점을 받지 않은 객체들로부터 구분될 수 있게 제공

조작 가능

• '조작 가능'의 개념 : 사용자의 입력 및 컨트롤을 조작할 수 있도록 하는 것
• '조작 가능'의 필요성 - 손 떨림이 있는 사용자와 시각 장애인의 용이한 조작
• '조작 가능'의 검사항목 해설 - 링크, 사용자 입력, 기타 컨트롤 등의 안쪽 여백을 두고 이곳에서는 위치 지정 도구가 조작에 미반응
• '조작 가능'의 제공 방법
  • - 모든 컨트롤들은 대각선 길이가 6.0mm이상
  • - 컨트롤의 안쪽 여백 : 1픽셀 이상

응답시간 조절

• '응답시간 조절'의 개념 : 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 함
• '응답시간 조절'의 필요성 - 감각 장애가 있는 사용자의 어려움 해소
• '응답시간 조절'의 검사항목 해설 - 시간제한이 있는 콘텐츠는 정지, 시간 연장할 수 있는 기능 제공
• '응답시간 조절'의 제공 방법 - 시간제한이 있는 콘텐츠 응답시간 조절 가능하게 제공

정지 기능 제공

• '정지 기능 제공'의 개념 : 자동 변경되는 콘텐츠 움직임을 제어할 수 있어야 함
• '정지 기능 제공'의 필요성 - 콘텐츠에 대한 인식이 느린 사용자 어려움 해소
• '정지 기능 제공'의 검사항목 해설 - 정보 제공하는 콘텐츠가 자동 변경되는 경우 반드시 이전, 다음, 정지 기능을 제공
• '정지 기능 제공'의 제공 방법 - 자동 변경되는 콘텐츠의 움직임 제어할 수 있도록 제공