[웹접근성 지침-일반기술 G117] 폰트 서식을 변형하여 전달하려는 의도를 텍스트로 제공해야 한다.

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

---

글자의 색상이나 모양으로 시각적 정보를 제공하는 것이라면, 시각적으로 장애를 가진 분들을 위해 그 정보를 설명해 주는 부분도 있어야 합니다.

---

기술설명

이 기술의 목적은 폰트의 서식을 변형하여 전달하려는 의도를 텍스트로 알려주기 위한 것입니다.

의도를 알려 주기 위해서는 폰트가 시각적으로 어떻게 변형되었는지를 정확히 명시해 주어야 합니다.

글꼴, 글자크기, 밑줄, 취소선 등의 텍스트 서식을 이용하여 폰트의 보여 지는 모양을 변형 시킬 수 있습니다.

이렇게 폰트 서식을 변형하여 정보를 전달하는 경우, 이에 대한 정보는 해당 콘텐츠가 아닌 다른 곳에서 제공 될 수도 있습니다.

문서 내에 공간을 마련하거나, 폰트 서식이 변형된 곳에 바로 설명을 넣을 수도 있습니다.

 

 

예시

[예시.1] 굵은 글씨는 '새로운 콘텐츠'라는 의미입니다.

아래 예제는 웹접근성에 관련된 목록입니다. 'WCAG 2.0'은 새로운 기술이므로 강조하기 위해 굵은 글씨로 표시하였습니다.

이를 설명하기 위해 '(New)'라는 단어를 추가시켰습니다.

<h2>웹접근성 가이드</h2>
<ul>
    <li><strong>WCAG 2.0 (New)</strong></li>
    <li>WCAG 1.0</li>
    <li>Section 508</li>
    <li>JIS X 8341-3</li>
</ul>

 

 

[예시.2] 글꼴 변형에 대한 설명

이 온라인 문서는 여러 초안을 거쳤습니다. 삽입된 단어나 문장에는 밑줄을 주었고, 삭제한 것은 취소선을 주었습니다. 초안의 끝에는 ‘변경 기록’이라고 하여 변경한 사항을 모두 나열 했습니다.

 

[예시.3] 어떤 단어가 다른 글꼴을 사용하여 식별하게 했는지를 설명하며, 그에 대한 대체 방법도 알려줍니다.

이 온라인 시험은 긴 글에 대한 내용을 짧게 요약하는 것입니다. 요약한 글에는 원본 문서의 특정 단어가 포함되어야 합니다. 원본에 있던 단어나 구를 포함하는 경우, 그 부분이 잘 보이도록 다른 글꼴로 표시합니다. 또는 별도의 섹션을 만들어서 요약 시 사용 했던 원본의 단어나 구를 나열합니다.

 

 

관련기술

H49: 시맨틱 마크업을 사용하여 강조된 텍스트 또는 특수 텍스트를 표시합니다.

C22: CSS를 사용하여 텍스트의 시각적 표현 제어

 

 

점검절차

1. 형태가 다른 텍스트가 있습니다. 그런 텍스트의 형태가 정보를 전달하는데 사용되고 있는지 찾아봅니다.

2. 텍스트의 형태가 어떤 정보를 제공하고 있는지에 대한 설명이 있는지 확인합니다.

 

---

 

나의 정리

HTML은 다른 말로 웹문서입니다. 문서에서 중요한 단어나 문장에는 색상을 넣거나 굵게 표시합니다. 또는 기울이거나 밑줄을 넣기도 합니다. 이렇게 다르게 표현된 부분이 왜 다른지에 대한 설명도 제공해야 한다는 것입니다.

 

글자에 색상을 주거나, 굵게, 밑줄, 기울임 등을 주는 것은 시각적인 부분입니다.

시각 장애를 가진 분들에게는 이런 시각적인 강조를 보실 수 없기 때문에 추가적인 설명이 더해져야 합니다.

 

예를 들어서 쇼핑몰의 경우 할인 가격을 표시하기 위해 '5,000원' 라고 취소선을 넣어 주었습니다.

5천원이 아니라는 표시입니다. 하지만 시각적 장애를 가진 사용자의 경우 보조 기술을 통해 5,000원 이라는 정보로 잘못 전달 받을 수 있습니다. 이런 경우에는 '5,000원(이전 가격)' 이렇게 설명을 추가해 주어야 합니다.

 

다른 예로는 논문처럼 무엇을 설명하기 위해 다른 자료에서 내용을 인용하는 경우입니다. 인용한 단어나 문장에 밑줄을 주어 구분되어 보이게 할 수 있지만 시각적 장애를 가진 사용자들에게는 밑줄을 볼 수 없기에 어떤 단어나 문장이 인용되었는지 알 수가 없습니다.

인용된 단어와 문장이 많은 경우, 해당 단어와 문장 뒤에 일일이 '(인용글)'이라는 꼬리표를 달기도 힘들고 이런 꼬리표가 읽는데 방해가 될 수도 있습니다.

이럴 때는 문서의 마지막 부분에 '인용'라는 공간을 만들어서 인용한 단어와 글들을 목록 형식으로 제공해 주는 것도 방법입니다.

글자의 색상이나 모양으로 시각적 정보를 제공하는 것이라면, 시각적으로 장애를 가진 분들을 위해 그 정보를 설명해 주는 부분도 있어야 합니다.

 

---

 

G117: Using text to convey information that is conveyed by variations in presentation of text

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

G117: Using text to convey information that is conveyed by variations in presentation of text | Techniques for WCAG 2.0