🤔 들어가며
데브코스 멘토님께 PR 리뷰를 받던 중 html lang 속성에 대해 리뷰를 작성해주셨다.
나는 초기 html 태그를 생성 할때 !를 사용하여 기본 html 구조를 잡아 이때 까지 개발을 해왔다. !를 사용하여 기본 html 구조를 잡게 되면 html 태그의 lang 속성이 "en"으로 자동 설정 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body></body>
</html>가볍게 생각했던 lang 속성이 어떤 의미를 가지고 있고 어떻게 중요한지 좀 더 살펴보며 포스팅 하기로 했다.
html lang 속성??
lang 속성은 문서의 주 언어를 명시하는 속성이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body></body>
</html>그럼 해당 사이트가 어떤 언어를 뜻하는지 설정해주기만 하면 끝나는 문제냐?
뭐 맞긴 한데 왜 lang 속성이 중요한지 잘못 설정하게 되면 어떤 문제가 되는지가 중요하다.
한국형 웹 콘텐츠 접근성 지침(KWCAG) 2.1에는 웹페이지의 head 요소 안에 페이지의 기본 언어 선언을 규정하고 있습니다.
출처: https://mygumi.tistory.com/52 [마이구미의 HelloWorld:티스토리]
지침을 보면 lang 속성은 반드시 명시되어야 된다고 규정하고 있다.
lang 속성이 중요한 이유
접근성
스크린 리더, TTS(텍스트 음성 변환)과 같은 기술들은 lang 속성을 활용하여 콘텐츠를 해당 언어에 맞게 읽어준다.
lang 속성이 없거나 잘못 설정되면, 잘못된 발음으로 콘텐츠를 해석할 수 있다.
검색 엔진 최적화(SEO)
검색 엔진은 lang 속성을 사용하여 페이지의 언어를 파악하고, 이를 통해 적절한 검색 결과를 제공한다.
자동 번역
lang 속성은 브라우저의 자동 번역 기능에도 사용된다. 문서의 언어를 알면, 브라우저는 사용자에게 페이지를 번역할지 물어볼 수 있어 UX에도 매우 좋다.
lang 속성 사용법
lang 속성은 보통 태그에 적용되며, 문서 전체의 기본 언어를 설정한다.
<html lang="en">
<html lang="ko">
<html lang="ja">
<html lang="fr"> 특정 태그의 언어만 변경하려면 해당 태그의 lang 속성을 적용할 수 있다.
<p lang="en">Hi</p>
<p lang="ko">안녕하세요</p>
<p lang="fr">Bonjour</p>만약 더 자세한 언어와 국가를 표시하려면 -을 사용하여 국가 코드를 추가할 수 있다.
즉, 같은 영어라도 미국 영어, 영국 영어 이렇게 나뉘듯 더 자세한 언어를 설정할 수 있다.
<html lang="en-US">
<html lang="en-GB">👌 마치며
시각 장애인 분들의 경우 TTS(텍스트 음성 변환)의 기술로 웹 서비스를 사용한다고 한다.
예전에 어떤 글에서 본적이 있는데 웹의 최대 강점은 접근성에서 나온다고 본적이 있다.
수 많은 정보와 데이터가 웹에 있는 현 시대에서 기술을 통해 힘들게 웹 사이트를 사용하는 사람들에게 접근성은 한 번도 생각해본적이 없던 것 같다.
좋은 웹 사이트를 만들면 뭐하나 사용자들이 편하게 사용해줄 수 있고, 누구나 공평하게 웹을 사용할 수 있는 그런 웹 사이트를 만드는 개발자가 웹 사이트를 만든다고 할 수 있지 않을까?? 라고 생각된다.
