신체적으로 장애를 가지고 있던지, 가지고 없던지 관계없이 모두 동등하게 사용자들을 웹서비스를 사용할수 있어야 한다.
이때 내가 구현한 화면이 신체적인 웹접근성을 높이는 방법들을 소개하겠다.
키보드로 초점 이동
키보드를 사용한 초점의 이동 순서는 순차적으로 일관성있게 이동해야 한다.
일반적으로 페이지의 좌측 상단 영역에서 우측 하단 영역으로 이동하는 것이 원칙이다.
키보드의 tab 키(다음으로 이동)와 shift + tab(이전으로 이동) 키로 올바르게 이동하고 있는지 확인해야 한다.
위 이미지를 설명하자면, 네이버 clova wave 디바이스 소개페이지 메인화면에서,
제일 처음 tab 키를 누르면 좌측 상단 영역에 "본문 바로보기" 링크가 나오고, 그 다음 또 tab 을 누르면 우측으로 이동하여 CLOVA 로고로 이동, 그 다음 또 tab 을 누르면 HuperCLOVA X, tab 누르면 프로덕트, tab 뉴스피드, 그리고 또 tab 을 누르면 우측 하단으로 이동하여 동영상 영역으로 포커스가 이동되는 것을 볼수 있다.
응?? 저 "본문 바로보기" 는 어떻게 만든거지??? 싶을 것이다.
이때 사용되는 기능이 "skip-" 기능이다.
브라우저가 지원하는 기능은 아니고, 화면을 구현하는 사람이 만들어내야 하는 기능인데, skip- 란 과연 무엇일까?
skip-
- 시력에 장애를 가지고 있는 사용자이거나, 신체에 장애를 가지고 있는 사람들 중에 header 부분을 tab 키를 사용해서 건너뛰고 다음 콘텐츠부터 스크린리더기로 듣거나 포커스가 이동하길 원히는 사용자에게 유용한 기능이다.
- header만 넘길수 있는건 아니다. 그렇다면? 다음 코드를 참고바란다.
<body>
<div id="skip-header">
<a href="#main">본문 바로보기</a>
</div>
<header>...</header>
<main id="main">...</main>
<footer>...</footer>
</body>- 위 코드처럼 body 태그 바로 밑에,
a의 attribute 인 href 값에, 건너뛰어서 바로 보고싶은 요소에 부여한 id값을 "#"을 붙여서 넣는다. - 위 코드가 있는 페이지 화면이 첫 랜더링을 끝낸 후에 → tab 키를 누르면 → #skip-header 영역이 보일것이고, 그 상태에서 enter 키를 누른 후에 →
tab 을 누르면 → 바로 main 쪽으로 넘어간다.
사용자 제어창 크기 컨트롤
미세한 조작이 어려운 경우의 사용자가 입력 및 컨트롤을 쉽게 조작이 가능하도록 하여야 한다.
- 웹 페이지의 모든 컨트롤은 대각선 방향의 길이를 6mm 이상으로 제공해야 한다.
예시이미지:
- 모바일 화면에서의 터치 오류의 최소화를 위해 컨트롤 크기는 가로와 세로가 9mm x 9mm 이상 되게 하는 것이 좋다.
예시이미지:
- 링크, 사용자 입력, 기타 컨트롤 등이 안쪽 여백은 1px 이상의 여백을 두는 것이 좋다.
예시이미지:
- 모바일에서 컨트롤의 중심 간의 간격은 13mm x 13mm 이상이어야 사용자가 터치 오류를 범할 가능성이 낮아지는데, 최소 9mm을 권장한다.
예시이미지:
위에 기재한 내용대로 화면구현을 잘 하였는지 진단할수 있는 프로그램을 소개한다.
KWCAG a11y inspector
(컨트롤의 대각선 길이를 측정해주는 프로그램.
크롬 웹 스토어에서 설치 가능하며, 웹에서의 컨트롤 크기는 대각선 6mm 이상으로 구현할 수 있도록 확인할 수 있다)
예시이미지:
동영상 컨텐츠의 컨트롤
미세한 조작이 어려운 경우의 사용자가 입력 및 컨트롤을 쉽게 조작이 가능하도록 하여야 한다.
- 자동으로 소리 및 영상이 재생되면 스크린리더기를 사용하는 사용자가 콘텐츠를 인식하는데 방해를 받게 되므로 영상이나 배경음과 같은 소리는 자동으로 재생되지 말아야 한다. (단, 자동으로 재생되는 지속시간이 3초 미만일 경우 허용)
- 시간 제한이 있는 콘텐츠는 응답시간을 조절하거나 콘텐츠를 제어할 수 있는 수단을 제공해야 한다.
(경매나 실시간 게임, 듣기 평가용 콘텐츠 등과 같이 원천적으로 콘텐츠의 이용에 따르는 시간 조절을 허용할 수 없는 콘텐츠는 예외)
1. 시간적인 제약이 있다는 것을 사용자에게 반드시 보여주도록
2. 시간 제약을 연장 또는 우회할 수 있는 수단을 함께 제공하도록
예시 이미지:
- 자동으로 변경되는 콘텐츠는 정지 기능을 제공하여 움직임을 제어할 수 있어야 한다.
1. 변화하는 콘텐츠를 일시 정시 시키고, 다시 재생할 수 있도록 컨트롤 제공
2. 전체 배너의 갯수를 인지할 수 있도록 리스트 제공
3. 마우스 뿐만 아니라 키보드로도 모든 컨트롤 요소에 초점이 갈 수 있도록 제공
예시이미지:
