콘텐츠 구조

디지털 접근성의 가장 중요한 측면 중 하나는 확인할 수 있습니다. Google 게시자 태그를 사용하여 구조적 요소를 대신 스타일에만 의존하지 않고 보조 기능을 사용하는 사람들에게 중요한 컨텍스트를 제공할 수 있습니다. 기술 (AT)에 적합합니다.

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

의미론적 HTML 요소를 사용하는 경우 각 요소의 내재된 의미가 접근성 트리에 전달되고 AT에서 사용하며, 비 의미론적 요소보다 콘텐츠에 더 많은 의미를 부여합니다. 빌드 시 ARIA 속성을 추가해야 하는 경우가 있을 수 있습니다 전반적인 사용자 환경을 개선하는 데 효과적이지만 대부분의 경우 100개 이상의 HTML 요소 중 하나가 그 자체로는 꽤 잘 작동합니다.

이 모듈에서는 가장 널리 사용되는 구조적 요소에 중점을 두지만 확실히 추가적인 요소와 요소가 있어 웹사이트 구축 시 고려해야 할 환경적 요인 있습니다. 다음은 모든 내용을 포괄하는 개념이라기보다는 소개입니다.

명소

AT 사용자는 구조적 요소에 의존하여 디자인을 조정할 수 있습니다. 콘텐츠의 넓은 영역을 분리할 때 ARIA 랜드마크 역할이나 최신 HTML 랜드마크 요소를 사용하여 추가할 수 있습니다.

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

일부 리소스에서 ARIA와 HTML 랜드마크를 함께 사용하도록 권장합니다. 함께 사용하여 더 나은 AT 범위를 제공합니다. 이러한 유형의 중복성은 사용자에게 문제를 일으키려면 스크린 리더를 사용하여 패턴을 테스트하세요 있습니다. 확실하지 않은 경우에는 기본적으로 최신 HTML만 사용하는 것이 좋습니다. 인코더-디코더에 브라우저 지원은 강력해졌습니다

HTML 랜드마크 요소를 매핑된 해당하는 ARIA 랜드마크 역할을 수행할 수 있습니다

를 통해 개인정보처리방침을 정의할 수 있습니다. 를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
HTML 랜드마크 요소 ARIA 랜드마크 역할
<header> 배너
<aside> 보완하는
<footer> contentinfo
<nav> navigation
<main> 기본
<form> 1 양식
<section> 1 region
</ph> 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가 각 목록 항목을 소리 내어 읽고 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를 사용하는 AT 사용자에게는 레이아웃 표를 숨겨야 함 프레젠테이션 역할 또는 aria-hidden 상태입니다.

금지사항
<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> 요소 포함

더 복잡한 표의 경우 추가 HTML 표 요소를 사용해야 할 수 있습니다. 예: <rowgroup>님, <colgroup>, <caption>, 및 scope~ 의미와 관계를 전달합니다.

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