[웹접근성 지침-일반기술 G138] 색상 신호를 사용할 때, '시멘틱 마크업(semantic markup)'을 사용해야 합니다

원문: https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G138.html

 

*시멘틱 마크업(semantic markup) - HTML요소를 콘텐츠의 내용과 의미에 맞게 적용하여 구조화 하는 것.

---

색상을 이용하여 어떤 의미를 전달하는 경우에는 '시멘틱 마크업(semantic markup)'으로 만들어야 합니다.

그래야 보지 못하거나 색상을 구별하지 못하여  '보조 기술'을 사용하는 사용자들 또한 콘텐츠를 올바르게 이해하고 활용할 수 있습니다.

---

기술설명

이 기술의 목적은 색상과 '시멘틱 마크업(semantic markup)'을 결합하여 정보를 전달하는 것입니다.

대부분의 사용자는 색상에 담긴 정보를 통해 콘텐츠를 빠르게 이해 할 수 있습니다.

하지만 색상을 볼 수 없는 사용자의 경우에는 '시멘틱 마크업'을 통해 단서를 제공받습니다.

브라우저(= User agents)는 이런 '시멘틱 마크업' 구조를 파악하여 사용자가 인식 할 수 있도록 만들어 줍니다.

예를 들어 다양한 유형의 구조들이 서로 다른 시각적 표현으로 보여 진다면, 청각적 표현으로는 서로 다른 음성이나 소리 크기를 사용하여 표현합니다.

 

대부분의 브라우저(= User agents)는 '시멘틱 마크업'을 통해 식별된 텍스트를 시각적으로 구별합니다.

일부 '보조 기술'은 '시멘틱 마크업'을 이용하여 생성된 콘텐츠의 특성을 결정하는 메커니즘을 제공합니다.

즉 '시멘틱 마크업'으로 웹페이지를 구성하면 '보조 기술' 사용자들이 콘텐츠를 올바르게 이해하고 활용하는데 큰 도움을 준다는 것입니다.

 

예시

양식(form)에서 '필수입력 항목'을 색상으로 강조한 경우

HTML 양식(form)에 여러 필드가 포함되어 있습니다. 속성이 '필수(required)'인 필드의 경우, 해당 레이블(label)을 빨간색으로 표시합니다.

또한 레이블에 있는 텍스트를 강조하기 위해 <strong>요소로 감싸주었습니다.

양식을 작성하기 위한 지침에는 "내용을 꼭 입력해야 하는 부분은 빨간색으로 표시하고 강조했습니다."라는 말 뒤에 예시를 보여주고 있습니다.

 

 

자료

화면 판독기의 강조가 부족합니다

구문 요소: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR 및 ACRONYM

HTML 5.0: 4.5.2 em 요소

 

 

 

관련기술

G205: 색상이 있는 양식 제어 레이블에 대한 텍스트 큐 포함

H49: 강조된 텍스트나 특수 텍스트를 표시하기 위해 의미적 마크업 사용

 

 

점검절차

색상을 이용하여 정보를 전달하는 콘텐츠가 있는 경우

1. '시멘틱 마크업'을 통해 동일한 정보를 제공하는지 확인합니다.

---

 

나의  정리

빨간색 글씨가 중요한 내용이라 던가, 파란색 글씨가 키워드라는 것 처럼, 색상을 이용하여 어떤 의미를 전달하는 경우에는 '시멘틱 마크업(semantic markup)'으로 만들어야 합니다. 그래야 보지 못하거나 색상을 구별하지 못하여  '보조 기술'을 사용하는 사용자들 또한 콘텐츠를 올바르게 이해하고 활용할 수 있습니다.

 

예를 들어 보겠습니다. 콘텐츠에서 중요하고 강조하고 싶은 글 부분을 빨간색으로 표시했습니다. 하지만 앞을 보지 못하거나 색을 구별하지 못하는 사용자들은 색상을 볼 수 없기 때문에 색상에 대한 강조의 의미를 알 수가 없습니다.

그래서 색상으로 강조된 부분을 <strong> 태그로 감싸주었습니다. 즉 '시멘틱 마크업(semantic markup)'을 이용하여 중요한 글 부분을 강조한 것입니다.

이렇게 '시멘틱 마크업(semantic markup)'로 만들어 주면 '스크린 리더'같은 보조 기술들이 이 부분을 강조해서 표현해 줍니다.

 

색상으로 정보를 전달한다면 '시멘틱 마크업(semantic markup)' 구조로 만들어야 합니다.

 

 

---

 

G138: Using semantic markup whenever color cues are used

https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G138.html

G138: Using semantic markup whenever color cues are used | Techniques for WCAG 2.0

 

---

독학으로 힘들어 하시는 분들을 위해 과외를 준비 했습니다. 

2024년 11월 한 달간 맞춤형 과외를 할 예정입니다.
입문자 분들의 참여 부탁드립니다.
교육과정은 인터뷰 후에 맞춤으로 진행할 예정입니다. 

참여하기: https://blog.naver.com/redoxup/223601934677 

[조립]에서 2024년 11월 한 달 무료 과외(HTML/CSS/jQuery)를 합니다. - 과외 신청하세요!!