1.4.12 텍스트 간격

요구 사항

CSS처럼 텍스트 스타일을 바꿀 수 있는 기술로 만든 콘텐츠에서, 사용자가 다음 값을 적용하고 다른 스타일은 바꾸지 않았을 때 콘텐츠나 기능이 손실되지 않아야 합니다.

• 줄 간격(line-height): 글자 크기의 1.5배 이상
• 문단 다음 간격: 글자 크기의 2배 이상
• 글자 간격(letter-spacing): 글자 크기의 0.12배 이상
• 단어 간격(word-spacing): 글자 크기의 0.16배 이상

이 기준은 작성자에게 이 간격을 쓰라고 요구하는 것이 아니라, 사용자가 이렇게 바꾸어도 깨지지 않게 만들라는 요구입니다. 예외: 이 속성 중 일부를 쓰지 않는 언어·문자는 해당 언어에 있는 속성만으로 판단합니다.

왜 필요한가요

난독증이나 저시력이 있는 사용자는 간격을 넓히면 훨씬 읽기 쉬워집니다. 그런데 고정 높이 상자 안의 글자가 잘리거나 겹치면 오히려 읽을 수 없게 됩니다.

도움받는 사용자

• 난독증이 있는 사용자
• 저시력 사용자(화면 확대 사용자)
• 인지·학습 장애가 있는 사용자

적용 방법

• 텍스트를 담는 요소에 고정 높이를 주지 않고, 내용에 따라 늘어나게 합니다(min-height 사용).
• 버튼·탭·배지처럼 작은 상자도 간격이 늘어났을 때 글자가 잘리지 않는지 확인합니다.

/* 검사용 북마클릿에 넣는 스타일 */
* {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
p { margin-bottom: 2em !important; }

자주 하는 실수

• 고정 height와 overflow: hidden으로 간격을 늘리면 글자가 잘립니다.
• 간격이 늘어나면 텍스트가 겹쳐 읽을 수 없습니다.

검사 방법

• 텍스트 간격 북마클릿이나 사용자 스타일로 위 네 가지 값을 적용합니다.
• 글자가 잘리거나, 겹치거나, 컨트롤이 가려지지 않는지 페이지 전체를 확인합니다.

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 1.4.12 (새 창)