목차21개 항목
출처와 참고
WebAIM의 「Introduction to Web Accessibility」, 「Visual Disabilities」, 「Auditory Disabilities」, 「Motor Disabilities」, 「Cognitive Disabilities」, 「Seizure and Vestibular Disorders」, 「Considering the User Perspective」, 「Web Accessibility Gone Wild」 등을 바탕으로 재구성하고, 말하기 장애·일시적 장애와 보조 기술 분류는 web.dev 「Learn Accessibility」의 필요성·보조 기술 테스트 편으로 보강한 노트다. 스크린 리더 사용자의 구성과 포인터를 쓰는 운동 장애 사용자 부분은 WebAIM의 교육 자료 「Web Accessibility Training」(Jon Whiting·Jared Smith, 2024.01)을 바탕으로 보강하고, 수치는 「Screen Reader User Survey #11」(2026)로 확인했다.
왜 장애 유형으로 보나
웹은 장애가 있는 사람에게 다른 사람에게 기대지 않고 정보를 얻고, 사고, 소통하게 해 준 매체다. 시각장애인은 인쇄 신문 대신 스크린 리더로 기사를 바로 읽고, 손을 못 쓰는 사람은 마우스 스틱이나 시선 추적으로 컴퓨터를 다룬다. 그런데 마우스로만 되는 메뉴, 자막 없는 영상 하나가 그 독립을 다시 빼앗는다.
장벽을 없애려면 먼저 사용자가 무엇을 못 하는지가 아니라 어떻게 쓰는지를 알아야 한다. "시각장애인은 화면을 보지 못한다"를 떠올리면 대체 텍스트, 표 머리글, 폼 라벨이 왜 필요한지 따로 외우지 않아도 따라 나온다. WCAG의 네 원칙(인지·운용·이해·견고)도 이런 사용자 관점에서 나왔다(WCAG와 POUR 원칙).
세계보건기구는 전 세계 약 13억 명(인구 6명 중 1명)이 상당한 장애를 겪는다고 추정한다. 장애를 능력과 환경의 불일치로 보는 사회적 정의는 웹 접근성에 있다.
| 유형 | 범위 | 핵심 원칙 | 주로 쓰는 수단 |
|---|---|---|---|
| 시각 | 전맹, 저시력, 색각 결핍 | 인지 가능 | 스크린 리더, 점자 디스플레이, 화면 확대, 고대비 |
| 청각 | 농, 난청 | 인지 가능 | 자막, 대본, 수어 |
| 운동 | 마우스를 못 씀, 느린 반응, 미세 조작 어려움 | 운용 가능 | 키보드, 스위치, 음성 인식, 시선 추적 |
| 인지 | 기억·문제 해결·주의·읽기·수리·시각 이해의 어려움 | 이해 가능 | 쉬운 글, 일관된 구조, 그림·영상 보조, 읽어 주기 |
| 발작·전정 | 광과민성 뇌전증, 어지럼증 | 운용 가능 | 움직임 줄이기 설정 |
| 말하기 | 실행증, 구음 장애, 말더듬 | 운용 가능 | 보완·대체 의사소통(AAC) 기기, 음성 생성 기기, 키보드 입력 |
장애는 영구적이기만 하지 않다
같은 어려움이 영구적·일시적·상황적으로 생긴다. 한 팔이 없는 사람, 팔을 다친 사람, 아기를 안고 있는 사람은 모두 한 손으로 기기를 쓴다. 장애 통계에 잡히지 않는 이런 사용자도 접근성의 혜택을 본다.
| 사용자 | 예 |
|---|---|
| 일시적 장애 | 손목 골절, 약 때문에 생긴 집중력 저하 |
| 상황적 제약 | 햇빛에 반사되는 화면, 소리를 켤 수 없는 공공장소 |
| 가벼운 장애 | 안경이 필요한 사람, 자막을 켜고 보는 사람 |
| 모국어가 아닌 사람 | 읽는 데 시간이 더 걸린다 |
| 고령자 | 시력·손 감각이 떨어지고 떨림이 생겨 더 큰 대상이 필요하다 |
| 검색 엔진 봇 | 키보드 사용자처럼 링크와 구조를 따라가므로 접근 가능한 사이트를 더 잘 읽는다 |
보조 기술의 범위
보조 기술(assistive technology)은 장애가 있는 사람이 어떤 일을 하는 능력을 늘리거나 유지하게 돕는 모든 도구다. 스크린 리더만이 아니다.
| 분류 | 예 |
|---|---|
| 저기술(low-tech) | 헤드·마우스 스틱, 손 돋보기, 큰 버튼 기기 |
| 고기술(high-tech) | 음성 인식 기기, 시선 추적 장치, 적응형 키보드·마우스 |
| 하드웨어 | 스위치, 인체공학 키보드, 점자 디스플레이 |
| 소프트웨어 | 화면 읽기(TTS), 실시간 자막, 스크린 리더, 화면 확대 |
정체성과 말
장애를 부르는 말은 당사자마다 선호가 다르다. 영어권에서는 농인 공동체의 구성원이 문화적 정체성을 드러낼 때 대문자 Deaf, 청력 손실이라는 상태를 말할 때 소문자 deaf를 쓰는 식으로 구분한다. Blind, Autistic도 같은 방식으로 쓰는 사람이 있다. 기준은 당사자가 스스로를 부르는 말이다.
시각 장애
전맹: 스크린 리더와 키보드
법적 실명은 교정 시력 20/200 이하이거나 시야가 20도 이하인 상태다. 남은 시력이 있어도 화면을 쓰기에는 부족한 경우가 많아, 모니터와 마우스 대신 스크린 리더와 키보드를 쓴다.
| 스크린 리더로 하는 일 | 마크업이 해 줘야 할 일 |
|---|---|
| 처음부터 한 줄씩 듣기 | 소스 순서가 읽는 순서다. CSS 배치와 무관하게 논리적이어야 한다 |
| Tab으로 링크·폼 컨트롤만 옮겨 다니기 | 링크 텍스트가 맥락 없이도 뜻이 통해야 한다 |
| 제목·랜드마크 단위로 건너뛰기 | h1~h6, <main>·<nav> 같은 구조가 있어야 한다 |
| 링크 목록만 모아 보기 | "여기를 클릭", "더 보기"가 여럿이면 구분되지 않는다 |
| 모바일에서 스와이프·터치로 탐색 | 터치 제스처에 기대는 기능에도 대안이 있어야 한다 |
- 대표 스크린 리더는 JAWS·NVDA·Narrator(Windows), VoiceOver(macOS·iOS), TalkBack(Android)이다. 조작법은 스크린 리더로 테스트하기에 있다.
- 농맹인은 스크린 리더 출력을 점자 디스플레이(핀이 오르내리며 점자를 만드는 장치)로 손끝으로 읽는다.
- 스크린 리더는 이미지를 해석하지 못한다. 그래서 이미지에는 대체 텍스트가, 화면 배치로 보이던 관계에는 시맨틱 구조가 필요하다.
- 마우스는 눈과 손의 협응이 필요해 쓸 수 없다. 모든 기능이 키보드로 되어야 한다(키보드 접근성과 포커스 관리).
스크린 리더 사용자가 모두 전맹은 아니다. WebAIM 스크린 리더 사용자 설문 #11(2026)에서 응답자(복수 선택)의 83.2%가 전맹, 18.0%가 저시력, 3.0%가 인지·학습 장애를 꼽았고, 5%가량은 장애 없이 스크린 리더를 쓴다. 화면을 보면서 소리로 듣는 사용자가 적지 않으므로 보이는 것과 들리는 것이 같아야 한다(보이는 레이블이 접근 가능한 이름에 들어가야 하는 이유. ARIA와 접근 가능한 이름).
저시력: 확대와 대비
저시력은 안경으로 정상 시력에 가깝게 교정되지 않는 상태다. 나이가 들며 흔해지지만 유전·외상·질병으로 어느 나이에나 생긴다. 원인에 따라 보이는 방식이 다르다.
| 질환 | 보이는 방식 | 웹에서 어려운 것 |
|---|---|---|
| 황반변성 | 시야 중심이 흐리거나 어둡다 | 정면의 글자를 읽기 어렵다. 주변 시야로 읽는다 |
| 녹내장 | 주변 시야를 잃고 중심도 흐리다. 빨대로 보는 느낌 | 넓은 화면의 일부만 보인다 |
| 당뇨병성 망막병증 | 시야 곳곳에 검은 얼룩 | 글자 일부가 가려진다 |
| 백내장 | 수정체가 뿌옇게 흐려진다. 밝은 빛에서 심하다 | 글자와 배경 구분이 어렵다. 높은 대비가 특히 중요하다 |
저시력 사용자는 대부분 화면을 직접 본다. 주로 쓰는 수단과 그에 맞는 설계는 이렇다.
| 사용자가 하는 일 | 설계가 지킬 것 |
|---|---|
| OS 확대 기능(Windows 돋보기, macOS 확대/축소)으로 화면 일부를 키운다 | 관련 정보를 멀리 떨어뜨리지 않는다. 확대한 시야 밖에 다음 단계가 뜨면 찾지 못한다 |
| 브라우저 확대·기본 글자 크기를 키운다 | 키워도 내용과 기능이 사라지지 않고, 가로 스크롤 없이 줄이 화면 안에서 접힌다(리플로). 반응형 디자인이 곧 확대 대응이다 |
| 글자 이미지를 확대한다 | 래스터 이미지 속 글자는 깨진다. 진짜 텍스트를 쓴다 |
| 고대비 모드나 사용자 색 설정으로 색을 덮어쓴다 | 작성자가 정한 색이 보이지 않을 수 있다. 색만으로 의미를 전하지 않는다 |
| 특정 색 조합(예: 노랑 바탕에 파랑 글자)이 필요하다 | 순수한 검정과 흰색 조합은 오히려 눈부실 수 있다. 기준을 넘으면서 편한 조합을 찾는다 |
확대·리플로·글꼴 기법은 접근성을 위한 CSS와 타이포그래피에, 대비 수치와 다크 모드는 색과 움직임의 접근성에 있다.
색각 결핍
망막의 원뿔세포 일부가 없거나 제대로 동작하지 않아 특정 색 쌍을 구분하기 어려운 상태다. 대부분 많은 색을 보며, 밝기 차이는 구분한다.
| 유형 | 영향 받는 원뿔세포 | 헷갈리는 색 |
|---|---|---|
| 제1색각 이상(protanopia·protanomaly) | 빨강 | 빨강과 초록. 빨강이 더 어둡게 보인다 |
| 제2색각 이상(deuteranopia·deuteranomaly) | 초록 | 빨강과 초록. 가장 흔한 적록 계열 |
| 제3색각 이상(tritanopia·tritanomaly) | 파랑 | 파랑과 초록, 노랑이 옅은 빨강처럼 보이거나 사라짐. 드물다 |
| 전색맹(achromatopsia) | 원뿔세포 전부 | 모든 색이 회색조. 시력이 낮고 밝은 빛에 민감하다. 매우 드물다 |
색을 없앨 필요는 없다. 노선별 색만 다른 지하철 노선도처럼 색이 유일한 구분 수단일 때만 문제다. 선 모양·레이블·본문 설명을 더한다. 전맹 사용자도 색을 보지 못한다는 점까지 생각하면 원칙은 하나로 모인다. 자세한 기준은 색과 움직임의 접근성에 있다.
청각 장애
| 정도 | 상태 |
|---|---|
| 경도 | 배경 소음이 있으면 대화를 알아듣기 어렵다 |
| 중등도 | 조용해도 보통 말소리를 대부분 알아듣기 어렵다. 보청기가 필요할 수 있다 |
| 고도 | 큰 말소리도 어렵다. 수어나 입 모양 읽기에 기댄다 |
| 심도 | 큰 소리도 지각하지 못한다 |
- 보통 경도·중등도를 난청(hard of hearing), 고도·심도를 농(deaf)이라 부른다.
- 원인에 따라 감각신경성(내이·신경, 대부분을 차지), 전음성(외이·중이), 청각 처리 장애(소리는 들리지만 뇌가 말로 해석하지 못함), 혼합성으로 나눈다.
- 고음역·저음역만 안 들리는 경우, 특정 소리가 고통스러울 만큼 크게 들리는 청각과민(hyperacusis), 없는 소리가 들리는 이명(tinnitus)도 있다. 볼륨만의 문제가 아니다.
농문화(Deaf culture)도 알아 둔다. 평생 농인으로 산 사람 중에는 스스로를 장애인이 아니라 수어를 쓰는 언어적·문화적 소수자로 여기는 이들이 많다. 이들에게 문자 언어는 제2언어라서 복잡한 문장이 어려울 수 있다. WebAIM의 「Deaf Culture」에 따르면 입 모양 읽기는 오랜 훈련 뒤에도 말의 40~60% 정도만 확실히 알아보고 나머지는 짐작으로 채운다.
| 할 일 | 이유 |
|---|---|
| 영상에 동기화된 자막 | 소리를 못 듣는 사용자의 기본 수단. 소리 없이 보는 사람에게도 쓸모 있다 |
| 오디오에 대본 | 팟캐스트처럼 화면이 없는 콘텐츠의 대체 수단 |
| 실시간 행사에 실시간 자막 | 녹화본 자막만으로는 생중계를 따라가지 못한다 |
| 깨끗한 음질, 배경 소음 줄이기 | 난청 사용자 상당수는 남은 청력으로 소리를 듣거나 자막과 함께 듣는다 |
| 대상 사용자에 맞으면 수어 영상 | 수어는 나라마다 다른 별개의 언어다(한국수어, ASL, BSL 등). 국제 공용 수어는 없으니 자막을 대신하지 못한다 |
자막·대본·음성 해설의 품질 기준은 자막, 대본, 음성 해설에 있다.
운동 장애
운동 장애의 핵심 원칙은 운용 가능성이다. 모두가 마우스를 쓰거나, 작은 링크를 누르거나, 움직이는 요소를 제때 조작할 수 있지는 않다.
| 원인 | 웹 사용에 주는 영향 |
|---|---|
| 척수 손상 | 하반신 마비는 웹 사용에 큰 지장이 없다. 사지 마비는 마우스·키보드를 못 쓸 수 있다 |
| 팔·손 상실 | 한 손이면 한 손 키보드로, 양손이 없으면 헤드 완드·마우스 스틱·음성 인식으로 |
| 뇌성마비 | 근육 경직·불수의 운동. 마우스 조작이 특히 어렵고, 말이 느려 음성 인식도 어려울 수 있다 |
| 근이영양증, 근위축성 측삭경화증(ALS) | 근육이 점점 약해진다. 쓸 수 있는 수단이 시간에 따라 바뀐다 |
| 다발성 경화증 | 떨림·무감각·경직 등 증상이 사람마다, 시기마다 다르다 |
| 관절염 | 통증으로 미세 조작이 어렵고 금방 지친다 |
| 파킨슨병, 본태성 떨림 | 조절되지 않는 떨림. 목소리까지 떨려 음성 인식이 안 될 때도 있다 |
운동 장애 사용자가 모두 키보드만 쓰는 것은 아니다. 손재주가 떨어지거나 떨림·만성 통증이 있는 사람 상당수는 마우스·터치스크린을 그대로 쓰되 정확히 겨누기 어렵다. 시선 추적처럼 마우스처럼 동작하는 보조 기술도 있고, 음성 제어로 화면의 이름을 말해 누르는 사람도 있다. 그래서 키보드 지원과 함께 누를 대상의 크기와 간격, 드래그·경로 제스처의 대안이 필요하다. 키보드를 쓰는 쪽은 스크린 리더 사용자, 일부 저시력 사용자, 포인팅 장치가 가능하지만 느리거나 아픈 운동 장애 사용자, 그리고 효율을 위해 쓰는 숙련 사용자다.
보조 기술
보조 기술은 수천 가지지만 대부분 키보드를 쓰거나 키보드 동작을 흉내 내거나, 마우스·터치 입력을 대신한다. 그래서 개발자가 할 일은 특정 입력 방식에 기대지 않는 것이다.
| 기술 | 방식 |
|---|---|
| 마우스 스틱, 헤드 완드 | 입에 물거나 머리에 쓴 막대로 키를 누른다. 싸고 단순해 흔하다. 키 입력이 많으면 지친다 |
| 단일 스위치, 들숨·날숨(sip-and-puff) 스위치 | 머리 움직임이나 숨으로 켜고 끄는 신호 하나를 보낸다. 소프트웨어가 화면 항목을 차례로 훑어 주면 원하는 때 누른다. iOS·Android는 스위치 제어를 기본으로 갖췄다 |
| 큰 트랙볼 | 커서를 옮긴 뒤 누를 때 커서가 흔들리지 않아 떨림이 있는 사람에게 편하다. 발이나 마우스 스틱으로도 굴린다 |
| 적응형 키보드, 키보드 오버레이 | 키 사이가 솟아 있어 손을 얹고 미끄러뜨려 정확한 키를 누른다. 단어 자동 완성으로 입력 횟수를 줄인다 |
| 시선 추적 | 눈 움직임만으로 포인터를 옮기고 입력한다. 손을 거의 못 쓰는 사람의 강력한 대안이다 |
| 음성 인식 | 말로 명령하고 받아쓴다. Dragon 같은 전용 제품과 macOS·iOS 음성 제어, Windows 음성 액세스 같은 OS 내장 기능이 있다. 화면에 보이는 버튼 이름을 말해 누르므로 보이는 라벨과 접근 가능한 이름이 같아야 한다 |
설계에서 지킬 것
| 어려움 | 해결 |
|---|---|
| 마우스를 쓰지 못한다 | 모든 기능을 키보드로. Tab으로 링크와 컨트롤을 끝까지 돌아 본다 |
| 마우스·키보드를 정확히 다루지 못한다 | 클릭 대상을 크게, 위치는 고정. 대상은 24×24 CSS px 이상이거나, 대상마다 가운데에 지름 24px 원을 그렸을 때 원끼리·다른 대상과 겹치지 않을 만큼 떨어뜨린다(2.5.8, AA. 44×44는 AAA인 2.5.5). 삭제처럼 되돌릴 수 없는 동작은 확인을 묻는다. 한 글자 단축키는 끄거나 바꿀 수 있게 한다 |
| 음성 인식을 쓴다 | 마우스 흉내는 느리다. 키보드로 다 되게 하고, 링크·버튼 텍스트를 구체적으로 쓴다 |
| 보조 기술을 오래 쓰면 지친다 | 긴 링크 목록·반복 메뉴를 건너뛸 수단을 준다 |
| 기기를 직접 움직이거나 돌리지 못한다 | 가로·세로 방향을 모두 지원한다. 흔들기 같은 기기 동작이나 스와이프·드래그 같은 경로 제스처만으로 되는 기능을 두지 않는다 |
| 반응이 느리다 | 시간제한을 없애거나 늘릴 수 있게 한다 |
인지 장애
인지 장애는 가장 흔하면서 가장 덜 이해된 장애 유형이다. 학습 장애, 읽기 장애, 주의력 결핍까지 포함하면 다른 모든 유형을 합친 것보다 많다. 반면 연구가 적고 권고가 모호해서, 자동 검사 도구도 대부분 시각 장애 쪽 문제만 찾는다.
진단명보다 기능으로 본다
자폐, 다운증후군, 외상성 뇌손상, 치매, ADHD, 난독증, 난산증 같은 진단명은 치료에는 쓸모 있지만 개발자에게는 무엇을 하라는 말이 아니다. 같은 진단 안에서도 능력 차이가 크고, 서로 다른 진단이 같은 어려움을 낳는다. 그래서 웹 접근성에서는 기능적 분류를 쓴다.
| 기능 영역 | 웹에서 생기는 문제 | 설계 대응 |
|---|---|---|
| 기억 | 어떻게 여기 왔는지 잊는다. 오류 메시지 여러 개를 고치기 전에 잊는다 | 일관된 내비게이션, 브레드크럼, "4단계 중 2단계" 같은 진행 표시, "다음" 대신 "다음: 주문 확인" 같은 구체적 링크 |
| 문제 해결 | 깨진 링크, 기술 용어 오류, 어려운 CAPTCHA 앞에서 바로 포기한다 | 무엇이 틀렸고 어떻게 고치는지 알려 주는 오류 메시지, 검색어 철자 제안, 되돌릴 수 없는 동작 전 경고, 예상 밖 맥락 변화 금지, CAPTCHA 대신 다른 인증 수단 |
| 주의 | 자동 캐러셀, 토스트, 흔들리는 아이콘, 갑작스러운 팝업에 과제를 놓친다 | 주요 콘텐츠 밖 움직임·광고 줄이기, 제목과 여백으로 시선 모으기, 배경 소리 없애기 |
| 읽기·언어 이해 | 긴 문장, 비유·반어·관용구를 글자 그대로 받아들인다. 글쓴이가 생략한 배경을 채우지 못한다 | 짧고 분명한 문장, 비유적 표현 피하기, 필요한 배경 설명, 그림·영상 보조, 제목·목록으로 덩어리 나누기 |
| 수리 이해 | 수식과 계산이 어렵다 | 수식만 두지 말고 개념을 말로도 설명한다 |
| 시각 이해 | 사진 속 사람을 사람으로 알아보지 못하기도 한다 | 정지 이미지보다 말하는 영상이 쉬울 수 있다. 한 가지 방식에만 기대지 않는다 |
인지 접근성의 원칙
| 원칙 | 뜻 |
|---|---|
| 단순 | 과제와 화면을 꼭 필요한 만큼만. 긴 폼은 짧은 여러 단계로 |
| 일관 | 같은 요소는 같은 이름·위치·동작. 링크 표시 방식도 사이트 전체에서 같게 |
| 명확 | 쉬운 말, 핵심은 문단 첫 문장에, 맞춤법이 맞는 글 |
| 다중 감각(multi-modal) | 같은 내용을 글·그림·소리·영상 중 둘 이상으로. 글자를 읽어 주는 TTS가 가능하도록 모든 내용을 텍스트로도 둔다 |
| 오류 허용 | 실수를 되돌리고, 선택을 확인하고, 입력 오류를 쉽게 고치게 |
| 지연 허용 | 짧은 만료 시간, 자동 새로 고침, 시간 제한 리디렉션을 피하고, 필요하면 연장을 묻는다 |
| 주의 집중 | 산만한 배경·움직임 대신 굵기·크기·여백으로 중요한 것을 띄운다 |
종이접기 설명을 글로만 읽고 따라 해 보면 이 원칙들의 이유를 체감한다. 글만으로는 헷갈리던 단계가 완성 사진과 단계별 그림 하나로 풀린다. 인지 접근성 기법의 상당수는 효과적인 소통 기법이기도 하다. 다만 그림을 더하면 시각 장애 사용자를 위한 대체 텍스트나 더 자세한 글 설명도 함께 둬야 한다. 한 장애를 위한 해법이 다른 장애를 막지 않게 한다.
페이지가 아니라 과제 흐름으로 본다
인지 접근성은 자동 판정이 어렵다. "쉬운 글"의 경계가 없기 때문이다. 그래서 평가 단위를 넓혀 본다.
- 템플릿과 본문을 나눈다. 로고의 대체 텍스트 누락은 페이지마다가 아니라 템플릿에서 한 번 고친다.
- 시나리오(경로)를 끝까지 따라간다. 상품 검색 → 장바구니 → 결제 → 주문 확인 중 한 단계라도 막히면 그 과제 전체가 막힌 것이다. 사이트의 95%가 접근 가능해도 나머지 5%가 결제라면 의미가 없다.
- 계획 단계에서 가장 많이 해결된다. 완성 뒤 검사보다 설계·저작 도구 단계에서 막는 편이 싸다.
- 책임은 콘텐츠를 만든 쪽에서 시작한다. 브라우저 설정, 보조 기술, 도우미가 뒤에서 보완할 수 있지만, 원래 의미를 아는 사람은 작성자뿐이다.
WCAG 2.2의 중복 입력 방지(3.3.7)와 인지 기능 테스트 없는 인증(3.3.8)은 이 영역을 기준으로 끌어들인 성공 기준이다(WCAG와 POUR 원칙). 쉬운 글쓰기는 대체 텍스트, 링크, 쉬운 글에, 폼 오류 복구는 접근 가능한 폼과 오류 처리에 있다.
발작과 전정 장애
- 광과민성 뇌전증: 번쩍임·깜빡임·스트로브 효과가 발작을 일으킬 수 있다. 대부분의 애니메이션·영상은 안전하지만, 크고 밝은 대비의 번쩍임이 1초에 세 번을 넘으면(특히 빨강이 섞이면) 위험하다. 대비가 강한 드롭다운이 반복해서 펼쳐지며 화면이 깜빡이는 것도 해당한다.
- 전정 장애: 균형과 눈 움직임을 맡는 내이·뇌 기관의 문제로, 움직임이 어지럼과 구역질을 일으킨다. WebAIM의 「Seizure and Vestibular Disorders」에 따르면 미국 40세 이상 성인의 최대 35%가 어떤 형태로든 전정 기능 이상을 겪어 봤다. 촘촘한 고대비 평행선, 길게 이어지는 스크롤 애니메이션, 패럴랙스, 고정된 글 아래로 움직이는 배경이 문제다.
- 세계보건기구는 뇌전증 환자를 약 5천만 명으로 추정하고, 그중 약 3~5%가 빛에 민감한 광과민성이다(Epilepsy Action).
- OS에는 움직임을 줄이는 설정이 있다(macOS·iOS 「동작 줄이기」, Android 「애니메이션 삭제」, Windows 「애니메이션 효과」 끄기). 하지만 켜고 끄기만 있어서, 쓸데없는 움직임만 끄고 잘 만든 움직임은 보고 싶은 사람에게는 중간 선택지가 없다.
- 대응은 번쩍임을 만들지 않고,
prefers-reduced-motion설정을 따르고, 움직임을 멈출 수 있게 하는 것이다. 임계값과 5초 규칙, CSS 예시는 색과 움직임의 접근성과 접근 가능한 위젯: 펼침·탭·캐러셀에 있다.
말하기 장애
말소리를 만들거나 다듬기 어려운 상태다. 실행증(apraxia), 구음 장애(dysarthria), 말더듬, 근육·인지 원인의 말하기 어려움이 있다. 미국에서만 말·목소리·언어 장애가 있는 사람이 약 1,850만 명으로 추정된다(NIDCD).
- 이들은 보완·대체 의사소통(AAC) 기기나 음성 생성 기기로 말을 대신한다.
- 웹에서 부딪히는 장벽은 음성으로만 되는 기능이다. 음성 비서, 음성 검색, 「말로 답해 주세요」 같은 자동 응답은 말을 알아듣지 못하면 막힌다.
- 음성 입력에는 늘 키보드·터치 대안을 두고, 고객 지원도 전화만이 아니라 채팅·이메일 같은 글 경로를 둔다.
장애별 맞춤 사이트보다 하나의 유연한 설계
장애 유형마다 따로 만든 버전(큰 글자판, 그림판 등)은 이상적으로 보이지만 한계가 크다.
| 문제 | 내용 |
|---|---|
| 유지 보수 | 콘텐츠를 고칠 때마다 모든 버전을 함께 고쳐야 한다 |
| 경우의 수 | 장애 종류와 조합이 너무 많다 |
| 공개 부담 | 사용자가 버전을 고르려면 자기 장애를 드러내야 한다 |
| 개인차 | 같은 장애라도 선호가 다르다 |
그래서 보통은 사용자의 조정(확대, 색 덮어쓰기, 글꼴·간격 변경)과 보조 기술을 받아들이는 단일 설계가 더 현실적이고 접근성도 넓다. 같은 이유로 사이트에 붙이는 글자 크기 위젯·고대비 버튼 같은 "접근성 옵션"은 대개 기본 설계의 약점을 떠넘기는 신호다. 기본 글자가 작으면 기본을 키우고, 대비가 부족하면 대비를 고친다. 브라우저가 이미 하는 일을 다시 만들 필요가 없다. 오버레이 제품의 문제는 접근성 평가 방법과 도구에 있다.
선의로 저지르는 실수
접근성을 부분만 알고 과하게 적용하면 오히려 장벽이 생긴다.
| 실수 | 바로잡기 |
|---|---|
| 이미지 모양을 묘사하는 대체 텍스트("빨간 화살표", "고양이 이미지") | 이미지가 전하는 내용과 기능을 쓴다. 분위기용 사진은 대개 alt=""(대체 텍스트, 링크, 쉬운 글) |
| 스크린 리더 사용자에게만 보이는 숨김 텍스트로 추가 기능 제공 | 숨김 텍스트는 눈으로는 이미 분명한 것(검색 버튼 옆 입력란의 용도 등)을 알릴 때만 쓴다 |
| 건너뛰기 링크를 여러 개 | 하나면 충분하다. 나머지는 제목 구조가 맡는다. 키보드 사용자 모두를 위해 포커스를 받으면 보이게 한다(접근 가능한 페이지 구조) |
| 스크린 리더의 발음 버릇을 마크업으로 교정 | 약어를 이미지나 철자 풀어쓰기로 바꾸지 않는다. 표준대로 쓰고 보조 기술의 개선에 맡긴다 |
필수 정보를 title 속성에 | 대부분의 스크린 리더는 title을 기본으로 읽지 않는다. 라벨·대체 텍스트를 대신하지 못한다 |
| 폼 안내를 라벨 밖 문단에 | 스크린 리더의 폼 모드에서는 라벨·legend만 읽힌다. 필수 표시·형식 안내는 라벨 안이나 폼 앞에 둔다 |
양수 tabindex로 순서 교정, accesskey 남발 | 소스 순서를 고친다. accesskey는 브라우저·스크린 리더 단축키와 충돌한다 |
outline: 0으로 포커스 표시 제거 | 포커스 링을 지우지 말고 보이게 다시 디자인한다 |
| 기준을 글자 그대로 지키는 데 매달림 | 준수는 도구다. 기준은 접근이 안 됨을 찾아 줄 뿐, 접근이 됨을 증명하지 못한다 |
| 접근성 인증 배지 달기 | 법적 이유가 없으면 사용자에게 쓸모없는 잡음이다 |
정리
- 장애 유형을 아는 목적은 사용자가 어떤 수단으로 어떻게 쓰는지를 떠올리는 데 있다. 기법은 거기서 따라 나온다.
- 시각은 대체 텍스트·구조·키보드·확대·대비, 청각은 자막·대본, 운동은 키보드·큰 대상·시간 여유, 인지는 단순·일관·다중 감각·오류 허용, 말하기는 음성 아닌 대안이 축이다.
- 장애는 영구적·일시적·상황적으로 생기며, 그 모두가 같은 설계의 혜택을 본다.
- 진단명보다 기능적 어려움으로 보고, 페이지보다 과제 흐름 전체로 평가한다.
- 장애별 맞춤판이나 접근성 위젯보다 사용자의 조정과 보조 기술을 받아들이는 하나의 설계가 낫다.
키보드로 되고, 텍스트로 바뀌고, 사용자가 키우고 바꿀 수 있는 콘텐츠가 거의 모든 장애 유형을 함께 돕는다.
관련 노트: WCAG와 POUR 원칙, 웹 접근성, 색과 움직임의 접근성, 키보드 접근성과 포커스 관리, 자막, 대본, 음성 해설, 스크린 리더로 테스트하기, 사용자 리서치
원본 기록26
- 원문 (새 창) webaim.org/intro/
- 원문 (새 창) webaim.org/articles/visual/
- 원문 (새 창) webaim.org/articles/visual/blind
- 원문 (새 창) webaim.org/articles/visual/lowvision
- 원문 (새 창) webaim.org/articles/visual/colorblind
- 원문 (새 창) webaim.org/articles/auditory/
- 원문 (새 창) webaim.org/articles/auditory/auditorydisabilities
- 원문 (새 창) webaim.org/articles/auditory/culture
- 원문 (새 창) webaim.org/articles/motor/
- 원문 (새 창) webaim.org/articles/motor/motordisabilities
- 원문 (새 창) webaim.org/articles/motor/assistive
- 원문 (새 창) webaim.org/articles/cognitive/
- 원문 (새 창) webaim.org/articles/cognitive/design
- 원문 (새 창) webaim.org/articles/cognitive/activity
- 원문 (새 창) webaim.org/articles/cognitive/cognitive_too_little/
- 원문 (새 창) webaim.org/articles/cognitive/conceptualize/
- 원문 (새 창) webaim.org/articles/framework/
- 원문 (새 창) webaim.org/articles/seizure/
- 원문 (새 창) webaim.org/articles/design/
- 원문 (새 창) webaim.org/articles/userperspective/
- 원문 (새 창) webaim.org/articles/gonewild/
- 원문 (새 창) web.dev/learn/accessibility/why
- 원문 (새 창) web.dev/learn/accessibility/test-assistive-technology
- 원문 (새 창) webaim.org/presentations/2024/january/
- 원문 (새 창) webaim.org/projects/screenreadersurvey11/
- 원문 (새 창) www.epilepsy.org.uk/info/seizure-triggers/photosensitive-epilepsy