본문 바로가기
Develops/HTML & CSS

[HTML] 웹 접근성(Web Accessibiliy)을 고려한 tabindex 속성

by SLOTH91 2024. 3. 3.
반응형

현업에서 일을 하다 보면 소비자(Customer)를 대상으로 한 Web 기반의 Service를 제공하는 개발 업무를 수행할 때, 웹 접근성(Web Accessibiliy)을 고려하여 개발하는 경우가 대부분이다. 그 때 웹 접근성을 개선하는 여러 방법이 있는데, 그 중에서도 키보드 접근성을 통한 개선 방법이 있고, 키보드만으로도 Tab 키, Enter 키 등을 활용하여 원하는 정보로 접근할 수 있도록 서비스를 제공할 수 있다. 활용하는 것이 HTML 속성 중의 하나인 tabindex 이다.

 

 

※ 정보통신접근성(Web접근성)이란?

  •  정보통신접근성 (Web 접근성)은 「지능정보화기본법」에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항 입니다.

 

 

[ tabindex 속성값에 따른 설명 ]

tabindex = 1~??? (정수)

정수일 경우, tab 이벤트 발생 시 정수 값에 따라 순차적으로 포커스가 맞춰진다.

 

tabindex = 0

0 일 경우, 예를 들어  <span> 태그와 같이 기본적으로 포커스가 맞춰지지 않는 태그들이 포커스가 받을 수 있게 할 수 있다.

 

tabindex = -1

-1 일 경우, 포커스를 받을 수 있는 폼이나 링크 등에 대하여 포커스를 받지 못하게 강제로 막을 수 있다.

 

 

 

 

다만 위 속성을 통해 포커스 제어가 가능하지만, 마크업 순서를 논리적으로 구현하는 것을 더 권장(tabindex로 강제할 필요가 없기 때문)한다.

반응형