[웹접근성 지침-일반기술 G140] 다양한 스타일로 보여 지기를 원한다면 구조와 서식을 분리하여 만들어야 합니다.

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

---

브라우저와 '보조기술'이 문서의 구조를 잘 파악하기 위해서는 HTML(=구조)와 CSS(=서식)’을 분리해서 만들어야 합니다. 

---

기술설명

이 기술의 목적은 콘텐츠를 논리적으로 '구조적 인코딩(structural encoding)'과 '표현적 인코딩(presentational encoding)'로 분리해서 '보조 기술'과 상호 작용할 수 있게 만드는 것입니다.

'구조적 인코딩'은 제목(headings), 문장(paragraphs), 목록(lists), 테이블(tables) 등과 같은 요소를 이용하여 목적에 맞는 기술을 적용하는 것입니다.

‘표현적 인코딩’은 서체(typeface), 색상(color), 서체 크기(size), 위치(position), 테두리(borders) 등과 같이 서식을 꾸며주는 효과를 말합니다.

 

보여 지는 데로 웹 페이지를 만든다면 '보조 기술'과의 상호 작용이 좋지 않습니다.

사용자는 지정된 형식과 규칙으로 제목(headings), 문장(paragraphs), 목록(lists), 테이블(tables) 등을 결정해서 구조화해야 합니다.

 

이 기술을 잘 따르면 브라우저(= user agents)는 다음과 같은 일을 할 수 있습니다.

- 기존의 콘텐츠 구조를 기반으로 섹션 순서를 바꾸거나 섹션 목록이나 링크 목록을 생성할 수 있습니다. 즉 구조 변환이 가능합니다.

- '표면적 정보'만으로는 '보조 기술'이 내용을 인식하지 못합니다. '구조적 특성’을 통해서 상호 작용을 할 수 있습니다.

  예를 들어 목록의 항목 수를 표시하거나, 끝으로 건너뛰는 목록과 같이 상호 작용이 필요한 부분은 '구조적 인코딩'이 되어 있어야

가능합니다.

- '구조적 특성'에 첨부된 '대체 표시 규칙(substituting alternate presentation rules, = WAI-ARIA)'으로 콘텐츠를 어떻게 보여줄지 정할 수 있습니다.

 

 

예시

[예시1] CSS를 사용하는 HTML

HTML문서는 제목(headings), 문장(paragraphs), 목록(lists) 등과 같이 '구조적 특징'을 적용하며, 서체 변경이나 레이아웃 힌트 등과 같은 '표현적 특징'은 사용하지 않습니다.

CSS는 '구조적 속성'에 따라  만들어진 문서를 꾸미는데 사용됩니다. HTML에서 잘 만들어진 클래스(class) 속성은 필요에 따라 마크업의 의미를 확장하며 CSS보다 더 유연한 서식을 허용합니다.

'보조 기술'은 CSS를 대체하거나 확장하여 꾸미는 것을 수정하거나 CSS를 무시하고 '구조적 인코딩'과 직접 상호작용 할수 있습니다.

 

[예시2] 태그가 지정된 PDF

PDF 문서는 대부분 서식 정보가 포함된 콘텐츠로 구성되어 있습니다.

PDF 문서의 구조에 대한 정보는 XML과 유사한 태그를 사용하여 섹션별로 제공됩니다.

즉 PDF는 태그가 적용된 문서라고 보시면 됩니다.

이런 태그의 정보는 보조 기술에서 '의미 있는 구조 변화(예: 섹션의 목록을 생성)'를 수행하거나 '구조적 특성(예: 양식(form)의 시작 부분으로 이동)'에 따라 콘텐츠와의 상호작용을 지원하는데 사용됩니다.

 

 

관련기술

C29: 스타일 전환기를 사용하여 적합한 대체 버전 제공

 

 

점검절차

1. 문서의 인코딩(= 소스)을 살펴봅니다.

2. 구조적 정보와 기능이 명확하게 제공되고 있고 표현 정보와는 논리적으로 잘 분리되어있는지 확인합니다.

---

나의 정리

웹 페이지를 만들 때 '구조'와  '서식'으로 나누어 만들어지는데요.

'구조'는 문서 뼈대와 정보를 말하며 HTML로 만들어 지며 이렇게 만들어진 것을 '구조적 인코딩(structural encoding)'이라고 합니다.  '서식'은 문서를 꾸미는 것으로 CSS로 만들어 지며 이것을 '표현적 인코딩(presentational encoding)'이라고 합니다.

이렇게 '구조'와 '서식'으로 나누어 만드는 이유는 브라우저가 웹 페이지의 구조를 잘 파악할 수 있게 하기 위해서 입니다.

브라우저가 웹 페이지 구조를 파악하고 있다면 이를 기반으로 하여 '보조기술'과 상호작용하여 사용자에게 더 좋은 서비스를 제공할 수 있습니다.

그리고 '보조기술'은 '구조'를 통해 웹 페이지를 파악하고 정보를 얻지 '서식'에는 거이 정보를 얻지 않습니다.

즉 '보조기술'은 웹페이지의 구조를 알기 위해 'HTML'이 피리요하며, 문서를 꾸미는 CSS는 필요가 없습니다. 그래서 HTML과 CSS로 나누어 작업하면  '보조기술' 은 더 쉽고 빠르게 웹페이지의 내용을 파악 할 수 있게 됩니다.  

   

브라우저와 '보조기술'이 문서의 구조를 잘 파악하기 위해서는 HTML(=구조)와 CSS(=서식)’을 분리해서 만들어야 합니다. 

 

---

 

G140: Separating information and structure from presentation to enable different presentations

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

G140: Separating information and structure from presentation to enable different presentations | Techniques for WCAG 2.0

---

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

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

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

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