3.1.2 부분 언어 표시

요구 사항

콘텐츠 안의 각 구절이나 문구의 언어를 프로그램이 판별할 수 있어야 합니다. 기본 언어와 다른 언어로 된 문장·문단에는 해당 요소에 lang 속성을 붙입니다.

예외: 고유 명사, 기술 용어, 어느 언어인지 정할 수 없는 단어, 주변 텍스트 언어에서 일상적으로 쓰여 그 언어의 일부가 된 단어나 구절은 지정하지 않아도 됩니다. 예를 들어 한국어 문서 속의 "Apple", "JavaScript", "OK"에는 따로 지정할 필요가 없습니다.

왜 필요한가요

화면낭독기는 lang이 바뀌는 곳에서 음성 엔진을 전환합니다. 영어 인용문이 한국어 음성으로 읽히면 알아듣기 어렵습니다. 반대로 지나치게 잘게 지정하면 음성이 자주 바뀌어 오히려 불편하므로, 실제로 다른 언어로 읽어야 하는 구절에만 지정합니다.

도움받는 사용자

• 시각장애인(화면낭독기 사용자)
• 점자 단말기 사용자
• TTS를 쓰는 읽기장애 사용자

적용 방법

다른 언어의 문단·인용문·문장에 lang을 붙입니다. 이미 있는 요소가 없으면 <span>으로 감쌉니다.

<p>W3C는 접근성을 다음과 같이 정의합니다.</p>
<blockquote lang="en">
  <p>Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them.</p>
</blockquote>

언어 선택 메뉴처럼 각 언어 이름을 그 언어로 표기하는 경우에도 lang을 붙이면 각각 올바른 발음으로 읽힙니다. 링크 대상 문서의 언어를 알리려면 hreflang을 함께 쓸 수 있습니다.

<ul>
  <li><a href="/ko/" lang="ko" hreflang="ko">한국어</a></li>
  <li><a href="/en/" lang="en" hreflang="en">English</a></li>
  <li><a href="/ja/" lang="ja" hreflang="ja">日本語</a></li>
</ul>

aria-label처럼 속성 값에 들어간 텍스트도 요소의 lang을 따르므로, 레이블 언어와 요소 언어가 어긋나지 않게 합니다.

사례

<p>그의 좌우명은 <q>Carpe diem, quam minimum credula postero</q>였습니다.</p>

<p>그의 좌우명은 <q lang="la">Carpe diem, quam minimum credula postero</q>였습니다.</p>

자주 하는 실수

• 영어 원문 인용, 영문 약관 등 긴 외국어 구간에 lang을 지정하지 않습니다.
• 언어 선택 메뉴의 "English", "日本語" 등에 언어를 지정하지 않아 한국어 음성으로 읽힙니다.
• 틀린 언어 코드를 지정합니다(예: 일본어에 lang="jp" — 올바른 값은 ja).

검사 방법

• 페이지에서 기본 언어와 다른 언어로 된 구절을 찾습니다(고유 명사·기술 용어 등 예외 제외).
• 해당 구절 또는 상위 요소에 올바른 lang 값이 있는지 개발자 도구로 확인합니다.
• 화면낭독기로 읽어 해당 구간에서 음성 언어가 바뀌는지 확인합니다.

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 3.1.2 (새 창)