웹 접근성에 대해 고민해보고 적용해보기 - tabindex

웹 접근성

모든 사용자가 신체적, 환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것을 의미한다.

 

웹 접근성, 여러차례 들어 봤기에 아주 대략적으로만 알고있었지 웹 접근성을 고려한 코드를 작성하는 것은 실천해본 적이 없었다.

내게는 너무 당연하다고 생각해왔던 것들이 누군가에게는 당연하지 않을 수 있음을 얼마 전 시각 장애인 유튜버 영상을 보고 깊게 깨닫는 계기가 되었다. 현재 내가 개발하고 있는 웹 사이트 혹은 더 나아가 언젠가 내가 개발하게될 웹 서비스들에서도 '당연하다'고 생각해왔던 부분이 나도 모르게 누군가를 차별하고 있을 수도 있겠다는 생각이 들어 웹 접근성에 대해 고민해보고 적용해보기로 했다.

 

물론 당장 모든 웹 접근성을 고려하는 것은 힘들겠지만, 생각만 하고 그치는 것보다는 일단 실천해보고 이러한 부분에서 더 고민해볼 수 있는 경험이 더 중요하다고 생각했다. 그러다보면 사용자를 차별하지 않는 웹 개발자로 성장할 수 있지 않을까?

내가 지금 적용해볼 수 있는 게 뭐가 있을까...하다가 현재 진행중인 취준용 사이드 프로젝트에 적용해보기로 했다.

 

첫 번째 목표 설정 💙

너무 많은 것을 다 시도하려고 욕심을 부리면 이도 저도 안되거나 포기하기 쉽다는 것을 잘 알고 있기에 작은 것 하나부터 실천해보기로 했다. 우선, 나의 사이드 프로젝트 로그인 페이지를 시작으로 모든 기능을 tab키로 이동 가능하도록 하는 것이 이번 목표이다.

 

한국형 웹 콘텐츠 접근성 지침 2.2 - 운용의 용이성

---

타 사이트에서는 웹 접근성을 어떻게 반영했을까? 🤔

당장은 tab 키 이동 적용을 반영할 생각이니 tab키를 이용해 사이트를 사용해보기로 했다.

네이버에서 탭 키를 눌러보고 와.. 이거구나..!!! ㅋㅋㅋ 역시 대기업인가..!

메인페이지는 뭐 말할 것 없이 탭 키로 거의다 접근이 가능했던 것 같다. 다른 페이지도 마찬가지였긴하지만.

 

현재 내가 개발중인 페이지는 어떨까....? ㅋㅋㅋㅋㅋㅋㅋ ꉂꉂ(ᵔᗜᵔ*)

너무 당연하게도 기본적으로 포커싱이 잡히는 인풋과 버튼 이외의 모든 요소는 탭 키로 접근이 불가능했다... 아앗..ㅋㅋㅋㅋㅋㅋㅋ

네이버(좌) / 현재 개발 중인 사이드 프로젝트(우)

Tab index

스크린 리더 사용자를 위해 키보드 탭 키를 눌렀을 때 요소가 포커스되고 이동 될 수 있도록한다.

숫자가 작을수록 우선순위가 높은데 음수 값(-1)을 주게 되면 포커스를 잃게 되고, 0인 경우에는 포커스가 없는 요소에게 포커스를 부여할 수 있다. 웹 접근성에는 요소의 순서도 중요하기 때문에 함부로 인덱스를 낮은 순서로 변경해서는 안된다는 것 같다.

 

필요한 부분에 tabIndex 속성을 추가했다.

와 신세계..ㅋㅋㅋ 이렇게 간단하게 속성 하나 추가해도 키보드 접근이 가능한 걸 안하고 있었다니..ㅠㅠ

이제 접근성에 대해 관심을 갖게 되었으니 이 작은 실천이 나비효과를 일으키기를..! 😮

---

참고 자료

키보드 접근성을 고려한 tabindex의 사용

한국형 웹 콘텐츠 접근성 지침 2.2

웹 접근성