Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML에서 tabindex 속성으로 요소의 탭 이동 순서를 지정하는 방법

HTML에서는 tabindex 속성을 사용하여 요소의 탭 이동 순서(tabbing order)를 지정할 수 있습니다. 이 속성을 활용하면 키보드의 TAB 키를 눌렀을 때 포커스가 이동하는 순서를 원하는 대로 자유롭게 변경할 수 있습니다.

아래 예제 코드를 실행하면 HTML에서 요소의 탭 순서를 설정하는 방법을 직접 확인할 수 있습니다 −

예제

<!DOCTYPE html>
<html>
   <body>
      <a href = "https://www.tutorialspoint.com/current_affairs/index.htm" tabindex="1">Current Affairs</a>
      <br>
      
      <a href = "https://www.tutorialspoint.com/codingground.htm" tabindex="2">Coding Ground</a>
      <br>
      
      <a href = "https://www.tutorialspoint.com/verbal_ability/index.htm" tabindex="4">Verbal Ability</a>
      <br>
      
      <a href = "https://www.tutorialspoint.com/quantitative_aptitude/index.htm" tabindex="3">Quantitative Aptitude</a>
      <br>
      
      <p>위 코드에서는 탭 순서를 변경했습니다. 키보드의 TAB 키를 눌러 그 변화를 확인해 보세요.</p>
   </body>
</html>

위 예제에서 링크는 화면에 표시된 순서와 관계없이 tabindex 값(1 → 2 → 3 → 4)에 따라 포커스가 이동합니다. 즉, 'Verbal Ability' 링크가 코드상으로는 세 번째에 있지만, tabindex="4"로 설정되어 마지막에 포커스를 받게 됩니다.

tabindex 값의 의미

  • 양수(1, 2, 3…): 지정한 숫자 순서대로 탭 이동이 진행됩니다. 작은 숫자가 먼저 포커스를 받습니다.
  • 0: 해당 요소는 탭 이동에 포함되지만, 문서 내 요소들의 기본 순서를 따릅니다.
  • 음수(예: -1): TAB 키 이동 시 제외되며, JavaScript 등으로만 프로그래밍 방식으로 포커스를 줄 수 있습니다.

탭 순서를 임의로 변경하면 키보드 사용자에게 혼란을 줄 수 있으므로, 가능하면 문서의 논리적 구조 순서와 일치하도록 tabindex를 사용하는 것이 접근성 측면에서 권장됩니다.