이전 프로젝트에서 tabindex를 사용했을 때 너무 많은 사용으로 코드가 깔끔하지 못해서 개선사항에 대한 고민을 했다. 이후 프로젝트에 너무 몰두하다 보니 이에 대한 블로그를 작성한다는 것을 잊고 있었다... ([JS] tabindex를 사용해보니...)
프로젝트가 끝난 후 프로젝트에 대한 회고 겸 tabindex를 사용한 코드의 개선 방법에 대해 정리해보자.!
tabindex는 어떻게 사용되었는가?
결론부터 말하면 tabindex는 사용하지 않았다. tabindex를 사용하지 않은 이유는 다음과 같다.
- 스크린 리더를 고려해서 tabindex를 사용했지만 프로그램에 따라 다르기 때문에 tabindex로 포커스를 제어하는 것보다 마크업 순서를 지켜서 사용하는 것이 더 좋은 코드라고 생각
- tabindex를 사용하지 않아도 a 태그를 먼저 읽기 때문에 마크업 순서에 따라 되도록 사용하지 않는 것을 추천
- 웹 접근성과 키보드 접근성을 생각해서 tabindex를 사용했는데 불필요한 부분까지 tabindex를 사용한 것 같음 (링크로 연결되지 않은 곳에도 tabindex를 사용)
즉, tabindex로 포커스를 제어하는 것보다 마크업 순서를 지키는 것이 더 좋은 코드라고 생각이 되어 tabindex를 사용하지 않았다.
키보드 접근성과 스크린 리더를 같은 개념으로 생각을 해서 tabindex를 사용하였다. 키보드 접근성은 웹 페이지를 마우스 없이 키보드를 사용해서 필요한 작업을 수행하는 것이다. 스크린 리더는 시각 장애인을 위한 보조 기술로, 웹 페이지의 텍스트 및 컨텐츠를 음성으로 읽어주는 것이다. 각 다른 개념을 가진 것을 합쳐서 생각하니 tab으로 불필요한 내용을 tabindex를 통해 강제로 제어하게 되고 코드가 깔끔하지 않게 된 것이다.
웹 접근성을 고려하면서 마크업 순서를 지키기 위해 tabindex 없이 키보드 접근성과 스크린 리더를 고려한 프로젝트를 진행하였다.
회고를 하며...
웹 접근성을 고려하여 고대비 겸 다크모드, 키보드 접근성, 스크린 리더, 스킵 네비게이션을 사용하였지만 회고를 했을 때 웹 접근성에 대한 개념이 부족하다고 느꼈다. 개발자는 여러 사용자가 동등하게 접근하여 사용할 수 있도록 개발해야 한다고 생각하는데 그 기본이 부족하다는 생각이 들어 추후 웹 접근성에 대한 공부를 해야겠다는 생각이 들었다.
