웹 접근성(a11y) - 놓치고 있는 거대한 시장

 

웹 접근성(디지털 접근성)은 흔히 a11y로 줄여서 표기합니다.

장애가 있는 사람들도 웹사이트와 웹 앱을 의미 있고 동등하게 이용할 수 있도록 설계하고 개발하는 것을 말합니다.

많은 팀이 접근성을 "챙기면 좋은 배려" 정도로 생각합니다.

시간 여유가 있으면 하고, 일정이 빠듯하면 미루는 항목이요.

그런데 이건 배려의 문제가 아니라 숫자로 증명되는 비즈니스 문제에 가깝습니다.

놓치는 사용자 규모, 놓치는 매출만 생각해도 그렇습니다.

이렇게 들으면 뭔가 별도로 배워야 할 새로운 기술처럼 느껴지실 수도 있는데,

사실 접근성은 새로운 무언가를 더하는 작업도 아닙니다.

오히려 우리가 이미 쓰고 있는 HTML, CSS, 그리고 디자인 판단들을 '누구나 쓸 수 있는가'라는 기준으로 다시 점검하는 일에 가깝습니다.

---

왜 중요한가? - 놓치고 있는 거대한 시장

모든 사람들이 의미 있고 동등한 방식으로 상호작용할 수 있는 웹사이트와 웹 앱을 만드는 것이,
비즈니스와 법적으로 어떤 영향을 미칠까요?

 

세계보건기구(WHO)에 따르면 전 세계 인구의 15% 이상, 약 13억 명이 스스로 장애가 있다고 밝히고 있습니다.

전 세계에서 가장 큰 소수 집단인 셈이고, 인구 고령화와 만성질환 증가로 이 숫자는 계속 늘어나는 중입니다.

접근성이 없는 디지털 제품은 이 많은 사람들에게 실제로 영향을 줍니다.

비즈니스적 관점에서 얼마나 큰 시장인지 감이 오시나요?

때문에 장애가 있는 사용자들까지 포용하는 서비스는 비즈니스적으로 엄청난 가치가 있습니다.

 

그런데 장애 유형마다 디지털 세계에서 부딪히는 벽이 다 달라요. 하나씩 짚어보겠습니다.

---

장애 유형별로 마주치는 벽

1. 시각 장애

안경이나 약물 같은 일반적인 방법으로 교정되지 않는 수준으로 시력이 저하된 상태입니다.

• 예시 : 실명, 저시력, 색맹
• 사용 도구 : 스크린 리더, 화면 확대 도구, 점자 출력 장치
• 불편한 점 
  • 스크린 리더와 호환되지 않는 마크업
  • 핀치 투 줌이 막혀 있는 모바일 웹사이트 (손가락으로 확대 불가한 모바일 웹사이트)
  • 색상만으로 구분된 복잡한 그래프
  • 대비가 낮아 읽기 어려운 텍스트

"터무니없이 작은 글꼴 때문에 거의 사용하지 못하는 모바일 앱들이 꽤 있습니다"

 

 

2. 이동 장애

상하지 손실, 손의 정교한 움직임 장애, 신체 기관 간 협응 장애 등 다양한 신체적 장애를 포함합니다.

• 예시 : 관절염, 마비, 절단, 발작 장애
• 사용 도구 : 적응형 스위치, 시선 추적 장치, 음성 입력
• 불편한 점 : 마우스 사용만 전제로 설계된 인터랙션

"접근성은 장애인만을 위한 것이 아닙니다. 나는 팔꿈치 수술을 받았고, 그 기간 동안 일상적인 디지털 활동 방식이 일시적으로 바뀌었습니다."

 

3. 청각 장애

소리를 감지하거나 이해하는 능력이 완전히 또는 부분적으로 감소한 상태입니다.

• 예시 : 농(청각장애), 난청
• 사용 도구 : 보청기, 자막, 텍스트 스크립트, 수어
• 불편한 점 : 텍스트 스크립트 없는 오디오, 동기화된 자막 없는 영상

"어떤 청각장애인은 자동 자막이 없는 것보다 낫다고 하고, 또 어떤 사람은 차라리 없는게 낫다고 합니다. 형편없는 자동 자막을 보느니 차라리 자막이 없는 편이 낫다는 거죠"

 

4. 인지 장애

지적/인지적 결함, 뇌 손상이나 치매 같은 후천성 신경 퇴행 질환 등 다양한 의학적 상태를 포괄합니다.

• 예시 : 다운증후군, 자폐, ADHD, 난독증, 실어증
• 사용 도구 : 스크린 리더, 텍스트 하이라이팅, 텍스트 예측, 요약 도구
• 불편한 점 : 복잡하고 산만한 인터페이스, 여백 없이 빽빽한 텍스트, 양쪽 정렬 텍스트

"지금 안구 편두통에서 회복 중인데, 다크 모드도 도움이 안 됩니다. 대비는 여전히 필요하지만, 너무 강렬하지 않았으면 좋겠어요."

 

5. 발작 및 전정 장애

발작은 뇌의 과도한 전기 활동으로, 전정 장애는 균형과 안구 운동을 담당하는 내이, 뇌 부위의 손상으로 발생합니다.

• 예시 : 뇌전증, 어지럼증, 현기증, 미로염
• 사용 도구 : 동작 감소 운영체제 설정
• 불편한 점 : 자동 재생 영상, 강렬한 번쩍임/스트로브 효과, 패럴랙스 효과, 스크롤 애니메이션 (=> 인지 부조화를 일으킬 수 있는 효과들)

"iOS의 웹 전환 애니메이션이 너무 불필요하게 느껴져서 꺼뒀습니다. 단점은 웹의 섬세한 모션 디자인도 대부분 못 본다는 것이죠. '약간의 움직임은 괜찮아'라는 중간 설정 값이 없어서.."

 

6. 언어 장애

다른 사람과 소통하기 위한 말소리를 만들거나 형성하는 데 어려움이 있는 상태입니다.

• 예시 : 말실행증, 마비말장애, 말더듬
• 사용 도구 : 보완대체의사소통(AAC) 기기, 음성 생성 장치
• 불편한 점 : 스마트홈 기기, 음성 인식 앱 등 음성 활성화 기술

"아들이 운동실행증으로 발음이 부정확해요. '양'을 '앙'으로 발음하기도 합니다. 음성 인식 소프트웨어가 말을 이해하지 못할 때 아이가 너무 속상해합니다."

 

 

이렇게 장애 유형마다 필요한 것도, 불편한 지점도 전부 다릅니다.

그래서 접근성은 "스크린 리더만 지원하믄 끝" 처럼 단순하게 접근할 수 없습니다.

---

사실 수혜자는 훨씬 더 많다

접근 가능한 디지털 환경에서 이득을 보는 사람은 장애인만이 아닙니다.

• 일시적 장애인: 손목 골절, 약물로 인한 일시적 인지 저하
• 상황적 장애인: 화면 눈부심, 공공장소에서 소리를 켤 수 없는 상황
• 경미한 장애인: 화면 보려면 안경이 필요하거나, 이해하려면 자막이 필요한 경우
• 비원어민 화자: 언어가 능숙하지 않아 콘텐츠를 읽는 데 더 많은 시간이 필요한 경우
• 감각이 저하된 노인: 작은 글씨엔 돋보기, 손 떨림엔 큰 터치 버튼이 필요한 경우
• 검색엔진 봇(SEO): 시각·청각 없이 키보드로만 탐색하는 봇도 접근성 좋은 사이트를 더 잘 크롤링함

 

---

비즈니스, 법적으로도 무시하기 어렵다

 

2024년 기준 등록장애인만 263만 명으로 전체 인구의 5.1%를 차지하고, 

이 중 65세 이상 비율이 55.3%에 달할 만큼 고령화와 맞물려 장애인 인구는 계속 늘고 있습니다. 

여기에 스크린 리더가 필요한 저시력 노인, 손 떨림 때문에 작은 버튼을 못 누르는 어르신까지 더하면, 

실제로 '접근성 있는 서비스'가 필요한 사람은 등록장애인 숫자보다 훨씬 많아집니다.

2023년 장애인 실태조사에 따르면 장애인 가구의 월평균 소득은 306만 원으로, 전국 가구 평균의 63.3% 수준에 그칩니다.

그래서 한국에서 접근성 투자의 명분은 '큰손 고객을 잡는다'보다는

'이미 세계에서 가장 빠르게 늘고 있는 고령·장애 인구를 서비스에서 밀어내지 않는다'는 쪽에 더 가깝습니다.

고령화 속도가 유독 빠른 한국에서는 이 논리가 오히려 더 절박하게 다가오죠.

법적 리스크도 실재합니다. 

2008년 시행된 장애인차별금지법(장차법)은 국가기관뿐 아니라 민간 사업자에게도 

정보통신·의사소통에서 정당한 편의를 제공할 의무를 지웁니다. 

실제로 이 법 시행 이후 병원, 항공사 등을 상대로 웹 접근성 미비를 이유로 시정조치나 손해배상을 요구하는 소송이 제기된 사례들이 있고,

특히 병의원을 겨냥한 소송이 늘면서 개원가에 주의가 당부되기도 했습니다.

국가인권위원회에 진정 → 권고 → (미이행 시) 법무부 시정명령 → (불복 시) 행정소송으로 이어지는 구조이지요.

사후 대응 비용도 만만치 않아서, 홈페이지를 장애인도 이용할 수 있게 고치는 데만 평균 200만~500만 원이 든다고 추정됩니다.

소송 회피가 접근성의 유일한 이유가 되어서는 안 되지만, 분명 무시할 수 없는 이유이긴 합니다.

흥미로운 건, 장애인을 위해(혹은 장애인에 의해) 개발된 기술이 결국 모두의 일상 제품이 됐다는 점이에요. 

전화기, 타자기/키보드, 이메일, 자동문, 음성 제어, 시선 추적 기술까지- 접근성을 설계 과제로 바라볼 때, 혁신은 부산물로 따라옵니다.

실제로 장애 포용을 다양성 전략에 포함한 기업들이 그렇지 않은 기업보다 더 높은 성과와 혁신 지표를 보인다는 연구도 있습니다.

접근성에 투자한 팀이 자막, 음성 인터페이스, 큰 터치 타겟처럼 결국 모든 사용자의 경험을 함께 끌어올리는 기능을 먼저 만들게 되는 것도 같은 맥락입니다.

---

그래서 개발자는 뭐부터 하면 될까?

거창하게 시작할 필요 없습니다. 코드 몇 줄로 챙길 수 있는 것부터 살펴보겠습니다. ^^

 

의미 있는 마크업 쓰기

<div onclick> 대신 <button>,

제목은 <h1>~<h6>,

목록은 <ul>/<ol>처럼 태그 자체에 의미를 담으면 스크린 리더가 구조를 그대로 읽어줍니다.

<button aria-label="장바구니에 담기">
  <svg>...</svg>
</button>

 

포커스 상태 지우지 않기

스타일 커스텀이 필요한 경우에도 outline:none; 으로 지워버리고 끝내지 말고,

키보드 사용자를 위한 대체 스타일을 남겨둡시다.

button:focus-visible {
  outline: 2px solid #2684ff;
  outline-offset: 2px;
}

 

애니메이션은 취향이 아니라 옵션으로

위에 언급한 대로 발작 및 전정 장애가 있는 사람들에겐 움직임 자체가 불편할 수 있습니다.

prefers-reduced-motion을 체크해서 필요하면 애니메이션을 확 줄여줍시다.

/* css로 대응할 경우 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

//js로 대응할 경우
const motionOK = !window.matchMedia('(prefers-reduced-motion: reduce)').matches;

elem.animate(keyframes, {
  duration: motionOK ? 700 : 0,
});

 

색으로만 구문하지 않기

그래프나 상태 표시를 색상 하나에만 의존하면 색맹 사용자는 구분할 수 없습니다.

아이콘, 패턴, 텍스트 라벨을 함께 써줍시다.

 

텍스트는 도구와 함께

Lighthouse, axe DevTools, WAVE같은 도구로 명도 대비나 대체 텍스트 누락 같은 기본적인 문제는

빠르게 잡아낼 수 있습니다.

axe DevTools 링크

axe DevTools - Web Accessibility Testing - Chrome 웹 스토어

 

WAVE 링크

WAVE Web Accessibility Evaluation Tools

---

마치며

접근성을 챙긴다고 해서 화려한 기술을 새로 배워야 하는 건 아닙니다.

시맨틱 태그를 제대로 쓰고, 포커스를 지우지 않고, 움직임에 옵션을 주고, 색에만 의존하지 않는 것.

이미 알고 있는 것들을 조금 더 신경 써서 적용하는 문제에 가깝습니다.

그리고 이건 결국 숫자로 돌아오는 투자입니다.

"장애가 있는 소수를 위한 배려"라고 생각하면 우선순위에서 밀리기 쉽습니다.

하지만 "놓치고 있던 시장과 리스크를 관리하는 일"이라고 바꿔 생각하면,

접근성은 다음 스프린트가 아니라 지금 당장 백로그 맨 위에 올려둘 만한 가치가 있는 일인 것 같습니다.