콘텐츠 구조

디지털 접근성에서 가장 중요한 측면 중 하나는 페이지의 기본 구조입니다. 스타일만 사용하는 대신 구조적 요소를 사용하여 웹사이트 또는 앱을 빌드하면 스크린 리더와 같은 보조 기술 (AT)을 사용하는 사용자에게 중요한 컨텍스트를 제공할 수 있습니다.

구조적 요소는 화면의 콘텐츠 개요 역할을 하지만 콘텐츠 내에서 더 쉽게 탐색할 수 있도록 앵커 포인트 역할도 합니다.

시맨틱 HTML 요소를 사용하면 각 요소의 고유한 의미가 접근성 트리에 전달되고 AT에서 사용되므로 시맨틱이 아닌 요소보다 콘텐츠에 더 많은 의미를 부여할 수 있습니다. 관계를 맺거나 전반적인 사용자 환경을 개선하기 위해 ARIA 속성을 추가해야 하는 경우가 있을 수 있지만 대부분의 경우 사용 가능한 100개가 넘는 HTML 요소 중 하나가 그 자체로 충분히 작동합니다.

이 모듈은 디지털 접근성에 중요한 가장 널리 사용되는 구조적 요소에 중점을 두지만 웹사이트나 앱에 구조를 빌드할 때 고려해야 할 추가 요소와 환경적 요소가 있습니다. 이러한 예시는 포괄적이기보다는 주제에 대한 소개입니다.

명소

AT 사용자는 구조적 요소를 사용하여 페이지의 전체 레이아웃에 관한 정보를 제공받습니다. 콘텐츠의 큰 영역을 구분할 때 ARIA 랜드마크 역할 또는 최신 HTML 랜드마크 요소를 사용하여 페이지에 구조적 맥락을 추가할 수 있습니다.

랜드마크는 콘텐츠가 탐색 가능한 영역에 있는지 확인합니다. 페이지당 랜드마크를 하나 이상 제공하는 것이 좋습니다.

일부 리소스에서는 더 나은 AT 적용 범위를 제공하기 위해 ARIA 및 HTML 랜드마크를 함께 결합하는 것이 좋습니다. 이러한 유형의 중복은 사용자에게 문제를 일으키지 않지만 스크린 리더를 사용하여 패턴을 테스트하여 확실히 하세요. 확실하지 않은 경우 기본적으로 최신 HTML 랜드마크 요소만 사용하는 것이 가장 좋습니다. 브라우저 지원이 매우 강력하기 때문입니다.

HTML 랜드마크 요소를 상응하는 ARIA 랜드마크 역할에 매핑된 것으로 비교해 보겠습니다.

HTML 랜드마크 요소 ARIA 랜드마크 역할
<header> 배너
<aside> complementary
<footer> contentinfo
<nav> navigation
<main> main
<form> 1 양식
<section> 1 region
1 name 속성을 포함해야 액세스할 수 있습니다. section의 암시적 ARIA 역할인 region가 보조 기술에 표시되려면 section의 이름이 접근성 있게 지정되어야 합니다.

이제 접근 가능한 콘텐츠 구조의 예를 비교해 보세요.

금지사항
<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>

제목

올바르게 구현하면 HTML 제목 수준이 전체 페이지 콘텐츠의 간결한 개요를 형성합니다.

사용할 수 있는 제목 수준은 6가지입니다. 제목 수준 1 <h1>은 페이지에서 가장 높고 중요한 정보에 사용되며, 가장 낮고 중요하지 않은 정보의 경우 제목 수준 6 <h6>으로 점진적으로 이동합니다.

제목 수준의 순서가 중요합니다. <h1>로 섹션을 시작하고 바로 <h5>로 이어지는 것처럼 제목 수준을 건너뛰지 않는 것이 좋습니다. 대신 순서대로 <h5>로 진행해야 합니다. 제목 수준 순서는 AT 사용자에게 특히 중요합니다. 콘텐츠를 탐색하는 주요 방법 중 하나이기 때문입니다.

제목의 적절한 시맨틱 구조와 순서를 준수하려면 CSS 스타일을 제목 수준에서 분리하는 것이 좋습니다. 이렇게 하면 제목 수준 순서를 유지하면서 제목 스타일을 더 유연하게 지정할 수 있습니다. AT에서 스타일만 사용하여 제목을 만들면 제목으로 인식되지 않으므로 주의해야 합니다.

제목을 조작하면 적절한 구조가 AT 사용자에게 전달되지 않습니다.

또한 제목은 인지 장애 및 주의력 결핍 장애가 있는 사용자에게도 유용합니다. 페이지에서 가장 중요한 내용을 이해하는 데 도움이 되도록 의미 있는 제목 콘텐츠를 만드는 것이 중요합니다.

금지사항
<div>
    <h3>Stamps</h3>
    <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>
    <h3>How do I start a stamp collection?</h3>
  <h2>Equipment you will need</h2>
    <h4>...</h4>
  <h2>How to acquire stamps</h2>
    <h4>...</h4>
  <h2>Organizations you can join</h2>
    <h4>...</h4>
</div>
권장사항
<header>
  <h1>Stamp collecting</h1>
</header>
<main>
    <section aria-label="Introduction to stamp collecting">
        <h2>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>How do I start a stamp collection?</h2>
    <h3>Required equiment</h3>
    <p>...</p>

    <h3>How to acquire stamps</h3>
    <p>...</p>

    <h3>Organizations you can join</h3>
        <p>...</p>
    </section>
</main>

목록

HTML 목록은 식료품점 목록이나 무시하고 있는 끝없는 할 일 목록과 마찬가지로 서로 유사한 항목을 시맨틱 방식으로 그룹화하여 고유한 의미를 부여하는 방법입니다.

HTML 목록에는 세 가지 유형이 있습니다.

목록 항목 <li> 요소는 정렬된 목록 또는 정렬되지 않은 목록의 항목을 나타내는 데 사용되며 설명 용어 <dt> 및 정의 <dd> 요소는 설명 목록에서 찾을 수 있습니다.

이러한 요소는 올바르게 프로그래밍되면 시각 장애가 있는 AT 사용자에게 목록의 표시 구조를 알릴 수 있습니다. AT가 시맨틱 목록을 발견하면 사용자에게 목록 이름과 목록에 있는 항목 수를 알릴 수 있습니다. 사용자가 목록 내에서 이동하면 AT가 각 목록 항목을 소리 내어 읽고 목록에서 몇 번째 항목인지 알려줍니다(예: 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>

테이블

HTML에서 테이블은 일반적으로 데이터 또는 페이지 레이아웃을 구성하는 데 사용됩니다.

표의 목적에 따라 다양한 시맨틱 구조 요소를 사용합니다. 표의 구조는 매우 복잡할 수 있지만 기본 의미론 규칙을 준수하면 별다른 개입 없이도 상당히 쉽게 액세스할 수 있습니다.

레이아웃

인터넷 초기에는 시각적 구조를 빌드하는 데 사용되는 기본 HTML 요소가 레이아웃 표였습니다. 현재는 <div> 및 랜드마크와 같은 시맨틱 요소와 비시맨틱 요소를 혼합하여 레이아웃을 만듭니다.

레이아웃 표를 만드는 시대는 거의 지났지만 시각적으로 풍부한 이메일, 뉴스레터, 광고와 같이 레이아웃 표가 여전히 사용되는 경우가 있습니다. 이 경우 레이아웃에만 사용되는 테이블은 관계를 전달하고 컨텍스트를 추가하는 구조적 요소(예: <th> 또는 <caption>)를 사용해서는 안 됩니다.

또한 레이아웃 표는 ARIA 프레젠테이션 역할 또는 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>

데이터

AT 사용자에게 숨겨야 하는 레이아웃 테이블과 달리 데이터 표와 그 모든 요소는 노출되어야 합니다. 데이터 표의 구조는 간단하고 복잡한 정보를 사용자에게 전달하는 데 중요합니다.

테이블이 올바르게 구성되면 열 헤더와 행, 테이블 내 데이터 간에 관계가 형성됩니다. 구조가 잘못되면 사용자는 표의 정보의 의미와 맥락을 파악해야 합니다.

테이블의 복잡도에 따라 코드를 통해 관계를 형성하는 방법은 여러 가지가 있습니다. 테이블에 액세스할 수 있도록 하려면 먼저 헤더 셀을 <th>로, 데이터 셀을 <td> 요소로 마크업합니다.

더 복잡한 표의 경우 의미와 관계를 전달하기 위해 <rowgroup>, <colgroup>, <caption>, scope와 같은 추가 HTML 표 요소를 사용해야 할 수 있습니다.

금지사항
<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>My stamp collection</caption>
  <tr>
    <th>Animal</th>
    <th>Year</th>
    <th>Condition</th>
  </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>