WCAG 1.4.12: 텍스트 간격

WCAG 1.4.12는 사용자가 줄 높이, 글자 간격, 단어 간격, 문단 뒤 간격 등의 텍스트 간격 속성을 특정 최소 값으로 재정의하더라도 콘텐츠나 기능의 손실이 발생하지 않도록 요구합니다. 이 기준은 난독증, 저시력, 인지 장애가 있어 효과적인 읽기를 위해 사용자 지정 간격에 의존하는 사용자들에게 필수적입니다.

이 규칙의 의미

WCAG 1.4.12 Text Spacing은 지침 1.4(식별 가능)에 속하며, 매우 구체적인 문제를 다룹니다. 읽기 장애, 저시력, 인지 장애가 있는 많은 사람들은 콘텐츠를 읽을 수 있도록 웹 페이지의 기본 텍스트 간격을 재정의해야 합니다. 사용자가 간격을 늘렸을 때 사이트의 레이아웃이 깨져서 텍스트가 잘리거나, 버튼이 겹치거나, 폼 레이블이 사라지거나, 콘텐츠에 접근할 수 없게 되면, 그 사이트는 이 기준을 충족하지 못한 것입니다.

이 성공 기준은 다음 네 가지 간격 속성이 동시에 다음 최소값으로 설정되었을 때도 기능을 유지해야 한다고 정의합니다.

줄 높이(줄 간격): 요소의 글꼴 크기의 최소 1.5배.
자간(letter spacing, tracking): 요소의 글꼴 크기의 최소 0.12배.
단어 간격(word spacing): 요소의 글꼴 크기의 최소 0.16배.
단락 뒤 간격: 요소의 글꼴 크기의 최소 2배.

페이지는 이 네 가지 재정의가 모두 적용된 후에도 사용자가 모든 텍스트를 읽을 수 있고, 모든 인터랙티브 컨트롤을 조작할 수 있으며, 320 CSS 픽셀 너비의 뷰포트에서 가로 스크롤 없이, 잘리거나 생략되지 않고, 콘텐츠가 겹쳐서 읽을 수 없거나 사용할 수 없는 상태가 되지 않은 채 모든 페이지 콘텐츠에 접근할 수 있다면 이 기준을 통과합니다.

반대로, 이러한 재정의를 적용했을 때 다음과 같은 일이 발생하면 페이지는 실패합니다. 예를 들어, 고정 높이와 overflow: hidden이 설정된 컨테이너에 의해 텍스트가 잘리는 경우, 인터랙티브 레이블이나 버튼 텍스트가 사라지는 경우, 드롭다운 메뉴나 툴팁이 본문 콘텐츠와 겹쳐 사용 불가능해지는 경우, 또는 어떤 콘텐츠든 영구적으로 접근할 수 없게 되는 경우입니다.

중요한 점은, 이 성공 기준이 여러분에게 직접 그 간격 값을 설정하라고 요구하는 것이 아니라는 것입니다. 요구하는 것은 오직 사용자가(또는 그들의 보조 기술, 브라우저 확장, 사용자 스타일시트가) 이러한 재정의를 적용했을 때 레이아웃이 깨지지 않아야 한다는 점입니다. 이 간격 값들은 디자인 요구사항이 아니라, 테스트를 위한 임계값입니다.

명시적인 예외가 하나 있습니다. 특정한 시각적 표현이 전달되는 정보에 본질적인 구성 요소 — 예를 들어, 로고타입, SVG로 렌더링된 악보, CAPTCHA 이미지 — 는 예외로 인정됩니다. 그러나 이 예외는 범위가 매우 좁으며, 내비게이션 메뉴나 카드 컴포넌트를 포괄적으로 면제하기 위한 구실로 사용해서는 안 됩니다.

이 성공 기준은 CSS를 사용해 브라우저에서 렌더링되는 모든 텍스트 콘텐츠에 적용됩니다. 여기에는 제목, 단락, 레이블, 버튼 텍스트, 플레이스홀더 텍스트, 목록 항목, 테이블 셀, 내비게이션 링크 등이 포함됩니다. CSS 간격 재정의의 영향을 받지 않는 이미지나 canvas 요소 내부에 렌더링된 텍스트에는 적용되지 않습니다.

왜 중요한가

텍스트 간격은 매우 다양한 장애와 읽기 프로파일을 가진 사람들에게 직접적인 영향을 미칩니다. 세계보건기구(WHO)에 따르면 전 세계적으로 약 22억 명이 어떤 형태로든 시각 장애나 실명을 가지고 있으며, 이들 중 많은 사람이 콘텐츠를 읽을 수 있도록 브라우저 확대나 사용자 정의 스타일시트를 사용합니다. 시각 장애를 넘어, 전 세계 인구의 약 15–20%는 난독증을 가지고 있는 것으로 추정되며, 이들에게는 자간, 단어 간격, 줄 높이를 늘리는 것이 입증된 가독성 향상 방법입니다. 이는 학술지 Annals of Dyslexia에 실린 연구를 포함한 여러 연구에서 뒷받침됩니다.

ADHD나 정보 처리 어려움과 같은 인지 장애가 있는 사용자에게는, 촘촘한 텍스트 간격이 줄을 따라가고 개별 단어를 구분하는 것을 어렵게 만들어 읽기의 인지적 부담을 증가시킵니다. 이러한 사용자들은 자주 Readability Bookmarklet, Stylus 같은 브라우저 확장이나, 방문하는 모든 웹사이트에 사용자 정의 간격을 적용하는 플랫폼 수준의 접근성 설정을 설치합니다.

구체적인 상황을 생각해 봅시다. 난독증이 있는 한 대학생이 시험 전에 반품 정책을 확인하기 위해 터키의 한 전자상거래 플랫폼을 방문합니다. 그녀는 브라우저 확장을 사용해 전역적으로 줄 높이를 1.7, 자간을 0.14em으로 설정합니다. 상품 상세 페이지에서 반품 정책 텍스트는 height: 120px; overflow: hidden; 스타일이 적용된 고정 높이 <div> 안에 들어 있습니다. 그녀의 사용자 정의 간격이 적용된 상태에서는 처음 두 줄만 보이고 나머지를 볼 수 있는 수단이 없습니다. 그녀는 작업을 완료할 수 없고, 플랫폼에 대한 신뢰를 잃습니다. 이것이 바로 WCAG 1.4.12가 방지하고자 하는 실패입니다.

장애 접근성을 넘어, 부수적인 이점도 있습니다. 간격 변화에 유연하게 대응하는 레이아웃은 국제 시장 전반에서 더 견고한 경향이 있습니다. 예를 들어 터키어 텍스트는 교착어적 형태론 때문에 더 긴 단어 형태를 자주 포함하며, 간격 변화를 수용하지 못하는 레이아웃은 긴 문자열에서도 쉽게 깨집니다. 접근 가능한 레이아웃은 간접적으로 SEO도 개선합니다. 읽기 쉽고 접근 가능한 콘텐츠는 이탈률이 낮고 참여 지표가 더 좋은 경향이 있으며, 검색 엔진은 이를 순위에 반영합니다.

테스트 방법

Text Spacing Bookmarklet을 설치합니다. Steve Faulkner Text Spacing Bookmarklet 페이지(1.4.12에 대한 W3C Understanding 문서에서 링크를 통해 또는 "text spacing bookmarklet WCAG"로 웹 검색하여 접근 가능)를 엽니다. 북마클릿을 브라우저의 북마크 바로 끌어다 놓습니다. 또는 북마크를 수동으로 생성한 뒤, 북마클릿 JavaScript를 URL로 붙여넣을 수도 있습니다.
테스트할 페이지를 엽니다. 브라우저의 기본 확대 수준(100%)에서 페이지를 엽니다. 평가하려는 페이지나 컴포넌트 — 예를 들어 상품 목록 페이지, 결제 폼, 내비게이션 메뉴 — 로 이동합니다.
북마클릿을 활성화합니다. 북마클릿을 클릭합니다. 그러면 페이지 전체에 line-height: 1.5 !important, letter-spacing: 0.12em !important, word-spacing: 0.16em !important, 그리고 p의 margin-bottom을 2em !important로 설정하는 CSS가 주입됩니다.
페이지 전체를 시각적으로 검사합니다. 모든 콘텐츠 영역을 스크롤합니다. 컨테이너 하단에서 잘리는 텍스트, 사라지거나 일부만 보이는 버튼 레이블 또는 링크 텍스트, 항목이 겹치는 내비게이션 메뉴나 드롭다운, 플레이스홀더나 레이블 텍스트가 잘리는 폼 필드, 컨테이너 경계를 넘어 콘텐츠가 넘치는 모달 대화상자나 툴팁 등을 찾아봅니다.
인터랙티브 요소를 조작해 봅니다. Tab 키로 포커스 가능한 모든 요소를 순회하고, 드롭다운을 열고, 모달을 띄우고, 폼을 제출합니다. 간격이 적용된 상태에서도 모든 인터랙티브 컨트롤이 여전히 조작 가능하며, 눈에 보이는 레이블이 완전히 읽을 수 있는지 확인합니다.
기능 손실 여부를 스크린 리더로 테스트합니다. 북마클릿이 활성화된 상태에서 NVDA와 Firefox 또는 JAWS와 Chrome을 사용해 제목, 랜드마크, 인터랙티브 요소 단위로 페이지를 탐색합니다. 읽기 순서와 안내되는 콘텐츠가 시각 사용자에게 보이는 것과 일치하는지 확인합니다. Apple 플랫폼을 위해 macOS나 iOS의 Safari에서 VoiceOver도 사용합니다.
320px 뷰포트 너비에서 테스트합니다. 브라우저 창 너비를 320 CSS 픽셀로 조정하거나, 브라우저 개발자 도구의 반응형 모드를 사용합니다. 북마클릿을 다시 활성화합니다. 작은 뷰포트 너비와 증가된 간격이 결합된 상태에서도 가로 스크롤 없이 콘텐츠에 접근할 수 있고, 텍스트가 잘리지 않는지 확인합니다.
실패 사례를 문서화합니다. 각 실패 사례에 대해 요소 유형, CSS 클래스나 ID, 실패를 유발한 특정 간격 속성, 그리고 북마클릿 활성화 전후의 스크린샷을 기록합니다.

해결 방법

고정 높이 컨테이너가 텍스트를 잘라냄 — 잘못된 예

<!-- Failure: fixed height with overflow:hidden clips text when line-height increases -->
<div class='product-description' style='height: 80px; overflow: hidden;'>
  <p>Bu ürün doğal malzemelerden üretilmiştir ve 2 yıl garanti kapsamındadır.</p>
</div>

고정 높이 컨테이너가 텍스트를 잘라냄 — 올바른 예

<!-- Fix: use min-height instead of height, and allow overflow to be visible or auto -->
<div class='product-description' style='min-height: 80px; overflow: visible;'>
  <p>Bu ürün doğal malzemelerden üretilmiştir ve 2 yıl garanti kapsamındadır.</p>
</div>
<!-- If you need to truncate for design reasons, use a "Read more" button pattern
     that expands the content rather than hiding it with overflow:hidden -->

고정 버튼 높이로 인해 버튼 레이블이 잘림 — 잘못된 예

<!-- Failure: fixed height on button causes label text to be cut off
     when letter-spacing and line-height are increased -->
<button style='height: 36px; overflow: hidden; white-space: nowrap;'>
  Sepete Ekle
</button>

고정 버튼 높이로 인해 버튼 레이블이 잘림 — 올바른 예

<!-- Fix: use min-height and padding instead of fixed height.
     padding ensures the button grows with its content. -->
<button style='min-height: 36px; padding: 8px 16px;'>
  Sepete Ekle
</button>

툴팁 또는 드롭다운이 넘치지만 스크롤이 없음 — 잘못된 예

<!-- Failure: tooltip has a max-height and overflow:hidden,
     causing content to be cut off when spacing is increased -->
<div role='tooltip' id='info-tip' style='max-height: 60px; overflow: hidden;'>
  Bu alan zorunludur. Lütfen geçerli bir e-posta adresi giriniz.
</div>

툴팁 또는 드롭다운이 넘치지만 스크롤이 없음 — 올바른 예

<!-- Fix: remove the max-height restriction or use overflow:auto
     so content remains accessible when spacing is overridden -->
<div role='tooltip' id='info-tip' style='max-width: 280px; overflow: auto;'>
  Bu alan zorunludur. Lütfen geçerli bir e-posta adresi giriniz.
</div>

단락 간격으로 인해 카드 레이아웃이 깨짐 — 잘못된 예

<!-- Failure: card uses absolute positioning and a fixed container height.
     When paragraph margin-bottom is set to 2em by the user,
     text overflows and overlaps the card footer. -->
<div class='card' style='position: relative; height: 200px; overflow: hidden;'>
  <p>Ürün açıklaması burada yer alır ve birden fazla satır içerebilir.</p>
  <div class='card-footer' style='position: absolute; bottom: 0;'>
    <a href='/urun/detay'>Detayları Gör</a>
  </div>
</div>

단락 간격으로 인해 카드 레이아웃이 깨짐 — 올바른 예

<!-- Fix: use flexbox or grid with a natural document flow.
     The footer follows the content instead of being absolutely positioned.
     min-height allows the card to grow with its content. -->
<div class='card' style='display: flex; flex-direction: column; min-height: 200px;'>
  <p style='flex: 1;'>Ürün açıklaması burada yer alır ve birden fazla satır içerebilir.</p>
  <div class='card-footer'>
    <a href='/urun/detay'>Detayları Gör</a>
  </div>
</div>

자주 발생하는 실수

텍스트 컨테이너에 min-height 대신 height를 사용하는 경우. 텍스트를 포함하는 어떤 요소에든 고정 height를 설정하면, 사용자가 줄 높이나 자간을 늘리는 즉시 텍스트가 잘리게 됩니다. 텍스트를 담는 모든 컨테이너의 고정 높이는 min-height로 바꿔 컨테이너가 커질 수 있도록 해야 합니다.
단락 텍스트를 담는 컨테이너에 overflow: hidden을 설정하는 경우. 이는 1.4.12 실패의 가장 흔한 원인입니다. 숨겨진 overflow는 간격 증가로 텍스트가 수직으로 확장될 때 텍스트를 잘라냅니다. 디자인 맥락에 따라 overflow: visible 또는 overflow: auto를 사용하십시오.
충분히 유연하지 않은 컨테이너에서 버튼이나 링크 레이블에 white-space: nowrap을 사용하는 경우. 자간이 증가하면, 특히 고정 너비 내비게이션 항목에서 줄바꿈이 금지된 텍스트가 부모를 넘치거나 잘릴 수 있습니다.
고정 높이 카드 내부에서 푸터나 액션 요소를 절대 위치로 배치하는 경우. 간격 재정의로 카드 콘텐츠가 늘어나면, 카드 하단에 절대 위치로 배치된 요소가 텍스트와 겹칩니다. 대신 flexbox 컬럼 레이아웃을 사용하십시오.
펼쳐진 상태의 접이식 섹션에 max-height와 overflow: hidden을 함께 적용하는 경우. 픽셀 단위 측정값을 기반으로 계산된 max-height 값까지 확장되는 애니메이션 아코디언은, 간격이 재정의되면 완전히 열린 상태에서도 그 픽셀 경계에서 텍스트를 잘라냅니다.
전체 콘텐츠를 펼칠 수 있는 눈에 보이는 메커니즘 없이 CSS line-clamp(webkit-line-clamp)를 사용하는 경우. 텍스트를 고정된 줄 수로 제한하는 것은, 전체 콘텐츠를 표시할 수 있는 명확하게 레이블된 키보드 접근 가능한 컨트롤이 있을 때에만 허용됩니다. 확장 메커니즘 없이 텍스트를 잘라내면 1.4.12를 위반합니다.
JavaScript에 의존해 요소 높이를 픽셀 단위로 동적으로 설정하는 경우. 요소 높이를 측정한 뒤 그 픽셀 값을 인라인 스타일로 고정하는 스크립트는, 사용자 간격 재정의를 무시하는 크기로 컨테이너를 잠가 버립니다. 고유 크기(intrinsic sizing)를 사용하고 레이아웃은 CSS에 맡기십시오.
자동 접근성 스캔이 모든 1.4.12 실패를 잡아낼 것이라고 가정하는 경우. Text Spacing Bookmarklet을 실행하지 않고 axe나 Lighthouse에만 의존하는 팀은 레이아웃 기반 간격 실패를 모두 놓치게 됩니다. 이 성공 기준에 대해서는 북마클릿을 사용한 수동 테스트가 필수입니다.
북마클릿으로 내비게이션 메뉴와 메가 메뉴를 테스트하지 않는 경우. 내비게이션 컴포넌트는 종종 세련된 시각적 결과를 위해 고정 픽셀 높이와 overflow hidden으로 구현됩니다. 또한 간격 증가로 메뉴 항목이 줄바꿈되고 잘리기 때문에 1.4.12에서 가장 자주 실패하는 컴포넌트이기도 합니다.
간격 값을 테스트 임계값이 아닌 디자인 요구사항으로 취급하는 경우. 일부 팀은 1.4.12에 대응하기 위해 기본 스타일을 임계값과 일치하도록 업데이트하는데, 이는 불필요하며 디자이너의 의도와 충돌할 수 있습니다. 이 성공 기준은 해당 값들이 기본값이어야 한다고 요구하는 것이 아니라, 그 값들이 적용되었을 때 레이아웃이 깨지지 않아야 한다고만 요구합니다.

터키 접근성 규제와의 관계

WCAG 1.4.12 Text Spacing은 터키에서 새롭게 형성되고 있는 법적 접근성 체계와 직접적으로 관련이 있습니다. 가장 중요한 최근 개발은 2025년 6월 21일 관보 제32933호에 게재된 대통령 통지 2025/10입니다. 이 통지는 다양한 조직이 웹 사이트와 모바일 애플리케이션 전반에서 디지털 접근성을 보장해야 하는 구속력 있는 의무를 설정합니다.

이 통지는 폭넓은 유형의 기관을 포괄합니다. 모든 수준의 공공 기관과 공공 부문 조직은 준수 의무가 있습니다. 범위에 포함되는 민간 부문에는 전자상거래 플랫폼, 은행 및 금융 기관, 병원 및 의료 서비스 제공자, 가입자 200,000명 이상인 통신사, 여행사, 민간 운송 회사, 그리고 교육부(MoNE)의 인가를 받은 사립 학교가 포함됩니다. 이들 조직은 통지에 따른 의무의 일환으로 1.4.12를 포함한 WCAG Level AA에 부합해야 합니다.

Level AA 준수는 가족·사회서비스부(Aile ve Sosyal Hizmetler Bakanlığı)가 발급하는 접근성 로고(Erişilebilirlik Logosu)를 획득하기 위한 전제 조건이기도 합니다. 이 로고는 특히 장애가 있는 사용자에게 해당 디지털 제품이 심사를 거쳐 요구되는 접근성 기준을 충족했음을 알려 줍니다. 시각, 인지, 읽기 장애를 포함해 수백만 명으로 추산되는 터키 장애인 커뮤니티를 대상으로 하는 조직에게 이 로고는 평판과 규제 측면에서 모두 중요한 의미를 가집니다.

실질적으로, overflow: hidden이 설정된 고정 높이 상품 설명 컨테이너를 사용하는 터키 전자상거래 플랫폼이나, 브라우저 확장 또는 운영체제 접근성 설정을 통해 사용자가 간격 재정의를 적용했을 때 내비게이션 메뉴가 잘리는 정부 포털은, 사용자에게 피해를 줄 뿐 아니라 2025/10 통지에서 정한 의무를 위반하고 있을 가능성이 있습니다. Text Spacing 실패는 사용자 정의 간격 도구에 의존하는 난독증 및 저시력 터키 사용자, 그리고 운영체제 텍스트 크기 설정이 간격 재정의와 유사한 레이아웃 불안정을 유발할 수 있는 모바일 기기에서 정부나 상업 서비스를 이용하는 사용자에게 특히 중요합니다.

Erişilebilirlik Logosu를 목표로 하는 조직은 자동 스캔과 스크린 리더 테스트와 함께 Text Spacing Bookmarklet을 사용한 수동 텍스트 간격 감사를 접근성 감사 프로세스의 필수 단계로 포함해야 합니다. 1.4.12 실패를 수정하는 일 — 주로 고정 높이를 min-height로 대체하고, 텍스트 컨테이너에서 불필요한 overflow: hidden을 제거하며, 유연한 CSS 레이아웃 기법을 채택하는 것 — 은 일반적으로 큰 디자인 변경 없이도 가능하며, 모든 터키 디지털 서비스의 접근성을 크게 향상시키는 비용 대비 효과가 높은 개선입니다.