English엔 lang=en을
이번 546편은 언어 변경 링크에 lang 속성을 선언하고 레이블과 일치하는 언어 코드를 속성값으로 제공하라는 규칙입니다. 이로써 언어 변경 7개 규칙이 마무리됩니다.
KRDS CP-426 — 링크에 lang 속성을 선언하고 레이블과 일치하는 언어 코드를 속성값으로 제공하고 있다.
0. 들어가며 — ’English’를 스크린 리더가 한국어로 읽으면
이번 546편은 언어 변경 링크에 lang 속성을 선언하고 레이블과 일치하는 언어 코드를 속성값으로 제공하라는 규칙입니다. 이로써 언어 변경 7개 규칙이 마무리됩니다.
언어 변경 링크의 레이블은 — 해당 언어로 쓰여 있죠(‘English’, ‘中文’, CP-421). 그런데 — 그 부분에 lang 속성이 없으면, 한국어 페이지의 스크린 리더가 ’English’를 한국어 발음으로 어색하게 읽습니다. CP-426은 lang 속성으로 그 부분의 언어를 알리라고 규정합니다. 이번 편을 풀어냅니다.
1. 원문 — lang 속성 선언 + 일치하는 언어 코드
CP-426 (컴포넌트 > 언어 변경) “링크에 lang 속성을 선언하고 레이블과 일치하는 언어 코드를 속성값으로 제공하고 있다.”
언어 변경 링크에 lang 속성을 두고, 그 레이블의 언어와 일치하는 언어 코드(en, zh 등)를 속성값으로 제공하라는 뜻입니다.
정리: 언어 링크에 그 언어의 lang 속성을 선언하라. 이게 CP-426입니다.
2. 왜 lang 속성인가
언어 변경 링크의 레이블은 CP-421대로 해당 언어로 쓰여 있습니다(‘English’, ‘中文’, ‘日本語’). 그런데 그 페이지 전체는 보통 한국어(<html lang="ko">)죠. 이 한국어 페이지 안에 영어 ‘English’나 중국어 ’中文’ 같은 다른 언어 텍스트가 섞여 있는 겁니다. 이때 그 부분에 lang 속성으로 ’여긴 다른 언어’임을 알려야 합니다.
lang 속성이 없을 때의 문제:
스크린 리더 발음 오류 한국어 페이지(lang="ko")의 스크린 리더는 모든 텍스트를 한국어 발음·억양으로 읽습니다. 그런데 ‘English’라는 영어 단어를 한국어 음성 엔진이 읽으면, ’엔글리쉬’를 한국어식으로 어색하게 발음하죠. ’中文’(중국어), ‘Tiếng Việt’(베트남어)도 한국어 엔진이 읽으면 엉뚱하게 들립니다. 그 언어 사용자가 자기 언어 이름을 못 알아듣죠.
정확한 발음 필요 언어 변경 링크는 그 언어 사용자가 듣고 자기 언어를 찾는 게 목적입니다. 그러려면 그 부분을 그 언어 음성으로 정확히 읽어줘야 하죠.
그래서 CP-426은 — 각 언어 링크에 lang 속성을 선언하라고 합니다:
lang 속성 선언 — 영어 링크에 lang="en", 중국어 링크에 lang="zh", 일본어에 lang="ja"처럼 — 그 레이블의 언어 코드를 lang 속성으로 줍니다.
<a href="..." lang="en">English</a> <a href="..." lang="zh">中文</a>
효과 그러면 스크린 리더가 그 부분을 만나면 음성 엔진을 그 언어로 전환해 읽습니다. ’English’를 영어 발음으로, ’中文’을 중국어 발음으로요. 그 언어 사용자가 자기 언어 이름을 정확히 듣고 알아보죠. 이는 WCAG 3.1.2 부분 언어(Language of Parts) 기준입니다 페이지 주 언어와 다른 부분은 그 언어를 명시해야 한다는 거죠.
‘레이블과 일치하는’ 코드. 핵심은 lang 속성값이 레이블의 언어와 일치해야 한다는 것입니다. 레이블이 ‘English’(영어)면 lang="en"(영어 코드). 레이블이 ‘中文’(중국어)면 lang="zh". 레이블 텍스트의 언어와 lang 코드가 맞아야 스크린 리더가 올바로 읽죠. 틀리면(English에 lang=“ko”) 오히려 잘못 읽습니다.
언어 코드는 lang 속성에(CP-422 연계). CP-422에서 — 언어 코드(EN·ZH)를 화면 레이블로 쓰지 말라고 했죠. 그 코드의 올바른 자리가 바로 이 lang 속성입니다. 화면 레이블은 온전한 이름(English), 코드는 lang 속성(en)으로 — 역할을 나누죠. CP-422(화면은 이름) + CP-426(코드는 lang)이 함께 갑니다.
전환될 언어 vs 현재 언어. lang 속성은 — 그 레이블의 언어를 가리킵니다(전환될 언어). ‘English’ 링크는 영어 레이블이니 lang="en"이죠. 링크를 눌러 이동할 페이지의 언어와도 보통 일치하고요.
이 규칙은 언어 변경의 ’음성 정확성’을 담당합니다 — 각 언어 링크에 lang 속성을 줘(426), 스크린 리더가 그 언어 이름을 그 언어 발음으로 정확히 읽게 하죠. 외국 사용자가 자기 언어를 듣고 찾는 핵심입니다. 언어 변경 7개 규칙이 이로써 마무리됩니다.
정리하면 — 한국어 페이지의 ‘English’·‘中文’ 같은 다른 언어 레이블에 lang 속성이 없으면 스크린 리더가 한국어 발음으로 어색하게 읽으므로, 각 언어 링크에 레이블과 일치하는 언어 코드를 lang 속성으로 선언해 정확히 읽히게 해야 합니다.
3. 점검 / 개선
무엇을 점검하나
lang 속성 선언 — 각 언어 링크에 lang 속성이 있는가.
레이블 일치 — lang 값이 레이블의 언어와 일치하는가(English→en, 中文→zh).
스크린 리더 발음 — 스크린 리더가 그 언어 이름을 그 언어 발음으로 읽는가.
개선 방향
각 언어 링크에 lang 속성(English→lang=“en”, 中文→lang=“zh”) 선언.
lang 값과 레이블 언어 일치(WCAG 3.1.2). 화면 레이블은 온전한 이름(CP-422).
4. 누가 담당하나 / 우리 사이트에 해당될까?
| 역할 | 책임 |
|---|---|
| 퍼블리셔/개발 | lang 속성 선언 구현 |
| QA/접근성 | 스크린 리더 언어 발음 검증 |
| 기관 유형 | CP-426 적용 |
|---|---|
| 중앙행정기관(대표·운영) / 공공기관 / 지자체 | ✅ 필수 (다국어 지원 시) |
웹접근성 의무 대상이며 다국어를 지원하는 사이트에 해당됩니다.
5. 30초 자가진단 + FAQ
✅ 30초 자가진단
□ 각 언어 링크에 lang 속성이 있나요?
□ lang 값이 레이블의 언어와 일치하나요(English→en, 中文→zh)?
□ 스크린 리더가 그 언어 이름을 그 언어 발음으로 읽나요?
❓ FAQ
Q1. lang 속성이 없으면 어떻게 되나요? 한국어 페이지의 스크린 리더가 ’English’를 한국어 발음으로 어색하게 읽습니다. 그 언어 사용자가 자기 언어를 못 알아듣죠. Q2. lang 값을 어떻게 정하나요? 레이블의 언어와 일치시킵니다. English→lang=“en”, 中文→lang=“zh”. 틀리면 오히려 잘못 읽히죠. Q3. CP-422(코드 축약 금지)와 모순 아닌가요? 아닙니다. 화면 레이블은 온전한 이름(English), 코드는 lang 속성 (en)입니다. 역할을 나누죠. 함께 갑니다.
6. 마무리
CP-426의 메시지:
English엔 lang=en을 — 언어 링크에 레이블과 일치하는 lang 속성을 선언하라.
다른 언어 레이블에 lang 속성이 없으면 스크린 리더가 한국어 발음으로 어색하게 읽습니다. 각 언어 링크에 일치하는 언어 코드를 lang 속성으로 줘 정확히 읽히게 하는 게 핵심이죠. 이로써 언어 변경 7개 규칙이 마무리됩니다. 다음 편부터는 화면 크기 조정(Text resize)입니다.
다음 편 예고 ▶ 「547. (CP-427) 화면 크기 조정 — 사용자가 글자/화면 크기를 조정하는 데 사용하고 있다.」
ViewCheck는 언어 링크에 lang 속성이 올바로 선언됐는지를 진단합니다.
📚 참고 출처
KRDS 컴포넌트 — 언어 변경(Language switcher) 가이드 — https://www.krds.go.kr/html/site/component/component_42.html
WCAG 2.1 SC 3.1.2 Language of Parts — https://www.w3.org/WAI/WCAG21/Understanding/language-of-parts.html
KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준
KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준
관련 글
다음 호는 언제?
이번 846편은 간행물 자료의 발행 주기 정보를 본문의 부제목이나 별도 안내 영역에 제공하라는 규칙입니다. 그리고 이 편이 — 846 규칙 완전 분해 시리즈의 마지막 한 편입니다.
방대한 자료를 효율적으로
이번 845편은 목록에 필터링, 정렬 방식, 상세 검색(기간, 자료 유형 등) 기능을 제공하여 정보를 효과적으로 조회하라는 규칙입니다. [정책 자료 탐색] 서브섹션의 시작이죠.
적힌 대로 가야 한다
이번 844편은 모든 링크는 실행하였을 때, 링크 레이블에 명시된 적절한 화면으로 이동하라는 규칙입니다.