tab 순서 좀 변경해주세요

제가 만드는 프로젝트는 자동차 회사의 부품관련하여 국내 공장에서 쓸 프로젝트였다.

일반 사용자도 있겠지만 그렇지 않은 분도 사용하는 시스템이여서 수정해야 하는 부분이 있었다.

 

예시로 쿠팡 로그인 하는 페이지로 예를 들것입니다.

보통 사용자가 보기에는 id와 password를 입력하면 들어가는 일반적인 로그인 창으로 볼 수 있지만, 수정 해야 하는 부분이 있었다.

 

 

마우스가 아닌 tab 키를 눌러 사용하는 분들을 위해 입력 순서대로 focus가 이동이 되어야 접근성이 좋다는 평가를 받는다.

크롬, 파이어폭스 에서는 어느정도 지원을 받지만, 콘텐츠 종류에 따라 기본적으로 지원되는 게 있고 안되는게 있고 순서도 엉망이라 좋은 화면이라고는 표현할 수 없다.

 

그래서 tabIndex을 넣어 순서를 넣어주는것이였다.

 

 

하지만 tabIndex는 대화형 콘텐츠 (a 태그, button 태그)에서는 사용자와 상호관계를 위한 곳에서는 사용를 권장하지는 않는다.

그래서 div 나 span 같은 곳에 사용하는 것을 권장하고 있습니다.

 

 

 

focus가 되는건데 넣고 싶지 않으면 tabIndex="0" 으로 두며 사용하면 된다.

tabIndex는 32768 까지 지정이 가능하면 -1 음수로 두면 를 읽게 된다.

 

tabindex속성이 키보드 사용자를 위한 웹 콘텐츠의 유용성을 파괴할 수 있습니다.

위에서 말했듯 어느정도의 tab순서는 HTML의 소스 순서에 따라 결정할 뿐더러, tabIndex를 남용하게 되면 순서가 꼬여 버려 더 키보드 상호 작용이 더 않좋아 질 수 있기 떄문입니다.

 

 

그러면 여기서 궁금한 점이 있을 것이다.

대화형 콘텐츠에서는 왜 권장하지 않은 것까?

 

대화형 콘텐츠 요소는 보통 ARIA가 관리하는, 접근성 기술에 알려줄 수 있는 자신의 역할과 상태를 내장되어 있기 때문이다.

 

ARIA?

 

 

접근가능한 리치 인터넷 어플리케이션(Accessible Rich Internet Applications, ARIA) 은 장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션을 더 쉽게 접근할 수 있는 방법을 정의한것이다.

 

HTML4에서는 직접 사용하여 하는 경우가 많아지만 HTML5에서는 많은 위젯들이 통합되어, 요즘같은 경우에는 ARIA보다는 HTML 자체에 집중하를 하는 추세이다.

그리하여 ARIA를 써서 기존의 HTML 기능이 만약 되지 않는다면 그건 개발자의 책임이라고 볼 수 있다.

이런 경우에는 사용하지 않는 편이 더 좋다.

 

더 자세한건 다음 포스트에 적어 두도록 하겠다.

 

역시 실무경험을 역으니 예상하지 못한 부분까지 고려하게 되고 HTML말고도 다른 부분을 알게 되어 뜻 깊은 시간이였다.