Web Guide키보드 접근탭 이동접근성
키보드만으로 사이트 사용하기
마우스를 쓰지 않고 우리 사이트를 끝까지 써 본 적 있으신가요.
탭 키만으로 문의까지 완료할 수 있어야 합니다. 해보면 막히는 곳이 나옵니다.
01누가 키보드로 쓰는가
마우스를 쓰기 어려운 사용자가 키보드로 조작합니다. 또 화면 낭독 프로그램 사용자도 키보드로 이동합니다.
그 외에 마우스가 고장 났거나, 노트북 터치패드가 불편하거나, 빠른 입력을 선호하는 사용자도 있습니다.
01
손 사용이 어려운 경우
마우스 조작이 어렵거나 불가능한 사용자.
02
화면 낭독 사용자
키보드로 요소 사이를 이동하며 내용을 듣습니다.
03
일시적 불편
손을 다쳤거나 마우스가 고장 난 경우.
04
선호
키보드가 빠르다고 느끼는 사용자.
02직접 해보면 안다
탭 키를 눌러 가며 사이트를 써 보세요. 어디에 포커스가 있는지 보이지 않거나, 순서가 이상하거나, 아예 갈 수 없는 곳이 드러납니다.
5분이면 대부분의 문제를 찾을 수 있습니다.
탭
다음 요소로 이동합니다.
시프트+탭
이전 요소로 이동합니다.
엔터
링크나 버튼을 실행합니다.
스페이스
체크박스 선택, 페이지 스크롤.
방향키
선택 목록이나 라디오 버튼 안에서 이동.
이스케이프
팝업이나 메뉴를 닫습니다.
03자주 발견되는 문제
직접 해보면 예상보다 많은 문제가 나옵니다. 대부분 개발 단계에서 고려하지 않아 생긴 것입니다.
가장 흔한 것은 포커스가 어디 있는지 보이지 않는 문제입니다.
포커스가 안 보임 지금 어디에 있는지 알 수 없습니다. 테두리 표시를 제거해서 생깁니다.
순서가 이상함 화면 배치와 다른 순서로 이동합니다.
갈 수 없는 곳 클릭 가능한 요소인데 탭으로 도달할 수 없습니다.
팝업에 갇힘 팝업을 열었는데 닫을 수 없거나 뒤로 갈 수 없습니다.
메뉴가 안 열림 마우스를 올려야 열리는 메뉴는 키보드로 접근 불가.
본문까지 오래 걸림 메뉴가 많으면 본문에 도달하기까지 수십 번 탭을 눌러야 합니다.
04기본 대응
특별한 기술이 필요한 것이 아닙니다. 표준적인 방식으로 만들면 대부분 자동으로 동작합니다.
문제는 보기 좋게 만들려고 표준을 벗어났을 때 생깁니다.
표준 요소 사용
버튼은 버튼 요소로, 링크는 링크 요소로 · 키보드 접근이 기본으로 동작 · 추가 작업이 거의 없음
임의로 만든 요소
보기 좋은 모양을 위해 다른 요소로 버튼을 흉내 · 키보드로 접근 불가 · 별도 대응이 필요
CHECK POINT
□ 탭 키만으로 사이트를 끝까지 써 봤는가
□ 포커스 위치가 눈에 보이는가
□ 탭 이동 순서가 화면 배치와 일치하는가
□ 클릭 가능한 모든 요소에 탭으로 도달할 수 있는가
□ 팝업을 키보드로 닫을 수 있는가
□ 마우스 호버로만 열리는 메뉴가 없는가
□ 본문으로 바로 가는 경로가 있는가
□ 키보드만으로 문의를 완료할 수 있는가
#키보드 접근#탭 이동#접근성#포커스 표시#팝업#표준 마크업#검수#홈페이지 디자인#웹비스타#홈페이지 제작