3.1.1 페이지 언어 표시

요구 사항

각 웹 페이지의 기본 언어(페이지에서 주로 쓰는 언어)를 프로그램이 판별할 수 있어야 합니다. "프로그램이 판별할 수 있다(programmatically determined)"는 말은 화면낭독기, 브라우저 같은 사용자 에이전트가 코드에서 그 정보를 읽어 낼 수 있다는 뜻입니다.

HTML 문서에서는 최상위 <html> 요소의 lang 속성으로 지정합니다. 값은 BCP 47 언어 태그를 씁니다(한국어 ko, 영어 en, 일본어 ja 등).

한 페이지에 여러 언어가 섞여 있으면 가장 많이 쓰는 언어를 기본 언어로 지정합니다. 일부 구간의 언어는 3.1.2 부분 언어 표시에서 다룹니다.

왜 필요한가요

화면낭독기는 lang 값을 보고 어떤 음성 엔진(발음 규칙)으로 읽을지 정합니다. 언어가 없거나 틀리면 한국어 문장을 영어 발음 규칙으로 읽는 등 내용을 알아들을 수 없게 됩니다.

브라우저의 자동 번역, 맞춤법 검사, 글꼴 선택, 하이픈 처리, 점자 변환도 이 정보를 사용합니다.

도움받는 사용자

• 시각장애인(화면낭독기 사용자)
• 점자 단말기 사용자
• 텍스트 음성 변환(TTS)으로 글을 듣는 읽기장애·인지장애 사용자
• 자동 번역을 사용하는 사용자

적용 방법

모든 HTML 문서의 <html> 요소에 실제 콘텐츠 언어와 맞는 lang 값을 넣습니다. 템플릿을 복사해 만든 페이지가 lang="en"을 그대로 물려받는 경우가 많으므로 공통 레이아웃에서 한 번 확인합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>회원 가입 - 예시 쇼핑몰</title>
</head>

SPA(단일 페이지 애플리케이션)에서 화면 언어를 바꾸는 기능이 있으면, 언어를 전환할 때 document.documentElement.lang도 함께 바꿉니다.

function setLocale(locale) {
  document.documentElement.lang = locale; // 'ko', 'en' ...
  renderMessages(locale);
}

사례

<html>
  <head><title>공지사항</title></head>

<!-- 내용은 한국어인데 템플릿 기본값이 남아 있음 -->
<html lang="en">

<html lang="ko">

자주 하는 실수

• <html>에 lang 속성이 없습니다.
• lang="en"처럼 실제 콘텐츠와 다른 언어를 지정합니다.
• lang="korean", lang="kr"처럼 유효하지 않은 언어 코드를 씁니다(kr은 국가 코드이며 한국어 언어 코드는 ko입니다).

검사 방법

• 소스 보기 또는 개발자 도구에서 <html> 요소에 lang 속성이 있는지 확인합니다.
• 값이 유효한 BCP 47 언어 태그이며 페이지의 주 언어와 일치하는지 확인합니다.
• 화면낭독기로 페이지를 읽어 올바른 언어 음성으로 읽히는지 들어 봅니다.

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 3.1.1 (새 창)