05. 운용의 용이성 (1) | sohinggu๑°⌓°๑

« 2024/10 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

티스토리 뷰

웹 접근성

05. 운용의 용이성 (1) | sohinggu๑°⌓°๑

댕발자 (●'-'●) 2019. 6. 10. 02:48

운용의 용이성 (1)

학습목표
1. 키보드 사용 보장에 대해 이해할 수 있다.
2. 초점 이동과 조작 가능에 대해 설명할 수 있다.
3. 응답시간 조절에 대해 설명할 수 있다.
4. 정지 기능에 대해 이해할 수 있다.

운용의 용이성(Operable)

어떤 사용자나 환경에서도 키보드 만으로도 자유롭게 웹 사이트에서 제공하는 모든 콘텐츠의 기능을 이용할 수 있게 해야 한다.

웹 접근성 검사항목 - 운용의 용이성

<항목8> 키보드 사용 보장: 모든 기능은 키보드 만으로도 사용할 수 있어야 한다.

<항목9> 초점이동: 키보드에 의한 초점이 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.

<항목10> 조작 가능: 사용자 입력 및 컨트롤을 조작가능하도록 제공되어야 한다.

<항목11> 응답시간 조절: 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.

<항목12> 정지 기능 제공: 자동 변경되는 콘텐츠의 움직임을 제어할 수 있어야 한다.

키보드 사용 보장

1. 키보드 사용 보장의 개념

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

2. 키보드 사용 보장의 필요성/목적

시각장애, 상지장애, 운동 장애 등 마우스를 이용하기 어려운 사용자가 키보드를 이용할 수 있도록 한다. 부가적인 효과로 일반 사용자도 마우스 없이 이용해야 할 때 키보드 입력을 통해 더욱 빠르고 정확한 컨트롤이 가능해진다.

3. 키보드 사용 보장의 검사항목 해설

[검사 적용 예외]

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

하지만, 이런 경우에도 마우스로 이용 가능한 기능은 키보드로도 이용할 수 있도록 구현하여햐 한다.

4. 키보드 사용 보장 제공 방법

(1) 제공 방법

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

(2) 오류 유형

a. 마우스가 제어할 수 있는 요소를 키보드로 제어할 수 없는 경우

a-1. 이미지에 onclick 자바코드 이벤트를 적용한 경우 → A, input, select, textarea, button 등으로 수정 ( 키보드 제어가 가능한 요소 등을 사용하여 키보드가 접근할 수 있도록 하는 것이 매우 중요)

[Tip] 기타 이미지 키보드 적용법

- 개선 전: <img>에 onclick 이벤트 핸들러를 사용한 경우 키보드로는 접근이 되지 않게 된다.

- 개선 후: <img>요소를 포커스가 진입할 수 있는 요소인 <a>로 감싸고, href속성을 지정해 주는 방식으로 수정하게 되면 키보드 포커스를 받을 수 있다.

a-2. 마우스에 대응되는 키보드 이벤트 핸들러를 적용하지 않아 키보드 접근이 안 되는 경우(키보드 포커스 초첨이 영역을 벗어나면 동작하지 않음) → 키보드 이벤트 핸들러 추가

[Tip] 마우스와 키보드 이벤트 핸들러 비교

마우스를 올리면 어떤 동작을 하는 마우스 이벤트 핸들러를 사용하게 되면 마우스로는 해당 동작이 가능하지만 키보드로는 해당 동작을 하지 못하는 경우가 있다. 키보드 사용을 보장하기 위해서는 마우스 이벤트 핸들러에 해당하는 키보드 이벤트 핸들러를 같이 사용해주어야 한다.

a-3. readonly속성을 사용하여 키보드 접근이 안되는 경우 → readonly 속성 제거, 버튼을 href에 유효한 URL로 수정

a-4. 마우스에 종속적인 자바코드를 사용한 경우 → hover에 정의했던 기능에서 keyup 이벤트 추가

b. 부가 어플리케이션 콘텐츠의 wmode값 설정으로 키보드 이용이 불가능한 경우 → 플래시 콘텐츠 wmode갑을 window로 지정하여 수정

HTML문서 위에 플래시 콘텐츠를 구성하는 경우 투명한 느낌을 주려면 아예 플래시 제작도구 내에서 레이어를 겹치는 효과를 만들어 내고 웹 문서 안에서는 wmode값을 window로 지정해주는 방법이 있습니다.

[Tip] wmode값에 따른 레이어의 변화

플래시 콘텐츠를 만들고 이를 웹 문서 속에 포함시킬 때는 wmode값을 지정하도록 되어 있다. 이때 웹 접근성을 준수하기 위해서는 wmode값을 transparent가 아니라 window로 해주어야 한다. 그래야만 하나의 도로에서 정보가 오고 가는 것 처럼 MSAA에 의해 지원되는 보조기술을 이용할 수 있다. 아래 그림과 같이 wmode가 window인 경우 창이 하나가 되고, transparent인 경우 플래시 콘텐츠 위의 레이어에 있게 된다. 2층의 정보는 MSAA에서 지원하지 않게 되므로 1층의 정보만 읽어드린다. 이와 같은 이유로 MS에서 제공하는 접근성 API뿐만 아니라 타 브라우저에서 제공하는 API들을 보조기기가 활용해야만 타 브라우저에서도 이와 같은 응용프로그램과 다양한 기술에 의한 콘텐츠를 접근성 있게 구현하고 보조기술에 활용할 수 있게 된다.

(3) 주의사항

a. 반드시 IE8에서 확인할 것

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

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

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

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

f. 플래시 콘텐츠의 wmode값을 transparent 또는 opaque로 지정하게 되면 화면낭독기로 인식이 불가함

초점 이동

1. 초점 이동의 개념

키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
-초점: 웹 사이트에서 현재 위치하는 영역을 시각적으로 안내하기 위해 제공되는 형태로써 포커스 형태와 커서 형태 등으로 위치를 안내하는 것

2. 초점 이동의 필요성/목적

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

3. 초점 이동의 검사항목 해설

(1)초점의 시각화

- <검사항목8. 키보드 사용보장>과 관련

- 키보드가 접근할 수 없어서 초점 여부를 볼수 없는 경우: 키보드 사용보장을 준수하지 못한 것

- 초점을 안 보이게 감추거나 정확하게 어떤 객체의 라인, 초점이 겹쳐 확인되지 않는 경우: 초점 이동을 준수하지 못한 것

(2) 초점의 논리적 순서

- <검사항목19.콘텐츠의 선형구조>와 관련

- CSS를 제거하고 나서 콘텐츠의 순서가 논리적이지 않은 경우: 콘텐츠 선형구조를 준수하지 못한 것

- Tab index, 자바스크립트 코드 포커스를 강제 이동시켜 논리적 순서를 지키지 않은 경우: 초점 이동을 준수하지 못한 것

* 초점은 반드시 기본 점선일 필요는 없지만, 초점을 받았을 때 시각적으로 구분 가능하고 현재 키보드 위치를 이해할 수 있게 하면 된다.

4. 초점 이동 제공 방법