콘텐츠 구조

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

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

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

이 모듈에서는 디지털 접근성에 매우 중요한 구조적 요소 중 가장 널리 사용되는 요소를 집중적으로 다루지만, 웹사이트나 앱에 구조를 구축할 때 고려해야 할 추가 요소와 환경적 요인도 존재합니다. 이러한 예는 모든 항목을 포괄하는 것이 아니라 주제를 소개하는 예시입니다.

명소

AT 사용자는 구조적 요소를 사용하여 페이지의 전체 레이아웃에 관한 정보를 제공합니다. 넓은 범위의 콘텐츠를 분할할 때 ARIA 랜드마크 역할 또는 최신 HTML 랜드마크 요소를 사용하여 페이지에 구조적 컨텍스트를 추가할 수 있습니다.

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

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

이제 매핑된 HTML 랜드마크 요소를 상대 ARIA 랜드마크 역할과 비교해 보겠습니다.

HTML 랜드마크 요소 ARIA 랜드마크 역할
<header> 배너
<aside> 보완적인
<footer> 콘텐츠 정보
<nav> navigation
<main> 기본
<form> 1개 양식
<section> 1개 region
1 액세스할 수 있으려면 name 속성을 포함해야 합니다. section의 암시적 ARIA 역할(region)이 보조 기술에 표시되도록 하려면 접근하기 쉬운 이름을 지정해야 합니다.

이제 액세스 가능한 콘텐츠 구조의 예를 비교해 보겠습니다.

금지사항
<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는 각 목록 항목을 소리 내 읽고 목록의 어떤 번호(항목 1 중 5, 항목 2/5 등)를 알려줍니다.

항목을 목록으로 그룹화하면 인지 및 주의력 장애가 있는 시력이 있는 사람과 읽기 장애가 있는 사람도 도움이 됩니다. 목록 콘텐츠는 일반적으로 시각적 공백이 더 많이 있고 콘텐츠가 핵심을 담당하기 때문입니다.

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