WCAG 3.1.2: 부분의 언어

- 제가 할 일: - 원문의 의미와 톤을 유지합니다. - 문장 구조와 문단, 줄바꿈을 그대로 보존합니다. - 숫자, 기호, 고유명사를 원문과 동일하게 유지합니다. - 성별 관련 표현을 문맥에 맞게 자연스럽게 번역합니다. - 번역 후 원문과의 의미·형식 일치 여부를 간단히 점검합니다. WCAG 3.1.2는 페이지의 기본 언어와 다른 언어로 작성된 웹 콘텐츠의 모든 구절, 문구 또는 섹션이 lang 속성을 사용하여 프로그래밍 방식으로 식별되어야 한다고 요구합니다. 이는 보조 기술, 특히 스크린 리더가 발음 엔진을 자동으로 전환하여 오디오 출력에 의존하는 사용자를 위해 콘텐츠를 정확하게 읽어 줄 수 있도록 합니다.

이 규칙의 의미

WCAG 3.1.2 — 부분의 언어(Language of Parts)는 이해 가능(Understandable) 원칙 아래의 레벨 AA 기준이다. 이 기준은 전체 페이지의 기본 언어를 선언하도록 요구하는 3.1.1(페이지의 언어, Language of Page)을 직접적으로 확장한 것이다. 기준 3.1.2는 한 걸음 더 나아가, 페이지의 기본 언어와 다른 언어로 작성된 구절, 문장, 또는 콘텐츠의 일부가 있을 때마다, 그 부분에 해당 언어를 식별하는 lang 속성을 부여해야 한다고 요구한다.

실질적인 HTML 관점에서 보면, 이는 언어가 전환되는 부분을 감싸는 어떤 요소에든 lang 속성을 적용해야 함을 의미한다. 속성 값은 유효한 BCP 47 언어 태그여야 한다. 예를 들어 영어는 lang='en', 프랑스어는 lang='fr', 독일어는 lang='de', 터키어는 lang='tr'와 같이 표기한다. 방언별 발음이 중요한 경우에는 lang='en-US'나 lang='tr-TR'와 같은 지역 서브태그를 사용하는 것이 허용되며 권장된다.

준수(pass)는 사람이 읽을 때 다른 언어에 속한다고 인지할 수 있는 모든 구분된 언어 구간이 올바른 lang 속성을 가진 요소로 감싸져 있을 때 발생한다. 위반(fail)은 다른 언어로 된 구절이 존재하지만 lang 속성이 없거나, 잘못된 속성을 가진 경우에 발생한다. 예를 들어 프랑스어 문장을 lang='de'로 표시하는 경우가 이에 해당한다.

WCAG는 이 기준에 대해 세 가지 명시적인 예외를 인정한다. 첫째, 고유 명사 — 인명, 브랜드명, 지명 — 는 다른 언어에서 유래했더라도 언어 태깅이 필요 없다. 둘째, 기본 언어의 어휘로 인정되는 전문 용어 (예: 의학 관련 영어 페이지에서 사용되는 라틴어 구절 in vitro)는 예외이다. 셋째, 기본 언어에 완전히 흡수되어 그 기원이 모호해진 언어를 특정하기 어려운 단어 역시 예외이다. 이러한 예외는 많은 차용어가 올바르게 이해되는 데 발음 전환을 필요로 하지 않는다는 실질적인 현실을 반영한다.

lang 속성은 <span>, <p>, <div>, <blockquote>, <section>, 심지어 표의 셀인 <td>를 포함한 어떤 HTML 요소에도 지정할 수 있다. 이 속성은 모든 하위 요소에 상속되므로, 전체 블록이 대상 언어로 되어 있다면 상위 컨테이너에만 태깅해도 충분하다. 짧은 구절이 단일 언어 문단 사이에 섞여 있는 경우에만 개별 인라인 요소에 태그를 지정하면 된다.

왜 중요한가

이 기준의 주요 수혜자는 특히 시각장애가 있거나 저시력인 스크린 리더 사용자이다. 스크린 리더는 언어별 텍스트-음성 변환(TTS) 엔진에 의존한다. 터키어 스크린 리더가 lang='fr' 속성이 없는 프랑스어 문장을 만나면, 프랑스어 단어를 터키어 음운 규칙으로 발음하려고 시도하여 대부분 알아들을 수 없는 출력이 된다. 사용자는 언어가 전환되었다는 사실조차 인지하지 못하고, 단지 뒤섞인 음성을 듣게 되어 콘텐츠에 대한 이해를 완전히 상실할 수 있다.

터키의 전자상거래 및 관광 웹사이트에서 흔히 볼 수 있는 실제 상황을 생각해 보자. 터키어로 작성된 상품 페이지에 영어 브랜드명과 짧은 마케팅 슬로건이 포함되어 있고, 이어서 유럽 고객을 위한 프랑스어 법적 고지가 나오는 경우다. 영어와 프랑스어 구간에 언어 태깅이 없다면, 터키어 TTS 음성에 의존하는 시각장애 사용자는 세 구간 모두를 터키어로 발음된 것처럼 듣게 된다. 영어 슬로건은 음성적 유사성을 통해 어느 정도 추측할 수 있을지 모르지만, 프랑스어 법적 문구는 완전히 이해 불가능해져, 사용자가 중요한 계약 또는 안전 관련 정보를 놓칠 수 있다.

전용 스크린 리더뿐 아니라 텍스트-음성 도구에 의존하는 인지 장애가 있는 사용자도 영향을 받는다. 많은 주류 읽기 보조 브라우저 확장 기능은 올바른 음성을 선택하기 위해 lang 속성을 사용한다. 이 속성이 없으면 도구는 언어 전환을 무시하거나 페이지 전체에 단일 음성을 적용하여 이해도를 떨어뜨린다.

접근성을 넘어, 올바른 언어 태깅은 측정 가능한 SEO 이점을 제공한다. 검색 엔진은 lang 속성을 사용해 다국어 콘텐츠를 올바르게 색인화하여, 언어별 페이지가 지리적·언어적으로 타깃팅된 검색 결과에 노출될 가능성을 높인다. 브라우저 역시 이 속성을 사용해 정확한 번역 제안을 제공하고, 맞춤법 검사 도구는 적절한 사전을 적용하기 위해 이를 참조한다. 요약하면, 올바른 언어 표시는 장애가 있는 사용자뿐 아니라 모든 사용자에게 이익이 된다.

전 세계적으로 22억 명이 넘는 사람이 어떤 형태로든 시각 장애를 가지고 있는 것으로 추정되며, 수천만 명이 매일 스크린 리더에 의존한다. 국제 시장에서 다국어 웹 콘텐츠는 점점 더 표준이 되고 있으며, 글로벌 또는 다국어 이용자를 대상으로 하는 모든 사이트에 대해 부분의 언어(Language of Parts) 준수는 필수적인 요소가 되고 있다.

테스트 방법

자동화된 기본 스캔: 페이지에 대해 axe DevTools(브라우저 확장 또는 CI 통합)나 Google Lighthouse를 실행한다. html-has-lang 또는 html-lang-valid 위반이 있는지 확인한다. 이러한 위반은 페이지 수준의 언어 선언조차 없거나 잘못되었음을 의미하며, 3.1.2를 다루기 전에 먼저 해결해야 하는 선행 문제이다. 두 도구 모두 인라인 lang 속성 누락은 지적하지 않으므로, 이 단계는 기본 상태를 파악하는 데에만 사용된다.
시각적 콘텐츠 감사: 페이지 전체 콘텐츠를 읽고, 선언된 페이지 언어와 다른 언어로 눈에 띄게 작성된 모든 구절, 문장, 블록을 식별한다. DOM 내 위치를 기록하며 이러한 요소 목록을 유지한다. 브라우저의 DOM 검사기(브라우저 DevTools → Elements 패널)에서 각 요소(또는 가장 가까운 상위 요소)에 lang 속성이 있는지 확인한다. 값이 실제 콘텐츠 언어와 일치하는 유효한 BCP 47 태그인지 검증한다.
스크린 리더 테스트 — NVDA + Firefox(Windows): NVDA를 활성화한 상태에서 Firefox로 페이지를 연다. 화살표 키로 콘텐츠를 탐색하면서, 앞서 식별한 외국어 구절에 집중한다. 주의 깊게 듣는다. NVDA는 올바르게 태깅된 lang 속성을 만나면 자동으로 발음을 전환해야 한다. 외국어 텍스트가 기본 언어의 발음 규칙으로, 음성 변화 없이 읽힌다면 lang 속성이 없거나 잘못되었을 가능성이 크다.
스크린 리더 테스트 — JAWS + Chrome(Windows): Chrome에서 JAWS를 실행한 상태로 가상 커서를 사용해 페이지를 읽는다. JAWS의 동작은 NVDA와 유사하며, lang 값에 따라 TTS 엔진을 전환한다. 자세한 음성 모드를 활성화하여 언어 안내를 들을 수 있도록 한다. 눈에 보이는 언어에 비해 발음이 부자연스럽게 들리는 구절을 기록한다.
스크린 리더 테스트 — VoiceOver + Safari(macOS/iOS): VoiceOver를 활성화하고 VO+오른쪽 화살표로 페이지를 탐색한다. iOS 모바일 테스트의 경우 스와이프로 콘텐츠를 이동한다. Safari의 VoiceOver 역시 lang 속성을 인식하고 그에 따라 음성을 전환한다. 기기에 예상되는 외국어용 음성 팩이 설치되어 있다면, 올바르게 태깅된 요소에서 뚜렷한 음성 변화가 들릴 것이다.
BCP 47 태그 검증: 발견한 모든 lang 값에 대해 IANA Language Subtag Registry를 참조하거나 온라인 BCP 47 검증기를 사용해 유효성을 확인한다. 흔한 실수로는 lang='en-us'(소문자 지역 코드는 기술적으로 유효하지만 비관례적)나 lang='english'와 같은 잘못된 코드를 사용하는 경우가 있다.

수정 방법

터키어 문단 안의 인라인 외국어 구절 — 잘못된 예

<p>
  Bu ürün uluslararası standartlara uygundur ve
  <em>state of the art</em> teknoloji kullanmaktadır.
</p>

터키어 문단 안의 인라인 외국어 구절 — 올바른 예

<p>
  Bu ürün uluslararası standartlara uygundur ve
  <!-- lang='en' tells screen readers to switch to an English TTS engine -->
  <em lang='en'>state of the art</em> teknoloji kullanmaktadır.
</p>

여러 문장으로 된 외국어 블록 인용 — 잘못된 예

<blockquote>
  <p>La liberté commence où l'ignorance finit.</p>
  <p>— Victor Hugo</p>
</blockquote>

여러 문장으로 된 외국어 블록 인용 — 올바른 예

<!-- lang='fr' applied to the blockquote covers all descendant content -->
<blockquote lang='fr'>
  <p>La liberté commence où l'ignorance finit.</p>
  <p>— Victor Hugo</p>
</blockquote>

이중 언어 내비게이션 메뉴 — 잘못된 예

<nav>
  <ul>
    <li><a href='/tr/anasayfa'>Anasayfa</a></li>
    <li><a href='/en/home'>Home</a></li>
    <li><a href='/de/startseite'>Startseite</a></li>
  </ul>
</nav>

이중 언어 내비게이션 메뉴 — 올바른 예

<nav>
  <ul>
    <!-- Primary language (Turkish) needs no extra attribute if html lang='tr' -->
    <li><a href='/tr/anasayfa'>Anasayfa</a></li>
    <!-- English and German links receive their own lang attributes -->
    <li><a href='/en/home' lang='en'>Home</a></li>
    <li><a href='/de/startseite' lang='de'>Startseite</a></li>
  </ul>
</nav>

다국어 데이터 셀을 포함한 표 — 잘못된 예

<table>
  <tr>
    <th>Ülke</th>
    <th>Slogan</th>
  </tr>
  <tr>
    <td>Fransa</td>
    <td>Liberté, Égalité, Fraternité</td>
  </tr>
  <tr>
    <td>Almanya</td>
    <td>Einigkeit und Recht und Freiheit</td>
  </tr>
</table>

다국어 데이터 셀을 포함한 표 — 올바른 예

<table>
  <tr>
    <th>Ülke</th>
    <th>Slogan</th>
  </tr>
  <!-- lang applied to individual td elements containing foreign text -->
  <tr>
    <td>Fransa</td>
    <td lang='fr'>Liberté, Égalité, Fraternité</td>
  </tr>
  <tr>
    <td>Almanya</td>
    <td lang='de'>Einigkeit und Recht und Freiheit</td>
  </tr>
</table>

자주 발생하는 실수

짧은 인라인 구절에 lang 속성을 생략하는 경우: 개발자는 큰 외국어 구간에는 태깅을 하면서, 터키어 문장 안에 삽입된 두 단어짜리 영어 마케팅 슬로건과 같은 짧은 구절은 간과하는 경우가 많다. 예외에 해당하는 고유 명사나 전문 어휘가 아닌 한, 단어 하나로 된 외국어 표현도 태깅이 필요하다.
잘못된 BCP 47 태그 사용: lang='english', lang='turkish', lang='français'처럼 올바른 ISO 코드(lang='en', lang='tr', lang='fr') 대신 잘못된 값을 사용하면 속성이 무효가 되어 스크린 리더가 이를 완전히 무시할 수 있다.
CSS나 시각적 스타일에만 의존해 언어 전환을 암시하는 경우: 글꼴이나 색을 바꾸거나 외국어 텍스트를 이탤릭으로 표시하는 것은 시력이 있는 사용자에게 언어 차이를 알려줄 수 있지만, 보조 기술에 필요한 프로그램적 정보를 제공하지는 못한다. 스크린 리더에 대해 동작하는 유일한 메커니즘은 lang 속성이다.
스크린 리더 사용자가 문맥으로 "알아낼 것"이라고 가정하는 경우: 주변 터키어 텍스트에서 프랑스를 언급했다는 이유만으로, 뒤섞인 발음으로 들리는 구절이 실제로는 프랑스어라는 사실을 시각장애 사용자가 추론해 주기를 기대하는 것은 비현실적이며, 이해의 부담을 사용자에게 전가하는 것이다.
여러 요소로 구성된 외국어 블록에서 첫 요소에만 태깅하는 경우: 연속된 세 개의 <p> 요소가 프랑스어 구절을 담고 있다면, 첫 문단에만 lang='fr'를 지정하고 나머지 두 문단을 태깅하지 않은 상태로 두는 것은 잘못이다. 올바른 접근법은 세 문단 전체를 lang='fr'를 가진 상위 요소로 감싸거나, 각 문단에 개별적으로 속성을 추가하는 것이다.
고유 명사와 완전한 외국어 구절을 혼동하는 경우: 고유 명사에 대한 WCAG 예외는 "Paris"나 "Volkswagen"과 같은 이름에만 적용되며, 프랑스어나 독일어로 작성된 전체 문장이나 마케팅 카피에는 적용되지 않는다. 개발자가 이 예외를 잘못 적용해 상당한 분량의 외국어 콘텐츠에 lang 태깅을 생략하는 경우가 있다.
동적으로 삽입되는 콘텐츠에 언어 속성이 누락되는 경우: 외국어 콘텐츠가 JavaScript를 통해 로드되는 경우(예: CMS 기반 FAQ 블록이나 API에서 가져온 번역된 상품 설명), 개발자는 삽입되는 마크업에 lang 속성을 포함하는 것을 종종 잊는다. 서버 사이드 또는 클라이언트 사이드 렌더링 파이프라인은 텍스트 콘텐츠와 함께 언어 메타데이터도 전달해야 한다.
HTML5 문서에서 lang 없이 xml:lang만 사용하는 경우: XHTML 환경에서는 xml:lang이 적절한 속성이었지만, HTML5에서는 lang이 올바른 속성이다. HTML5 문서에서 xml:lang만 사용하는 것은 일부 브라우저에서는 동작할 수 있지만, 모든 보조 기술에서 보편적으로 지원되지는 않는다.
기본 언어 콘텐츠까지 포함하는 지나치게 넓은 컨테이너에 lang을 지정하는 경우: 터키어와 프랑스어 텍스트가 모두 포함된 구역 전체를 lang='fr'로 감싸면, 터키어 부분까지 잘못된 발음으로 읽히게 된다. 속성의 범위는 언어 경계와 정확히 일치해야 한다.
수정을 적용한 후 실제 스크린 리더로 테스트하지 않는 경우: 개발자는 종종 lang 속성을 추가한 뒤, 실제 TTS 출력을 검증하지 않고 수정이 완료되었다고 간주한다. NVDA, JAWS, VoiceOver로 테스트하는 것만이 발음 개선이 최종 사용자에게 실제로 체감되는지 확인하는 유일한 방법이다.

터키 접근성 규제와의 관계

터키의 2025/10번 대통령령(Resmi Gazete No. 32933, 2025년 6월 21일자)은 광범위한 공공 및 민간 부문 기관에 대해 디지털 접근성에 관한 구속력 있는 체계를 수립한다. 이 대통령령은 WCAG 2.2를 기술 표준으로 공식 채택하고, 레벨 AA 준수를 법적 준수의 기본 요구사항으로 규정한다.

WCAG 3.1.2 — 부분의 언어(Language of Parts)는 레벨 AA 기준으로, 대통령령이 정의한 의무적 준수 대상에 명확히 포함된다. 터키가 유럽, 중동, 중앙아시아 상업의 교차로라는 위치에 있는 만큼, 다국어 웹사이트를 운영하는 기관은 이 기준을 올바르게 구현해야 할 의무가 특히 크다. 예를 들어 외화 약관을 영어로 게시하는 터키 은행, 로밍 약관을 독일어로 제공하는 통신사, 환자 동의서를 아랍어로 제공하는 병원 웹사이트 등은 모든 외국어 구절에 프로그램적으로 언어 태깅을 적용해야 한다.

대통령령이 적용되는 기관 유형에는 공공 기관 및 공공 단체, 전자상거래 플랫폼, 은행 및 금융 기관, 병원 및 의료 서비스 제공자, 20만 명 이상의 가입자를 보유한 통신사, 여행사, 민간 운송 회사, 국가교육부(MoNE)의 인가를 받은 사립학교 등이 포함된다. 이들 기관이 레벨 AA — 3.1.2를 포함 — 를 충족하지 못할 경우, 행정 제재를 받을 수 있으며 가족·사회서비스부가 발급하는 접근성 로고(Erişilebilirlik Logosu)를 취득할 자격을 상실할 수 있다.

Erişilebilirlik Logosu는 특히 전자상거래와 금융 서비스 분야에서 터키 시장의 신뢰 신호로 점점 더 인식되고 있다. 이 로고를 획득하고 유지하려면 모든 레벨 AA 기준에 대한 준수를 입증해야 하며, 다국어 고객을 상대하거나 다국어로 법적 효력을 갖는 문서를 게시하는 터키 기관에게 부분의 언어(Language of Parts)는 특히 중요하다. 터키 법은 소비자 권리 고지나 금융 상품 약관과 같은 특정 고지가 장애가 있는 사용자에게도 이해 가능해야 한다고 요구하므로, 언어 태깅은 단순한 기술적 모범 사례를 넘어, 대통령령의 보다 광범위한 명령에 내재된 접근 가능한 커뮤니케이션 의무의 일부이다.

로고 취득을 목표로 하는 기관은 디지털 자산 전반에 걸쳐 모든 외국어 구절을 식별하기 위한 구조화된 콘텐츠 감사를 수행하고, 콘텐츠 관리 계층에서 lang 속성 적용을 강제하는 개발 프로세스를 구축하며, 자동 및 수동 검토 주기와 함께 부분의 언어(Language of Parts)를 정기적인 접근성 테스트 프로토콜에 포함할 것이 권장된다.