[접근성] tabIndex와 focus

접근성을 위해서는 탭 시퀀스를 만들고 이를 관리해야 합니다. 탭 시퀀스에 포함되는 엘리먼트의 특징은 다음과 같습니다.

• 대화형 컨텐츠

  <a>, <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select>, <textarea>
  
  특정 조건을 만족하는 경우 대화형 컨텐츠에 속하는 요소도 있습니다.
  

  • <audio>, controls 속성을 가진 경우
  • <img>, usemap 속성을 가진 경우
  • <input>, type 속성이 hidden이 아닌 경우
  • <menu>, type 속성이 toolbar인 경우
  • <object>, usemap 속성을 가진 경우
  • <video>, controls 속성을 가진 경우

• tabindex를 가진 요소들

  tabindex="0" - 엘리먼트 DOM에서의 위치에 따라 탭 시퀀스에 포합됩니다. (위의 대화형 컨텐츠들은 기본적으로 해당 값을 가집니다.)
  tabindex="-1" - 엘리먼트는 탭 시퀀스에 포함되지 않지만 element.focus()로 초점을 얻을 수 있습니다.
  tabindex="X", X는 1 <= X <= 32767 범위의 정수 - 1 이상의 값을 tabindex로 사용하게 되면 문서의 요소 순서가 사용자의 의도와 달리지 때문에 사용해서는 안된다.

음의 값은 특정 이벤트에만 나타나는 요소에 유용합니다. 사용자는 키보드를 계속 눌러도 접근할 수 없으나, 스크립트에서는 focus() 메서드를 호출해 포커스를 부여할 수 있기 때문입니다.

확인해야 하는 점

탭을 통한 이동과 화살표 키보드를 통한 이동 순서가 다른지

참고문헌

https://developer.mozilla.org/ko/docs/Web/Guide/HTML/Content_categories#%EB%8C%80%ED%99%94%ED%98%95_%EC%BD%98%ED%85%90%EC%B8%A0

https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/tabindex

https://mulder21c.github.io/aria-practices/#kbd_general_between

https://nuli.navercorp.com/community/article/1132726