[접근성연구·저시력] 스크린리더가 길을 잃을 때

구조 없는 마크업 관찰

〈디지털 접근성 연구 036〉 — 이 글은 규정이 아니라 하나의 연구 관점입니다. 인용 수치·기준은 출처와 함께, 미확정 영역은 그렇다고 밝혀 작성합니다.

들어가며

지도가 없는 도시를 걷는다고 상상해 보자. 큰길도 골목도 표지판도 없이, 그저 한 발씩 앞으로만 가야 한다면, 목적지가 어디쯤인지 가늠할 수 없다. 구조 없는 마크업의 화면을 스크린리더로 듣는다는 것은 이와 비슷하다.

앞 편(035)에서 제목 계층과 시맨틱 마크업이 듣는 사용자에게 '지도'가 된다는 것을 정리했다. 이번 편은 그 지도가 사라졌을 때 — 제목처럼 보이지만 제목이 아니고, 구역이 나뉜 듯하지만 코드엔 구조가 없는 화면 — 에서 무슨 일이 벌어지는지를 본다.

이번 편은 'B 관찰' 관점이다. 어떤 화면이 기준 위반이라고 단정하려는 것이 아니라, 구조의 결핍이 어떤 모습으로 나타나는지를 관찰의 시선으로 들여다본다. 구조의 문제는 대체텍스트처럼 '한 자리'에 있지 않고, 페이지 전체에 흩어져 있어 더 알아채기 어렵다. 그 흩어진 결핍을 차분히 모아 본다.

1. 구조가 사라지는 모습들

구조 없는 마크업은 몇 가지 모습으로 되풀이된다. 아래는 자주 마주치는 경향이며, 모든 화면이 그렇다는 단정은 아니다.

1-1. 제목처럼 보이지만 제목이 아닌 것

화면에서는 크고 굵어 분명 제목 같은데, 코드에서는 그냥 글자 크기만 키운 일반 텍스트인 경우다(035편의 핵심 문제다). 스크린리더는 이것을 제목으로 인식하지 못하므로, '제목으로 이동' 기능을 써도 이 글자에 멈추지 않는다. 듣는 사용자의 지도에서 이 제목은 존재하지 않는다.

1-2. 수준이 뒤엉킨 제목

제목 태그는 쓰였지만 수준이 뒤죽박죽인 경우다. 1수준 다음에 4수준이 나오거나, 디자인에서 글자를 크게 보이려고 수준을 임의로 바꾼 경우다. 듣는 사용자는 "지금 어느 깊이에 있는지"를 잃는다. 수준이 위계가 아니라 글자 크기 조절 수단으로 쓰이면 지도가 어그러진다.

1-3. 구역이 없는 페이지

머리말·본문·탐색·꼬리말 같은 큰 구역이 의미로 표시되지 않은 경우다. 스크린리더 사용자는 '본문으로 바로 가기'를 할 수 없어, 매 페이지마다 긴 머리말과 메뉴를 처음부터 다 들어야 본문에 닿는다. 보는 사람은 눈으로 머리말을 건너뛰지만, 듣는 사람은 건너뛸 표지가 없다.

1-4. 목록·표가 일반 텍스트인 것

목록처럼 보이는데 코드에서는 줄바꿈한 문장들이거나, 표처럼 보이는데 칸을 띄어쓰기로 맞춘 경우다. 스크린리더는 "목록 5개 항목"이나 "표, 3행 4열" 같은 구조 안내를 하지 못하고, 그저 글자를 줄줄이 읽는다. 사용자는 그것이 몇 개인지, 어떻게 묶였는지 알 수 없다.

구조가 사라지는 네 모습을, '보이는 것'과 '코드의 실제'의 어긋남으로 정리하면 다음과 같다.

결핍의 모습	화면에 보이는 것	코드의 실제	스크린리더 결과
가짜 제목	크고 굵은 제목	큰 일반 텍스트	제목 점프에 안 잡힘
수준 뒤엉킴	제목처럼	1→4 수준 비약	깊이 감각 상실
구역 없음	머리말·본문 구분	구조 표시 없음	본문까지 다 들음
가짜 목록·표	목록·표처럼	줄바꿈·띄어쓰기	개수·관계 안내 없음

(관찰) 네 모습의 공통점은 '보기엔 멀쩡하다'는 것이다. 그래서 만든 사람 눈엔 안 보이고, 듣는 사용자만 빈자리를 마주한다.

2. 왜 구조가 빠지는가

구조의 결핍도 대개 무관심이 아니라 구조적 이유에서 나온다. 관찰해 보면 몇 가지 반복되는 원인이 보인다.

2-1. '보이면 됐다'는 시각 중심 제작

화면을 보는 것만으로 제작과 검수가 이뤄지면, '보이는 구조'가 곧 '있는 구조'로 여겨진다. 글자가 크게 보이면 제목이라 여기고, 줄이 나뉘어 보이면 목록이라 여긴다. 그러나 그 시각적 단서는 코드의 의미와 별개다. 보이는 것에만 기대면, 코드 속 구조의 빈자리가 드러나지 않는다.

2-2. 디자인 도구가 의미를 강제하지 않는다

많은 화면이 시각 디자인 도구에서 출발한다. 그 도구는 '큰 글자'를 그릴 수 있게 하지만, 그것이 '제목'이라는 의미까지 자동으로 부여하지는 않는다. 구현 단계에서 의미를 코드로 옮기는 일이 빠지면, 시각만 남고 의미는 사라진다.

2-3. 빠른 제작과 복사·붙여넣기

콘텐츠를 빠르게 만들다 보면, 기존 화면에서 모양을 복사해 글자만 바꾸는 일이 흔하다. 이때 원본의 구조가 어긋나 있으면 그 어긋남이 그대로 번진다. 또 외부에서 붙여넣은 콘텐츠는 의미 구조가 깨진 채 들어오기도 한다. 구조의 결핍이 복제되며 퍼진다.

2-4. 구조는 들어 봐야 드러난다

대체텍스트처럼, 구조의 결핍도 보는 화면에서는 멀쩡해 보인다. 제목이 제목 태그가 아니어도 화면은 똑같다. 스크린리더로 들어 보거나 윤곽(outline)을 뽑아 보지 않으면, 구조가 빠졌다는 사실 자체가 보이지 않는다.

네 가지 원인을 정리하면, 구조 결핍이 '무관심'보다 '제작 흐름의 빈틈'에서 온다는 점이 보인다.

원인	어디서 생기나	드러나는 결과
시각 중심 제작	화면만 보고 검수	보이는 구조=있는 구조로 오인
디자인 도구 한계	시안 단계	'큰 글자'에 의미 미부여
복사·붙여넣기	빠른 제작	어긋난 구조가 번짐
들어 봐야 드러남	검수 단계	빈자리가 안 보임

(관점) 네 원인 모두 '시각'에서 멈춘 데서 온다. 구조는 보는 것으로 끝나지 않고, 듣거나 윤곽을 뽑아 봐야 비로소 드러난다.

3. 구조 결핍이 만드는 실제 막힘

구조가 빠지면 사용자는 어떻게 막히는가. 관찰의 핵심은 '얼마나 어긋났나'가 아니라 '그 어긋남이 사용자의 무엇을 가로막나'다.

3-1. 길게 늘어지는 탐색

구역과 제목이 없으면, 사용자는 페이지를 건너뛸 수 없어 한 줄씩 다 들어야 한다. 본문에 닿기 전에 긴 머리말과 메뉴를 매번 통과해야 한다. 보는 사람이 1초에 끝낼 '건너뛰기'가, 듣는 사람에게는 수십 초의 인내가 된다. 페이지가 길수록 이 부담은 커진다.

3-2. 위치 감각의 상실

수준이 뒤엉키거나 구조가 없으면, 사용자는 "지금 페이지의 어디에 있는지"를 잃는다. 큰 섹션 안인지, 세부 항목인지, 이미 지난 곳인지 새 곳인지를 가늠할 단서가 없다. 위치 감각이 없으면 화면 전체를 머릿속에 그리기 어렵고, 원하는 곳으로 돌아가기도 힘들다.

3-3. 관계의 단절

목록이 목록으로, 표가 표로 표시되지 않으면, 항목들 사이의 관계가 사라진다. "이 다섯 가지가 한 묶음"이라거나 "이 값은 이 머리글에 속한다"는 관계가 끊기면, 사용자는 글자는 듣지만 그것들이 어떻게 연결되는지 모른다. 정보가 있어도 맥락이 없는 상태다.

구조 결핍이 만드는 세 가지 막힘을, '사용자가 잃는 것' 중심으로 정리하면 다음과 같다.

막힘의 종류	빠진 구조	사용자가 잃는 것
길게 늘어지는 탐색	구역·제목 점프	건너뛸 시간·인내
위치 감각 상실	수준 위계	"어디에 있는지" 감각
관계의 단절	목록·표 구조	항목 사이의 연결 맥락

(관찰) 세 막힘 모두 '글자는 들리는데 지도가 없다'는 공통점이 있다. 정보가 있어도 그 정보들의 관계와 위치가 끊기면 사용자는 떠다닌다.

4. 관찰에서 길어 올리는 해석

구조의 결핍을 관찰하다 보면, 몇 가지 해석이 따라온다. 이것은 결론이라기보다, 관찰을 다음 점검(037)으로 잇는 가교다.

4-1. 구조는 '한 자리'가 아니라 '전체'의 문제다

대체텍스트는 이미지 하나하나의 문제지만, 구조는 페이지 전체에 걸친 문제다. 제목 하나를 고쳐도 페이지의 윤곽이 어그러져 있으면 사용자의 지도는 여전히 엉킨다. 그래서 구조 점검은 개별 요소가 아니라 페이지의 '줄거리'를 보는 관점이 필요하다.

4-2. '보인다'와 '구조가 있다'는 다르다

이 편에서 거듭 확인한 것은, 시각적 구조와 코드적 구조가 별개라는 점이다. 화면이 잘 정돈되어 보인다고 해서 코드에 구조가 있는 것은 아니다. 둘이 일치하는지는 들어 보거나 윤곽을 뽑아 봐야 안다. 보는 눈을 믿지 말고 듣는 귀로 확인하라는 것이, 구조 점검의 기본 태도다.

4-3. 결핍은 '템플릿'에서 반복된다

구조의 어긋남은 대개 한 페이지만의 문제가 아니다. 같은 템플릿, 같은 컴포넌트, 같은 제작 습관에서 반복된다. 머리말 구역이 빠진 템플릿은 그 템플릿을 쓰는 모든 페이지에서 같은 막힘을 만든다. 그래서 해결도 '이 페이지'가 아니라 '이 템플릿'을 보는 편이 효율적이다.

5. 관찰을 점검으로 넘기며

관찰의 마지막은, 본 것을 확인 가능한 형태로 옮기는 일이다. 다음 편(037)이 점검을 본격적으로 다루므로, 여기서는 작은 다리만 놓는다.

구조의 결핍은 '윤곽을 뽑아' 보거나 '들어' 봐야 드러난다. 페이지의 제목만 뽑아 목차처럼 늘어놓으면, 그 윤곽이 줄거리로 읽히는지가 보인다. 윤곽이 뒤죽박죽이거나 제목이 빠져 있으면, 그것은 화면에서 보이지 않아도 듣는 사용자의 지도가 엉켜 있다는 신호다. 스크린리더로 '제목 이동'과 '구역 이동'을 해 보면, 멈춰야 할 곳에 멈추는지, 건너뛸 수 있어야 할 곳을 건너뛰는지가 귀에 들어온다. 관찰이 점검으로 넘어가면, "구조가 좀 부실한 것 같다"는 느낌이 "본문 구역 없음 — 매 페이지 머리말 강제 청취"라는 다시 찾을 수 있는 기록으로 바뀐다.

관찰의 언어를 점검의 언어로 옮기면, 다음 사람이 같은 자리를 다시 확인할 수 있다.

관찰의 언어	점검의 언어	확인하는 방법
"제목 같은데 안 잡힘"	"제목 태그인가"	윤곽 추출로 제목 확인
"어디 있는지 모름"	"수준이 건너뛰나"	제목 수준 순서 점검
"본문까지 오래 걸림"	"구역이 있나"	랜드마크로 이동 시도
"묶음이 안 보임"	"목록·표 요소인가"	목록·표 구조 안내 청취

(관점) 관찰을 점검으로 옮기는 핵심은 '흩어진 느낌을 페이지의 줄거리로 고정하는 것'이다. 구조는 한 자리가 아니라 윤곽 전체로 봐야 다시 찾을 수 있다.

5-1. 반론과 한계

관찰 기반 글에는 '인상'에 치우칠 위험이 있다. 아래 반론을 함께 둔다.

가능한 반론	우리의 한계 인정	보완하는 태도
"보기 좋으면 된 것 아닌가"	시각≠코드 구조	윤곽·청취로 교차 확인
"구조 강박 아닌가"	완벽 계층이 목표 아님	일관성·예측 가능성 우선
"한 페이지로 단정"	표본은 일부	템플릿 단위로 확장

(한계) 이 글은 특정 사이트를 평가하지 않는다. 구조 결핍이 '어떤 모습으로 나타나는지'를 관찰로 정리했을 뿐, 합격·불합격 판정은 들어 보고 윤곽을 뽑아 본 뒤의 몫이다.

5-2. ViewCheck의 관점 — 사람과 도구의 분담

구조 결핍 점검에서, 자동 점검이 잘하는 자리와 사람이 봐야 하는 자리는 다음과 같다.

점검 항목	자동 점검이 보는 것	사람이 봐야 하는 것
제목 태그	h1~h6 존재·수준 추출	큰 글자만이고 태그 없는지
수준 비약	1→4 점프 등 탐지	줄거리가 자연스러운지
랜드마크	header/nav/main 유무	구역 구분이 실제 맞는지
목록·표	list/table 요소 탐지	띄어쓰기로 흉내 낸 건 아닌지

(관점) 도구는 제목·수준·랜드마크·목록을 빠짐없이 추출하지만, '그 윤곽이 줄거리로 읽히는가'는 사람이 판단한다. 추출과 탐지는 도구가, 줄거리 검증은 사람이 맡는다.

한 장 요약

구조 결핍의 모습	사용자에게 일어나는 일
제목 아닌 큰 글자	제목 점프에 안 잡힘 — 지도에 없음
수준 뒤엉킴	위치 감각 상실
구역 없음	본문까지 매번 다 들어야 함
목록·표가 일반 텍스트	관계·개수의 단절

맺으며

스크린리더가 길을 잃는 화면은, 누군가가 일부러 지도를 지운 것이 아니다. 보이는 것에만 기대 제작하다 보니, 코드 속 구조가 미처 채워지지 않은 결과인 경우가 많다. 화면은 멀쩡해 보이고, 만든 사람의 눈에는 잘 정돈되어 있다. 그 정돈이 코드의 의미로까지 옮겨졌는지는, 들어 봐야만 안다.

우리는 이 결핍을 단정보다 관찰로 보려 했다. 어떤 모습으로 구조가 빠지는지, 왜 빠지는지, 무엇을 막는지를 충분히 본 뒤에야, 다음 단계 — 직접 우리 페이지의 구조를 들어 보고 윤곽을 뽑아 보는 점검 — 으로 넘어갈 수 있다. 보이는 정돈을 믿지 말고 듣는 구조를 확인하는 것이, 길 잃은 사용자를 위한 첫걸음이다.

다음 편 예고 (037): 037편은 'C 점검' 관점입니다. 우리 문서의 구조는 제대로 읽히는가 — 제목 윤곽을 뽑아 보고, 랜드마크로 이동해 보고, 목록·표의 구조를 확인하는, 누구나 따라 할 수 있는 구조 점검 동선을 정리합니다.

참고한 공개 자료(출처):

W3C, Web Content Accessibility Guidelines (WCAG) 2.1 — 1.3.1 Info and Relationships, 2.4.1 Bypass Blocks, 2.4.6 Headings and Labels (원문 확인 권장)
W3C, WAI — Page Structure / Headings·Landmarks 안내 (원문 확인 권장)
한국웹접근성 관련 지침(KWCAG) — 콘텐츠 구조·제목 제공 관련 항목 (원문 확인 권장)
행정안전부, 「전자정부 웹사이트 품질관리 지침」 — 접근성 영역 (고시 원문 확인 권장)

※ 위 자료의 구체 조항·수치는 인용 시점과 버전에 따라 달라질 수 있어, 실제 적용 전 원문 확인이 안전합니다. 본 글은 연구·관점 정리이며 특정 기관의 평가가 아닙니다.