접근성 · WCAG 1.4.4

고정 높이 버튼에 200% 텍스트 확대를 적용할 때 발생하는 텍스트 클리핑

높이 40px로 고정한 버튼은 텍스트를 200%로 확대할 때 내용이 잘릴 수 있습니다. 이 사례는 텍스트 확대와 터치 대상 크기를 별도 기준으로 설명합니다.

기준: WCAG 1.4.4 (Resize Text, AA)기준: WCAG 2.5.8 (Target Size Minimum, AA)기준: WCAG 2.5.5 (Target Size Enhanced, AAA)

1. 문제 정의 및 발생 메커니즘

결함 예시는 height: 40px; line-height: 1.4; padding: 7px 16px; overflow: hidden을 사용합니다. 14px 글자를 200%에 해당하는 28px로 바꿔도 버튼 높이는 그대로여서 내용이 잘립니다. 이 재현은 CSS 글자 크기 조정이며 실제 운영체제 확대 동작을 대신하지 않습니다.

실험에 사용된 창작 한국어 샘플 텍스트:

“온라인 접근성 진단 및 개선 컨설팅 무료 신청하기”

실험 재현 환경 및 조건

대상 뷰포트: 360×800 CSSpx 뷰포트의 280px 폭 버튼. 14px 기본 글자의 200%에 해당하는 28px CSS 글자 크기
적용 UI 엘리먼트: <button class="btn-fixed"> 액션 버튼
문제를 유발하는 기존 CSS 속성: height: 40px; line-height: 1.4; overflow: hidden; white-space: nowrap; font-size: 28px; width: 280px; padding: 7px 16px; box-sizing: border-box

⚠️ 결함 상태 실시간 재현 (Before Sandbox)의도적 결함 격리

아래 상자는 결함 조건이 적용된 실제 렌더링 결과이며, 사이트 본체의 UI와 격리되어 있습니다.

2. 측정 결과와 확인 범위

개선 전 결함 측정치 (Before)

14px 글자를 28px로 확대해 280px 폭·고정 높이 40px·패딩 7px 적용: scrollHeight 53px, 세로 넘침 13px

수정 후 개선 측정치 (After)

같은 28px 글자와 280px 폭에서 min-height: 44px·0.625em 패딩·줄바꿈 허용: 높이 191.75px, 세로 넘침 없음

측정 환경: 2026-10-27, Windows Chrome 155.0.8059.85 헤드리스, 360×800 CSSpx 뷰포트, Malgun Gothic 28px. 브라우저 텍스트 확대와 동등한 글자 크기를 CSS로 재현했으며 실제 OS 확대 기능은 검증하지 않았습니다.

확인 기록: 고정 버튼의 표시 높이는 40px이고 내용의 scrollHeight는 53px이어서 13px이 상자 밖으로 넘쳤습니다. 같은 28px 글자와 280px 폭에서 개선 버튼은 긴 문구를 여러 줄로 감고 높이가 191.75px까지 늘어나 세로 넘침이 없었습니다. 값은 기록된 Chrome 조건의 결과이며 실제 OS 확대 기능은 별도로 확인해야 합니다.

3. 웹 접근성 기반 엔지니어링 해결책

40px 고정 높이와 overflow: hidden을 제거하고 min-height·em 단위 패딩·줄바꿈을 적용하면 28px 글자에서도 내용에 맞춰 버튼이 커집니다. 이 사례에서 측정한 세로 넘침 13px은 이렇게 해소됐습니다. WCAG 1.4.4는 200% 텍스트 확대 시 내용·기능 보존을 다룹니다. 터치 대상은 별도 기준으로, 2.5.8 AA는 기본 24×24 CSS px와 예외를, 2.5.5 AAA는 기본 44×44 CSS px와 예외를 규정합니다.

✓ 개선된 컴포넌트 렌더링 결과 (After Preview)

적용 가능한 CSS 예시

/* 텍스트 200% 확대 대응 유연 버튼 CSS */
.btn-accessible-zoom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* WCAG 2.5.5 AAA 대상 높이 예시. 너비도 별도 확인 */
  padding: 0.625em 1.25em; /* em 단위로 폰트 비례 여백 형성 */
  line-height: 1.4;
  white-space: normal; /* 긴 문구 시 자동 2줄 감싸기 허용 */
  text-align: center;
}

⚖️ 기술적 트레이드오프 및 한계점 고지

버튼 내부 문구가 길어 2줄로 줄바꿈될 경우 인접한 버튼들과 높이가 달라질 수 있습니다. 이는 flex/grid 상위 컨테이너에서 align-items: stretch 또는 고른 여백 배치를 통해 시각적 균형을 유지할 수 있습니다.

본 사례 관련 실무 FAQ

Q. 버튼에 white-space: nowrap을 유지하고 싶으면 어떻게 하나요?

A. nowrap을 유지하더라도 min-height와 패딩 구조를 쓰면 글자가 위아래로 잘리지는 않습니다. 다만 좁은 화면에서 좌우로 넘칠 수 있으므로, 텍스트 확대 시 자연스럽게 2줄로 접힐 수 있도록 white-space: normal을 권장합니다.

Q. min-height: 44px는 어떤 표준에 근거한 수치인가요?

A. WCAG 2.5.5의 강화 기준(Level AAA)은 기본 44×44 CSS px이며 예외가 있습니다. 2.5.8의 최소 기준(Level AA)은 기본 24×24 CSS px와 예외를 다룹니다. min-height만으로는 너비를 포함한 전체 적합성을 입증할 수 없습니다.