1.4.4 텍스트 크기 조정

요구 사항

자막과 텍스트 이미지를 제외한 텍스트는 보조기술 없이(브라우저 확대·글자 크기 설정만으로) 200%까지 크기를 키워도 콘텐츠나 기능이 손실되지 않아야 합니다. 글자가 잘리거나, 겹치거나, 버튼이 가려지면 안 됩니다.

왜 필요한가요

저시력 사용자는 화면 확대 프로그램 없이 브라우저 확대나 글자 크기 설정만으로 콘텐츠를 읽는 경우가 많습니다.

도움받는 사용자

• 저시력 사용자(화면 확대 사용자)
• 고령자
• 인지·학습 장애가 있는 사용자

적용 방법

• 글자 크기에 rem, em, % 같은 상대 단위를 사용합니다.
• 텍스트를 담는 상자에 고정 높이(height: 40px)와 overflow: hidden을 함께 쓰지 않습니다.
• 모바일 뷰포트에서 user-scalable=no, maximum-scale=1로 확대를 막지 않습니다.

사례

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<meta name="viewport" content="width=device-width, initial-scale=1">

자주 하는 실수

• 뷰포트 메타 태그로 핀치 확대를 막습니다.
• 고정 높이 상자 안의 텍스트가 확대 시 잘립니다.
• 글자 크기를 px로 고정해 브라우저 글자 크기 설정이 적용되지 않습니다.

검사 방법

• 브라우저 확대를 200%로 설정해 텍스트가 잘리거나 겹치지 않는지 확인합니다.
• 브라우저의 글자 크기 설정만 “아주 크게”로 바꿔서도 확인합니다.
• 모바일에서 핀치 확대가 되는지 확인합니다.

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 1.4.4 (새 창)