본문 바로가기

프로그래밍

웹 접근성의 시작

반응형

웹 접근성이라고 하면 왠지 “이거 나랑 상관 있나…?” 싶은 느낌이 먼저 듭니다.

하지만 생각보다 접근성은 아주 사소한 것부터 시작한다는 걸 알게 되었습니다.


접근성은 장애인을 위한 것만은 아니다

접근성 얘기하면 보통 이런 말부터 나옵니다.

“시각 장애인을 위해서”
“스크린 리더를 위해서”

물론 맞는 말입니다.
근데 그게 전부는 아닙니다.

  • 마우스 없이 키보드로만 사용하는 사람
  • 노트북 트랙패드가 고장 난 상태
  • 햇빛 때문에 화면이 잘 안 보이는 상황
  • 모바일에서 한 손으로 조작하는 사용자

이런 경우들도 전부 접근성과 연결되어 있습니다.

생각해보면 “불편한 UI”라고 느꼈던 경험들 대부분이 접근성과 아주 가까운 문제였습니다.


내가 무심코 만들었던 UI들

개발하면서 이런 거, 한 번쯤 다 해봤을 겁니다.

  • placeholder만 있는 input
  • div로 만든 버튼
  • 클릭은 되는데 키보드로는 안 되는 요소
  • 포커스가 어디 있는지 안 보이는 화면

눈으로 볼 때는 멀쩡하고 디자인도 문제 없어 보입니다.

근데 조금만 다른 방식으로 사용하면 바로 불편해집니다.


접근성은 생각보다 작은 것부터 시작한다

접근성을 다시 보게 된 건 “모든 걸 고쳐야 해서”가 아니라

고칠 수 있는 게 생각보다 작다는 걸 알았기 때문입니다.

예를 들면 이런 것들.

1. input에 label 붙이기

 
<label for="email">이메일</label> <input id="email" type="email" />

2. 클릭 요소에 키보드 포커스 보이게 하기

 
button:focus { 
	outline: 2px solid #333; 
}

3. div 대신 button 쓰기

<button>확인</button>

이 정도만 해도 접근성 검사 도구에서 경고가 눈에 띄게 줄어듭니다.


접근성 = 귀찮음 ❌ / 보험 ⭕️

예전엔 이렇게 생각했습니다.

“이거까지 신경 쓰면 일이 너무 많아지는데…”

근데 지금은 생각이 좀 바뀌었습니다.

  • QA 지적 줄어듦
  • “왜 클릭 안 돼요?” 같은 질문 감소
  • 나중에 고칠 일 줄어듦

접근성은 한 번 해두면 계속 이득 보는 보험에 가깝습니다.

반응형