운영체제 텍스트 배율 준수

웹 기능: <meta name="text-scale">

개요

시각 장애가 있는 사용자는 운영체제 수준에서 텍스트 크기 조정을 구성하는 경우가 많습니다 (예: iOS의 동적 서체 또는 Android/ChromeOS의 글꼴 크기 조정). 기본적으로 모바일 브라우저는 기존의 고정 픽셀 웹사이트가 시각적으로 깨지는 것을 방지하기 위해 이러한 OS 수준 접근성 설정을 무시합니다.

페이지를 정적으로 유지하거나 불안정한 맞춤 JavaScript 레이아웃 계산에 의존하는 대신 <meta name="text-scale"> 태그를 사용하여 네이티브 운영체제 텍스트 크기 조정을 선택하세요. 활성화되면 브라우저는 사용자의 OS 환경설정에 맞게 루트 글꼴 크기 (1rem)를 동적으로 조정하여 모든 상대적 (rem/em) 글꼴 크기, 레이아웃, 간격이 자동으로 원활하게 조정되도록 합니다.

구현

1. OS 텍스트 크기 조정 선택

<meta name="text-scale"> 요소를 문서의 <head> 내에 배치합니다. 이는 지원 브라우저에 레이아웃이 현대적이고 적응형이며 안전하게 확장할 수 있다는 신호를 보냅니다.

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  
  <!-- Opt this page into OS-level dynamic type and accessibility text scaling -->
  <meta name="text-scale" content="scale" />
  
  <title>Adaptive Accessibility Layout</title>
</head>

2. 상대 서체 및 간격 사용

고정 픽셀 (px) 대신 상대 단위 (rem 또는 em)를 사용하여 글꼴 크기를 정의합니다. 행 간격에는 단위가 없는 값을 사용하여 각 요소의 계산된 글꼴 크기에 비례하여 조정되도록 합니다.

간격이 텍스트 크기에 연결되거나 텍스트 크기가 조정될 때 조정되어야 하는 여백과 패딩에는 상대 단위를 사용합니다. 텍스트와 독립적인 간격은 크기 조정으로 인해 텍스트 잘림, 겹침, 콘텐츠 손실 또는 사용할 수 없는 레이아웃이 발생하지 않는 한 적절한 경우 고정 단위를 사용할 수 있습니다.

body {
  font-family: system-ui, sans-serif;
  /* Inherits the root font-size, which scales automatically with the OS setting */
  line-height: 1.5;      /* Unitless so it scales proportionally with computed font-size */
  padding: 1.5rem;       /* Scales proportionally to prevent dense crowding at larger scales */
}

h1 {
  font-size: 2.25rem;    /* Scales proportionally to the root base */
  margin-bottom: 1rem;
}

디자인에 상속된 브라우저 기본값과 다른 크기가 필요한 경우에만 body에서 기본 텍스트 크기를 설정합니다. 그렇지 않으면 상속되도록 합니다. rem 또는 em와 같은 상대 단위를 사용하여 제목과 같은 특정 요소의 크기를 설정합니다. 루트 글꼴 크기에 상대적인 크기에는 rem를 사용하고, 크기가 상위 요소의 글꼴 크기에 따라 달라져야 하는 경우에는 em를 사용합니다. :root 또는 html에 맞춤 글꼴 크기를 설정하지 마세요.

유동적 서체

유동적인 서체는 글꼴 크기에 rem 또는 em와 같은 글꼴 상대 구성요소도 포함된 경우 vw와 같은 표시 영역 상대 단위를 사용할 수 있습니다(MAY). 컨테이너 쿼리 단위 및 clamp()를 비롯한 더 많은 유연한 확장 기법은 유연한 확장을 참고하세요.

표시 영역 단위로만 텍스트 크기를 조정하지 마세요.

/* ❌ DO NOT DO THIS: The font size does not respond fully to user text scaling */
.heading {
  font-size: 5vw;
}

대신 글꼴 상대 값을 표시 영역 상대 크기 조정과 결합하고 상대적인 최솟값과 최댓값을 사용하세요.

.heading {
  font-size: clamp(2rem, 1.25rem + 2vw, 4rem);
}

콘텐츠나 기능의 손실 없이 텍스트 크기를 기본 크기의 200% 이상으로 조절할 수 있는지 테스트합니다. 유동적 서체의 경우 최대 글꼴 크기를 최소 글꼴 크기의 2.5배 이하로 유지하는 것이 좋습니다. 또한 320 CSS 픽셀 표시 영역 너비(1280 CSS 픽셀 너비 표시 영역에서 400% 확대에 해당)에서 리플로우를 테스트합니다. 콘텐츠는 필수적인 경우를 제외하고 2차원 스크롤 없이 사용할 수 있어야 합니다(MUST).

3. 확장 가능한 반응형 중단점 사용

반응형 중단점은 텍스트가 기본 크기로 유지된다고 가정해서는 안 됩니다(MUST NOT). 중단점이 텍스트에 사용할 수 있는 공간에 반응하도록 하려면 고정 픽셀 기준점보다는 콘텐츠 기반 레이아웃, 컨테이너 쿼리 또는 em 기반 미디어 쿼리를 사용하는 것이 좋습니다.

운영체제 텍스트 크기 조절 및 브라우저 확대/축소를 사용 설정한 상태에서 반응형 레이아웃을 테스트합니다. 텍스트는 읽을 수 있어야 하고 콘텐츠는 겹침, 잘림, 가로 스크롤 없이 표시되어야 합니다(MUST).

4. 콘텐츠 줄바꿈 및 유연한 높이 보장

텍스트 크기가 커지면 잘림이나 겹침을 방지하기 위해 요소에 더 많은 세로 및 가로 공간이 필요합니다. 구성요소를 견고하게 유지하려면 엄격한 좌표를 강제하는 대신 콘텐츠를 중심으로 동적으로 확장되도록 레이아웃을 디자인하세요.

  • 텍스트 컨테이너 확장 허용: 텍스트를 포함하는 구성요소와 컨테이너는 확장된 텍스트를 수용할 수 있도록 확장될 수 있어야 합니다(MUST). 클리핑이나 오버플로를 일으킬 수 있는 고정 height 또는 block-size 값과 제한적인 max-height 또는 max-block-size 값은 피합니다. 콘텐츠 기반 크기 조정을 선호합니다. 최소 크기가 필요한 경우에만 min-height 또는 min-block-size를 사용하세요.
  • 자연스러운 줄바꿈 허용: 문장이 포함된 블록에서 white-space: nowrap를 사용하여 인라인 축 텍스트 줄바꿈을 제한하지 않습니다. 텍스트가 자연스럽게 새 줄로 리플로우되도록 합니다.
  • 유연한 Flexbox 및 그리드 래핑 사용 (선택사항 예시): 다중 열 카드 갤러리의 경우 상대 너비 기준점을 초과하면 항목이 세로로 쌓이도록 repeat(auto-fit, minmax(min(100%, 16rem), 1fr))와 같은 리플로우 열을 사용합니다.
/* Card container using min-height to ensure expansion and auto-fit to reflow if needed */
.card {
  padding: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  /* Use min-height so the box expands vertically when the font is enlarged */
  min-height: 10rem;
}

5. 루트 글꼴 크기를 재정의하지 않음

<meta name="text-scale" content="scale"> 요소를 통해 선택하는 경우 스타일시트에서 루트 font-size를 명시적으로 설정하지 마세요. 여기에는 :root 또는 html에 대한 선언이 포함되며 절대 단위, 상대 단위, 계산된 값에 적용됩니다.

예를 들어 루트 글꼴 크기를 고정 값으로 재정의하지 마세요.

/* ❌ DO NOT DO THIS: This can prevent the browser from applying text scaling */
html {
  font-size: 16px;
}

<meta name="text-scale" content="scale"> 선택과 env(preferred-text-scale)를 결합하여 운영체제 텍스트 조정을 수동으로 적용하지 마세요. 브라우저는 메타 선택을 통해 배율을 적용하므로 둘 다 사용하면 배율이 이중으로 적용될 수 있습니다.

/* ❌ DO NOT DO THIS: The meta opt-in already applies the operating system text scale */
:root {
  font-size: calc(1rem * env(preferred-text-scale));
}

루트 글꼴 크기는 브라우저에 맡깁니다. 브라우저는 운영체제 텍스트 배율을 자동으로 처리하고 루트 글꼴 크기를 기준으로 크기가 지정된 콘텐츠에 적용합니다.

대체 전략

<meta name="text-scale" content="scale">가 지원되지 않는 브라우저에서는 레이아웃이 점진적으로 저하됩니다. 페이지는 브라우저의 표준 기본 글꼴 크기 (일반적으로 16px)로 레이아웃을 표시하며, 사용자는 여전히 표준 수동 페이지 확대/축소 또는 핀치 투 줌 옵션을 사용할 수 있습니다.