[HTML5] 웹접근성 tabindex 초점 이동

 

 

초점 이동 ?

 

- 스크린 리더 사용자가 키보드를 통해서 웹 페이지 정보에 접근하는 것

( 스크린 리더 : 컴퓨터나 모바일 화면의 텍스트를 TTS를 통해 읽어주는 소프트웨어, 일반적으로 시각장애인이 눈으로 보는 대신 소리로 들으며 화면의 정보를 이해하는데 사용)

 

- tab 키로 좌측상단부터 포커스 이동, shift + tab 키는 반대로 올라감

 

 

 

 

 

초점 받는 태그 ?

 

- 기본적으로 초점을 받는 태그 : <a>, <button>, <input>, <select>, <textarea> 가 있다.

a	클릭 시 페이지 이동시켜주는 링크 태그
button	버튼 태그
input	사용자가 값을 입력할 수 있는 입력 요소들 태그
select	여러 옵션 값 중 하나 선택하는 태그 (multiple 사용시 여러개 선택 가능)
textarea	여러 줄 입력 상자 태그

 

 

 

 

 

 

tabindex ?

 

- 키보드의 tab 키를 눌렀을 때 포커스 이동 순서를 임의로 조정 가능한 html 속성

- 기본 마크업이 논리적인 구성이라면 tabindex를 사용할 일은 없다

 

 

tabindex 속성값

양수	1부터 숫자로 순서 지정, 작은 숫자가 먼저 순서 받음
0	h1,div 는 원래 초점을 받을 수 없지만 이런 요소들도 탭으로 초점을 받게 처리함, 마크업 순서대로 탭순서 처리
-1	a,button,input,select,textarea 태그가 탭 못 받게 함, 다른 음수를 써도 무방하나 탭으로 초점 못 받는 것은 같아 의미 없음