[웹 접근성] 웹 접근성 지침(7-11) 콘텐츠 간의 구분 / 키보드 사용 보장 / 초점 이동 / 조작 가능 / 응답 시간 조절 / 정지 기능 제공

✅  7. 콘텐츠 간의 구분  

- 웹 페이지의 콘텐츠를 통해 정보를 인식할 때, 이웃한 콘텐츠는 시각적으로 구별될 수 있어야 한다

 

(1)   이웃한 콘텐츠 구분 방법

1. 테두리를 이용한 구분

2. 콘텐츠 사이에 시각적인 구분선을 삽입해 구분

3. 서로 다른 무늬를 이용한 구분

4. 콘텐츠 배경색 간의 명도 대비(채도)를 달리하여 구분

5. 줄 간격과 글자 간격을 조절하여 구분

6. 기타 콘텐츠를 시각적으로 구분하할 수 있는 방법을 통한 구분

 

 

✅  8. 키보드 사용 보장 

- 마우스를 사용하지 못하는 키보드 사용자는 키보드로 웹 페이지를 탐색한다 

- 웹 페이지에서 제공하는 모든 기능을 키보드만으로도 사용할 수 있도록 제공해야 한다

- 즉, 마우스로 조작 가능한 기능과 키보드로 조작 가능한 기능을 동일하게 구현해야만 한다 

 

(1) 사례에 따른 해결 방안 

- 마우스 오버 시 드롭 다운 메뉴 호출 → 키보드 접근 시에도 호출 가능하도록 구현

- 자동 롤링 콘텐츠에 마우스 오버 시 전체 콘텐츠 노출 → 키보드 접근 시에도 호출 가능하도록 구현

- 특정 버튼에 마우스 오버 시 레이어 노출 → 키보드 접근 시에도 호출 가능하도록 구현

- 이미지 또는 focus 되지 않는 요소에 마우스 이벤트 적용 → a링크나 버튼과 같이 focus를 받을 수 있는 요소로 구현

- a링크 요소에 href속성이 없는 경우 

    → 마우스 조작은 가능하나, 키보드 접근은 불가능.

    → a링크에는 반드시 href속성을 제공해야 한다

- a링크에 href속성은 있지만, onfocus="this.blur();"가 적용된 경우 → onfocus="this.blur();"를

- 키보드 접근이 되지 않는 경우 → 마우스 사용 시와 동일하게 접근 가능하도록 구현 

 

 

✅  9. 초점 이동  

- 키보드에 의한 초점은 논리적으로 이동해야 하고 시각적인 구분이 가능해야 한다 

 

(1) 논리적 초점 이동

- 초점은 일반적으로 좌에서 우로, 상에서 하로 이동할 것이라고 예측한다

- 스크린 리더 사용자와 키보드 사용자 모두 초점이 논리적으로 이동해야 웹 페이지를 탐색하는데 어려움이 없다 

- 따라서 초점 이동은 논리적 구조로 마크업 하여 사용자가 예측하는 이동 순서와 일치해야 한다 

 

만약 초점 이동이 아이디 입력, 비밀번호 입력, 로그인 버튼, 아이디 저장 순서인 경우 로그인 버튼을 클릭하게 되었을 때 그다음 초점이 아이디 저장으로 이동하지 못할 가능성이 있다. 이런 경우에는 아이디, 비밀번호 입력 후 아이디 저장에 먼저 초점을 두고, 그다음으로 로그인 버튼으로 이동해야 한다.

 

(2) tabindex

- tabindex 속성을 사용해 초점 이동을 강제하는 경우도 오류 사례에 해당한다

- 마크업이 논리적으로 이루어져 있다면 굳이 tabindex를 사용할 필요는 없다

 

(3) 레이어 팝업

- 초점 이동 순서 : 레이어 팝업을 노출시키는 컨트롤 > 레이어 팝업 내부 > 레이어 팝업 닫기 > 레이어 팝업 노출시키는 컨트롤

- 오류 사례에서는 보통 초점이 레이어 내부로 가지 않고 노출만 시킨 상태로 다음 컨트롤로 이동하게 된다

- 초점이 레이어 뒤로 가서 가려지는 경우가 있으므로, 주의해서 논리적으로 초점을 이동하도록 한다

 

(4) 초점 표시 

- 시각적으로 초점이 보이지 않으면 초점의 위치를 알 수 없어서 컨트롤을 선택할 수 없다

- 따라서 키보드 접근 시 컨트롤이 초점을 받았음을 시각적으로 구별할 수 있어야 한다 

- hideFocus, outline:none 처리를 하거나, 8번 키보드 사용 보장에서 언급했던 onfocus="this.blur();"를 사용하면 모든 초점이 보이지 않게 되니 주의하자

 

 

✅  10. 조작 가능  

- 웹 페이지에서 사용자 입력 및 컨트롤은 조작 가능하게 제공되어야 한다

- 조작 가능 기준을 살펴보도록 하자 

 

(1) 컨트롤 대각선 길이 6mm 이상  

- 웹에서 컨트롤 대각선 길이는 6mm 이상으로 구현되어야 한다 

 

(2) 컨트롤 테두리 안쪽으로 1픽셀 이상의 여백  

- 컨트롤이 연달아 있을 때, 1픽셀 이상의 여백이 있지 않으면 컨트롤 구분도 힘들고 선택할 확률도 높다

- 컨트롤 테두리 안쪽으로 1픽셀 이상의 여백을 두어야 한다

 

 

✅  11. 응답 시간 조절 

- 콘텐츠 탐색 시간이 오래 걸리는 사용자들은 시간제한이 있는 콘텐츠를 인식하기 어렵다

- 따라서 시간 제한이 있는 콘텐츠는 응답 시간을 조절할 수 있어야 한다

- 응답 시간 조절에 대한 사례를 살펴보자 

 

(1)  시간 연장이 불가능한 콘텐츠 

• 충분한 시간을 제공
• 종료 안내
• 조절 수단 제공 

 

- 웹 콘텐츠 제작 시 시간제한이 있는 콘텐츠는 가급적 포함하지 않는 것이 바람직하다

- 보안 등의 사유로 시간제한이 반드시 필요한 경우에는 이를 회피할 수 있는 수단을 제공해야 한다

- 반응 시간이 완료되기 전에 이를 조절할 수 있는 수단을 제공해야 한다

- 반응 시간 조절 기능은 최소 20초 이상의 충분한 시간을 두고 사전에 공지해주어야 한다

 

(2) 페이지 자동 전환  

• 연장 가능 수단 제공
• 해제 가능 수단 제공

 

- Meta 요소의 refresh 속성 등을 사용해 일정 시간 뒤 페이지가 자동 전환되는 경우도 오류 사례이다

- 연장 수단을 제공하거나 이를 해제할 수 있는 수단을 제공해야 한다

- 스크린 리더 사용자와 키보드 사용자도 이를 인지하고 수단까지 가는데 시간이 부족하지 않아야 한다

- 응답 시간 조절에 대한 접근성을 준수하여 시간제한이 있는 콘텐츠를 시간에 관계없이 이용할 수 있도록 하자