Accessibility 본문

7.1 기본 언어 표시

주로 사용하는 언어를 명시해야 한다.

필요성

기본 언어 명시는 화면 낭독 프로그램이 언어를 인식하여 자동으로 음성을 변환하거나, 해당 언어에 적합한 발음을 제공할 수 있도록 한다.

대상

전맹

적용기술

웹 페이지에 주로 사용하는 언어를 <html> 요소에 lang 속성을 지정하여 명시

기본 언어 표시에 따른 화면 낭독기 지원 비교
개요
  • 테스트 단말기 :

    Android : SHV-E210S(갤럭시S3) 버전 4.1.1

    iOS : IPHONE_4G(16G) MC603KH 버전 6.0

아래와 같은 코드에 <html lang=" "> 속성 값을 언어 별로 한국어, 영어, 프랑스어, 독일어, 중국어, 일본어로 수정하여 테스트 진행

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>lang 국가별 설정 테스트</title>
</head>
<body>
    <strong>lang 국가별 설정 테스트</strong>
    <span>안녕하세요</span>
    <span>Hello</span>
    <span>初めまして。</span>
    <span>您好!</span>
    <span>Bonjour.</span>
    <span>¡Hola!</span>
    <span>Guten Tag</span>
    <span>Xin chào.</span>
    <span>Здравствуйте.</span>
   	<span>Buon giorno.</span>
    <span>สวัสดีครับ </span>
    <span>Apa kabar?</span>
    <span>.مرحبًا</span>
    <span>Сайн байна уу.</span>
</body>
</html>
Android

lang속성 값과 관계없이 한가지 발음으로만 읽어 줍니다.

Android of lang
예시 원발음 한국어(ko) 영어(en) 프랑스(fr) 독일어(de) 중국어(zh) 일본어(ja)
안녕하세요 안녕하세요 안녕하세요 안녕하세요 안녕하세요 안녕하세요 안녕하세요 안녕하세요
Hello 헬로우 헬로 헬로 헬로 헬로 헬로 헬로
初めまして。 하지메마시테 초메마시대 초메마시대 초메마시대 초메마시대 초메마시대 초메마시대
您好! 닌 하오 후억! 후억! 후억! 후억! 후억! 후억!
Bonjour. 봉주흐 본쥬 본쥬 본쥬 본쥬 본쥬 본쥬
¡Hola! 올라! 홀라 홀라 홀라 홀라 홀라 홀라
Guten Tag 구-텐 탁 규뗀 태그 규뗀 태그 규뗀 태그 규뗀 태그 규뗀 태그 규뗀 태그
Xin chào. 씬 짜오 씬 타워 씬 타워 씬 타워 씬 타워 씬 타워 씬 타워
Здравствуйте. 즈드랏스부이쪠 X X X X X X
Buon giorno. 부온 죠르노 뵨 기우노 뵨 기우노 뵨 기우노 뵨 기우노 뵨 기우노 뵨 기우노
สวัสดีครับ 싸왓디- 크랍 X X X X X X
Apa kabar? 아빠 까바르? 에이퍼 가다? 에이퍼 가다? 에이퍼 가다? 에이퍼 가다? 에이퍼 가다? 에이퍼 가다?
.مرحبًا 마르하반 X X X X X X
Сайн байна уу 새-응 배-노 X X X X X X
iOS

lang속성 값에 따라서 발음, 목소리, 억양이 달랐습니다.

iOS of lang
예시 원발음 한국어(ko) 영어(en) 프랑스(fr) 독일어(de) 중국어(zh) 일본어(ja)
안녕하세요 안녕하세요 안녕하세요 X X X X X
Hello 헬로우 헬로 헬로우 헬로우 헬로 헬로우 헬로우
初めまして。 하지메마시테 네마시테 X X X 쵸우 하지메마시테
您好! 닌 하오 느낌표 X X X 닌 하오 요시미
Bonjour. 봉주흐 단쥬어 본쥬르 무슈 본기워 본쥬르 봔쟈
¡Hola! 올라! 할로 할로 후야 후라 할로 하라
Guten Tag 구-텐 탁 구텐 태그 구튼 텍 류턴 테그 구-텐 탁 구-텐 택 므뗀타끄
Xin chào. 씬 짜오 진 체요 씬체이오 씬 쎄오 씬 카로 씬 짜오 씬 쏘
Здравствуйте. 즈드랏스부이쪠 체제와 브라쎗땡 브레떼예 닷트 부아 품푸뜨 X 히리오도
Buon giorno. 부온 죠르노 부안 차이아노 본 자이아노 부 쥬안노 보움 디오노 부엔 차이아노 부안 자이아노
สวัสดีครับ 싸왓디- 크랍 발음 할 수 없음 X X X X X
Apa kabar? 아빠 까바르? 에퍼 케버? 에퍼 케버? 에파 케바? 아파 카봐? 에펄 케걸? 아페케바
.مرحبًا 마르하반 발음 할 수 없음 X X X X X
Сайн байна уу 새-응 배-노 에스아이엔 브라어나우 닷트 부아 X X 히리오도

검사방법 및 QA 지표 산정방법

자동 검사방법

<html> 요소 lang 속성 유무 체크

수동 검사방법

<html> 요소 lang 속성 값 체크

빈 프레임/ 내용 없음 프레임(src="about:blank" 등)의 페이지는 검사하지 않음

오류수(건)

HTML DTD(문서 형식 정의) 에 맞게 "lang"과 "xml:lang" 제공하지 못한 페이지

XHTML
"lang"과 "xml:lang" 제공
HTML5
lang"만 제공

사례

전체 페이지의 언어 표시 사례
우수사례

HTML5

<html lang="ko">

XHTML 1.0

<html ... lang="ko" xml:lang="ko">

페이지에 사용되는 텍스트의 언어를 명시하기 위해 <html lang="XX"> 속성을 사용하십시오. 이렇게 하면 컴퓨터나 보조기술이 정보를 표현하는데 도움을 줄 수 있습니다. 또한 자동 번역 소프트웨어등도 정확하게 번역을 하는데 이러한 정보를 활용할 수 있습니다.

페이지 내에서 언어가 바뀔때 언어 표시 사례
우수사례
<p>중국어로는 "안녕하세요"라고 인사할 때 <span lang="zh">你好</span>라고 말합니다.</p>

만약 화면 낭독 프로그램에 중국어 음성엔진이 탑재 되어있다면 위의 你好를 "니하오"와 같은 중국어 발음으로 읽어주겠지만, lang속성을 지정하지 않았다면 그냥 한국식 발음으로 "이호"라고 읽어주게 됩니다.