-
웹 접근성 html lang 속성 :: 마이구미HTML, CSS 2016. 8. 16. 16:32반응형
이번 글은 html lang 속성에 대해 알아볼 것이다.
다들 lang 속성이 무엇을 뜻하는 지는 짐작할 것이다.
단순히 언어 지정하는 것이 아닌가?
맞다. 하지만 단순히 이렇게만 알고 있으면 안된다.
<!DOCTYPE html> <html> <head lang="ko"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title></title> </head> <body> </body> </html>
기본적으로 위와 같이 셋팅하여 사용한다.
ko... 뭐 코리아네.. 대수롭지 않게 생각했을 것으로 예상한다.
그래도 왜 쓰는지 정확히 알고 가야하지 않겠나?
쉬운 내용이니 한번 읽어보길 바란다.
lang 속성은 웹 접근성에 관한 내용이다.
한국형 웹 콘텐츠 접근성 지침(KWCAG) 2.1에는 웹페이지의 head 요소 안에 페이지의 기본 언어 선언을 규정하고 있습니다.
지침을 보다시피 필히 명시되줘야한다.
그렇다면 왜 명시해줘야하는가?
화면 낭독 프로그램 (스크린 리더) 이 언어를 인식하여 자동으로 음성을 변환하거나, 해당 언어에 적합한 발음을 제공할 수 있도록 한다.
그렇다.
lang 속성에 명시된 값을 통해 스크린 리더가 인식을 하기 때문이다.
스크린 리더는 시각장애인을 위한 보조공학이다.
오픈된 것이 많으니 테스트 해보면 좋을 것이다.
맥의 경우에는 command + f5를 누르면 보이스오버가 실행된다.
lang 속성 활용에 대한 예제를 보자.
http://khsruru.com/wp-content/uploads/2016/05/language-attribute-is-applied.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>English language attribute is applied</title>
</head>
<body>
<p>Hello, this is an English text.</p>
<p>안녕하세요, 한국어 언어 속성이 적용되지 않은 텍스트입니다.
Lang 속성을 인식하여 언어에 맞는 자동 음성엔진 변환을 지원하는 스크린리더로 이 텍스트를 읽으면 한글을 읽지 못할 것입니다.</p>
<p lang="ko">안녕하세요, 이 텍스트는 한국어 언어 속성이 적용된 텍스트입니다.
Lang 속성을 인식하여 언어에 맞는 자동 음성엔진 변환을 지원하는 스크린리더에서도 이 텍스트를 잘 읽을 것입니다.</p>
<h2>음성으로 들어보기</h2>
<audio controls>
<source src="http://khsruru.com/wp-content/uploads/2016/05/20160520_052128.mp3" type="audio/mp3"/>
귀하의 브라우저는 이 형식의 오디오 재생을 지원하지 않습니다.</audio>
</body>
</html>
위 예제는 html 태그 안의 lang 속성에 영어를 명시하였다.
위 예제는 html 태그 안의 lang 속성에 영어를 명시하였다.
한글이 있는 태그에는 또 다시 lang 속성을 지정해주었다.
이렇게 하는 이유는 ko로 지정했을 경우 스크린 리더는 영어를 자동 변환하여 제공하지만,
en로 지정했을 경우는 한글로 자동 변환되지 않는다고 한다.
물론 어떤 TTS(텍스트 음성 변환) 엔진을 쓰고 있냐에 따라 다르다.
보이스오버는 명시된 한글, 영어 구분 없이 잘 되는 걸 확인하였다.
꼭 명시하자.
웹 접근성을 모두가 준수하는 날을 다함께 노력했으면 좋겠다.
참고 자료
http://darum.daum.net/accessibility/mobile/index_web_7_1
http://nuli.navercorp.com/sharing/blog/post/1132824
반응형'HTML, CSS' 카테고리의 다른 글
웹 접근성 API 보조공학과 상호작용 :: 마이구미 (0) 2016.08.21 웹 접근성 tabindex 속성 :: 마이구미 (0) 2016.08.18 이미지 롤링 [transition] :: 마이구미 (0) 2016.08.01 웹 페이지 <!DOCTYPE> :: 마이구미 (0) 2016.07.28 [웹표준] Table 태그에 대해 알아보자 :: 마이구미 (0) 2016.07.22