섹션에 대한 질문 about fdc

[yamoo9]

각 섹션(Section)은 섹션을 대표하는 적절한 제목이 요구됩니다.

섹션에 제목이 필요한 이유는 사람 또는 로봇(검색엔진, 스크린리더 등) 등이
콘텐츠를 인식하고 이해할 수 있어야 하기 때문입니다.

UI 디자인에서 항상 섹션마다 제목을 시각적으로 표시하지 않지만,
구조 상으로는 제목을 소유해야 합니다.

이에 대한 근거로는 웹 표준과 접근성 준수 사항에서 찾을 수 있습니다.
먼저 섹션 요소 내부에 제목이 없을 경우, 문법 검사 과정에서 경고합니다.

표준 문법 검사 결과 경고 메시지

접근성 가이드라인 WCAG2

---

섹션이 시작되는 위치에 적절한 제목을 삽입한 후, UI 디자인 뷰에서
눈에 보여야 하지 않을 경우 다음과 같은 방법을 사용합니다.

HTML 섹션/섹션제목 구조화 코드

<section class="news">
  <h1 class="a11y-hidden">News Headline</h1>
  <!-- .... -->
</section>

HTML 요소를 화면에서 감추되, 인식이 되도록 하는 CSS 클래스 모듈

.a11y-hidden {
  overflow: hidden;
  position: absolute;
  clip:     rect(0 0 0 0); /* IE 6,7 */
  clip:     rect(0,0,0,0);
  width:    1px;
  height:   1px;
  margin:   -1px;
  border:   0;
  padding:  0;
}
.a11y-hidden.focusable:focus {
  overflow: visible;
  position: static;
  clip:     auto;
  width:    auto;
  height:   auto;
  margin:   0;
}
caption.a11y-hidden { position: static; }

[sp2armint]

제 질문이 너무 빈약했던 것 같습니다.
다시 적어볼게요 :-)

어제 네이버의 디자인을 벗기셨을 때, 텍스트만 있던 화면을 기준으로 여쭈어 볼게요.

로고가 들어가는 자리, 메뉴가 들어가는 자리 등 그 각각의 자리를 저는 섹션으로 이해했습니다.

그리고 그 각 섹션에 제목을 지어주어야 한다고 이해했습니다.
로고가 들어가는 자리에는 logo, 메뉴가 들어가는 자리에는 menu 이런 식으로요.

위의 첨부 이미지로 '섹션에 대한 이름을 지어주는 방법'을 제가 이해하기로는
h1 ~ h6 을 통해 직접적으로 보여지든 보여지지 않든 css에서 코딩을 해 두어야 한다는 말씀으로 들리는데
이렇게 이해하는 것이 맞는지 궁금합니다.

직관적으로 섹션에 대한 이름을 지어준 예시 코딩의 스크린샷으로 알려주시면 이해하기 쉬울 것 같아요.
이런 코드가 있는데 어떤 부분이 섹션에 대한 '이름'을 지어준 예시이고 이렇게 보이고
장애인들이 실질적으로 사용했을 때 들리는 '그 이름'을 지어준 예시이다 하고요.

[yamoo9]

넵 직관적인 이해를 위한 이미지 첨부 드려요 ^ㅡ^

시각 장애인의 경우, 웹 사이트 접속 시 제목 간 이동으로 통해 페이지를 탐색합니다.
잡지를 보는 사람들이 목차를 보고 관심 주제 페이지를 넘겨 글을 읽는 것과 마찬가지죠.
그렇기에 각 섹션은 "이 섹션의 주제는 무엇이다" 라고 말해줄 수 있는 적절한 제목이 필요합니다.