콘텐츠 구조

MDN Web DocsUsing HTML landmark roles to improve accessibility | MDN Blog

Using HTML landmark roles to improve accessibility | MDN Blog

Learn what HTML landmark roles are, how they improve accessibility, and how you can include them on your website effectively.

MDN Web Docs

콘텐츠 구조

• 스타일 측면만 고려하지 말고 (비시멘틱 태그인 div, span 남발)

• 구조적 요소인 시멘틱 태그를 적절하게 잘 사용하여 스크린 리더 같은 AT 사용자들에게도 중요한 맥락을 제공해야 한다.

구조적 요소의 역할

• 콘텐츠의 개요(Outline) 역할
• 시멘틱 태그(<header>, <nav>, <main>, <section> 등)를 사용하면, 페이지가 논리적으로 잘 구성되고, 콘텐츠의 구조가 명확해짐.

• 내비게이션 포인트(Anchor points) 역할
• 보조 기술(AT) 사용자는 이 구조적 요소들을 활용해 콘텐츠 내에서 쉽게 이동할 수 있음.

예시

시멘틱 태그 사용

• 시멘틱 HTML 요소를 사용하면 각 요소의 고유한 의미가 접근성 트리(Accessibility Tree)에 전달되고,

• 보조 기술(AT)이 이를 활용하여 콘텐츠의 의미를 보다 정확하게 이해할 수 있다.

• 비시멘틱 요소보다 시멘틱 요소를 사용하면 콘텐츠에 더 많은 의미를 부여할 수 있다.

Landmarks

역할

navigable regions(탐색 가능한 영역)은 사용자가 키보드(예: Tab 키)나 보조 기술(예: 스크린 리더)을 사용하여 쉽게 이동할 수 있는 영역을 의미

• 보조 기술이 이를 자동으로 인식하고 사용자가 빠르게 이동할 수 있다.

• 추가적인 ARIA 속성이 없을 경우 AT가 해당 영역을 자동으로 탐색하지 못한다.

권장사항

• 각 페이지마다 최소한 하나의 랜드마크를 제공하는 것이 권장된다.

• HTML과 ARIA가 중복 정보를 제공한다면 HTML 랜드마크만 사용하는 것이 권장된다. (브라우저 지원이 매우 강력하다)

📌

Main Landmark: ARIA Landmarks Example

Main Landmark: ARIA Landmarks Example

When there is more than one main landmark on a page, each should have a unique label.

예시

<div>
    <div>...</div>
</div>

<div>
    <p>Stamp collecting, also known as philately, is
    the study of postage stamps, stamped envelopes,
    postmarks, postcards, and other materials relating
    to postal delivery.</p>
</div>

<div>
<p>© 2022 - Stamps R Awesome</p>
</div>

<header>
    <nav>...</nav>
</header>
<main>
    <section aria-label="Introduction to stamp collecting">
    <p>Stamp collecting, also known as philately, is
    the study of postage stamps, stamped envelopes,
    postmarks, postcards, and other materials relating
    to postal delivery.</p>
    </section>
</main>
<footer>
<p>© 2022 - Stamps R Awesome</p>
</footer>

Heading

YouTubeWhy headings and landmarks are so important -- A11ycasts #18

Why headings and landmarks are so important -- A11ycasts #18

Accessibility Fundamentals: Semantics and Navigating Content https://goo.gl/KgU3v3 One of the key goals in building an accessible experience is to make sure users of assistive technology can browse the page efficiently. Proper usage of h1-h6 headings can really improve the browsing experience for someone on a screen reader, because they help the user quickly create a mental outline for the page content. Combine this with HTML5 landmark elements like main and nav, and the user can take advantage of built-in screen reader feature to quickly jump from one section of the site to the next. Today on A11ycasts I'll show you how this works using the VoiceOver screen reader and a few simple examples. Screen reader navigation strategy survey: https://goo.gl/H6H8OB Watch all A11ycasts episodes: https://goo.gl/06qEUW Subscribe to the Chrome Developers YouTube channel for updates on new episodes of A11ycasts: http://goo.gl/LLLNvf

YouTube

• 올바르게 구현되었을 때, HTML의 제목(heading) 레벨들은 전체 페이지 콘텐츠의 목차를 형성한다.

• h1~h6 까지 총 6개로 제목을 나타낼 수 있다.

• <h1>은 페이지에서 가장 중요한 정보를 표시하는 데 사용되며,

• <h6>은 가장 하위의 덜 중요한 정보를 나타내는 데 사용된다.

• 보조 기술(AT) 사용자들은 제목을 주요 탐색 수단으로 활용하기 때문에 제목 레벨의 순서는 중요하다.

• h1에서 갑자기 바로 h5로 건너뛰는 등의 행위는 지양해야 한다.

예시

<header class="center">
  <h1 class="serif lead size-xl">Stamp collecting</h1>
</header>

<main>
  <section aria-label="Introduction to stamp collecting">
    <h2 class="size-l serif">What is stamp collecting?</h2>
    <p>Stamp collecting, also known as philately, is the study of postage stamps, stamped envelopes, postmarks, postcards, and other materials relating to postal delivery.</p>
  </section>

  <section aria-label="Start a stamp collection">
    <h2 class="sansserif radial size-l">How do I start a stamp collection?</h2>
    <h3 class="serif size-m">Required equiment</h3>
    <p>...</p>

    <h3 class="serif size-m">How to acquire stamps</h3>
    <p>...</p>

    <h3 class="serif radial size-s">Organizations you can join</h3>
    <p>...</p>
  </section>

</main>

Lists

HTML 리스트 태그 3가지

ordered list <ol>

• 순서가 있는 1234, abcd, …

• list item <li> 태그를 하위로 가진다.

 

unordered list <ul> (순서가 없는)

• list item <li> 태그를 하위로 가진다.

 

description list <dl> (설명 목록)

• 설명할 용어(term)은 <dt> 태그로 명시하고,

• 용어에 대한 정의(definition)은 <dd> 태그를 사용한다.

의미

1. 해당 리스트의 이름과 총 항목 개수를 사용자에게 알려준다.

2. 또한 사용자가 리스트 내에서 이동할 때, 각 항목을 읽어주면서
"총 5개의 항목 중 1번 항목", "총 5개의 항목 중 2번 항목"
이런 식으로 안내해 준다.

예시

<div>
  <p>How do I start a stamp collection?</p>
  <p>Equipment you will need</p>
    <div>
      <p>Small tongs with rounded tips</p>
      <p>Stamp hinges</p>
      <p>Stockbook or albumn</p>
      <p>Magnifying glass</p>
      <p>Stamps</p>
    </div>
</div>

<div>
  <h1>How do I start a stamp collection?</h1>
  <h2>Equipment you will need</h2>
  <ol>
    <li>Small tongs with rounded tips</li>
    <li>Stamp hinges</li>
    <li>Stockbook or albumn</li>
    <li>Magnifying glass</li>
    <li>Stamps</li>
  </ol>
</div>

Tables

• 데이터를 정리하거나

• 페이지 레이아웃을 구성하는 데 사용된다.

Layout

• <th>나 <caption> 처럼 관계와 의미를 추가하는 구조적 요소는 사용하지 않아야 한다.

• ARIA role을 presentation 또는 aria-hidden 속성을 명시적으로 주어 AT가 무시하도록 해야한다.

<table>
  <caption>My stamp collection</caption>
  <tr>
    <th>[Stamp Image 1]</th>
    <th>[Stamp Image 2]</th>
    <th>[Stamp Image 3]</th>
  </tr>
</table>

<table role="presentation">
  <tr>
    <td>[Stamp Image 1]</td>
    <td>[Stamp Image 2]</td>
    <td>[Stamp Image 3]</td>
  </tr>
</table>

Data

<table>
  <tr>
    <td>Animal</td>
    <td>Year</td>
    <td>Condition</td>
  </tr>
  <tr>
    <td>Bird</td>
    <td>1947</td>
    <td>Fair</td>
  </tr>
  <tr>
    <td>Lion</td>
    <td>1982</td>
    <td>Good</td>
  </tr>
  <tr>
    <td>Horse</td>
    <td>1978</td>
    <td>Mint</td>
  </tr>
</table>

<table>
  <caption>요일별 식단표</caption>
  <thead>
    <tr>
      <th></th>
      <th scope="col">월</th>
      <th scope="col">화</th>
      <th scope="col">수</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">아침</th>
      <td>토스트</td>
      <td>시리얼</td>
      <td>오트밀</td>
    </tr>
    <tr>
      <th scope="row">점심</th>
      <td>샐러드</td>
      <td>김밥</td>
      <td>파스타</td>
    </tr>
  </tbody>
</table>