a 태그 키보드 tab 활성화 / 비활성화

a 태그 키보드 tab 활성화 / 비활성화

 

접근성이 강조되는 요즘 키보드로 인한 웹접근성이 강조된다.

스크립트로 적용하는 방법과 html 태그안에 옵션을 넣어 적용하는 방법이 있는데

여기서는 html 태그안에 옵션을 삽입하는 방법으로 한다.

tabindex

// Tab키를 눌렀을 때 focus를 받을 수 있는 요소가 focus를 못 받도록 변경
tabindex = "음수"

// Tab키를 눌렀을 때 focus를 받지 못하는 요소가 focus를 받도록 변경
tabindex = "0"

// Tab키를 눌렀을 때 focus를 받는 순서를 첫번째로 변경
tabindex = "양수"

 찾아보니 위와 같이 설명이 나와있는데

예제를 보면서 확인하자.

 

적용 예제

//탭키 제외
<a herf="#none" tabindex="-1">링크</a>

//탭키 적용
<p tabindex="0">링크</p>

//탭키 순서대로 적용
<a herf="#none" tabindex="1">링크순서1</a>
<a herf="#none" tabindex="2">링크순서1</a>
<a herf="#none" tabindex="3">링크순서1</a>

생각 외로 간단하다.

코드가 지저분해 지는 것 같지만 스크립트로 제어하는것 보단 훨씬 편리하다.