[HTML] tabindex 속성, 웹 접근성/키보드 접근성 준수하기

 

 

웹 접근성(Web Accessibility)

웹 사이트에서 제공하는 정보를 모든 사용자가 신체적, 환경적 조건에 차별 및 제한 없이

동등하게 웹에 접근하여 이용할 수 있도록 보장하는 것을 웹 접근성이라 합니다.

신체적 조건은 일반 사용자는 물론, 장애를 겪고 있거나 고령자를 의미하며

환경적 조건은 다양한 기기(PC, 모바일, 태블릿), OS(운영체제), 웹 브라우저, 저사양, 저속회선 등의 모든 환경을 의미합니다.

웹 접근성은 사용자뿐만 아니라 외곽 지역에 있는 사람들의 사회적 통합을 지원하기도 하며, 누군가에게는 직접적으로 와닿는 생활의 일부일 것입니다. 기본권을 보호받듯 웹 접근성 또한 법적으로 필수적입니다.

접근성을 보장하여 정보의 격차를 줄이고, 모두가 공유할 수 있는 웹 세상을 만드는 것이 바로 웹 접근성의 궁극적 목표입니다.

 

 

키보드 접근성/tabindex 속성

웹 접근성 개선을 위한 여러 방법 중 키보드 접근성 속성인 tabindex에 대해 알아보겠습니다.

키보드 접근성이란, 웹 페이지를 탐색할 때 스크린 리더 사용자가 웹페이지의 정보에 접근하려 할 때 탭키와 엔터키를 사용하게 되는데, 키보드만으로 원하는 정보로 접근할 수 있는 것을 의미합니다.

tabindex는 키보드의 Tab키를 눌렀을 때, 초점 이동 순서를 임의로 조정할 수 있는 HTML의 속성입니다.

사용법은 tabindex 값에 양의 정수를 넣어주면 1부터 차례로 포커스 되는 방식이며,

사용자가 흐름을 파악하기 쉽도록 자연스러운 방향으로 논리적 순서를 부여해야 합니다.

예) <p tabindex="1"></p>

 

 

기본으로 초점을 받는 태그

태그	설명
a	페이지 이동 링크 태그
button	버튼 태그
input	사용자 입력 상자 태그
select	체크박스 태그(중복 가능)
textarea	여러 줄 입력 상자 태그

 

tabindex 속성 값

속성 값	설명
양수	1부터 차례대로 순서를 받습니다
0	초점을 받지 않는 요소를 가능하게 합니다. 마크업 순서를 따릅니다.
음수	기본적으로 초점을 받는 태그들을 무시합니다.

 

 

이상으로 웹 접근성/키보드 접근성 준수에 대한 글을 마치며 tabindex를 지나치게 남용하면 오히려 사용자의 사용성을 저해할 수 있으니 때에 따라 적절히 사용하는 것이 효율적입니다. 감사합니다!