디지털 접근성의 가장 중요한 측면 중 하나는 확인할 수 있습니다. Google 게시자 태그를 사용하여 구조적 요소를 대신 스타일에만 의존하지 않고 보조 기능을 사용하는 사람들에게 중요한 컨텍스트를 제공할 수 있습니다. 기술 (AT)에 적합합니다.
구조적 요소는 화면에서 콘텐츠의 윤곽선 역할을 하지만 콘텐츠 내에서 더 쉽게 탐색할 수 있도록 앵커 포인트 역할을 합니다.
의미론적 HTML 요소를 사용하는 경우 각 요소의 내재된 의미가 접근성 트리에 전달되고 AT에서 사용하며, 비 의미론적 요소보다 콘텐츠에 더 많은 의미를 부여합니다. 빌드 시 ARIA 속성을 추가해야 하는 경우가 있을 수 있습니다 전반적인 사용자 환경을 개선하는 데 효과적이지만 대부분의 경우 100개 이상의 HTML 요소 중 하나가 그 자체로는 꽤 잘 작동합니다.
이 모듈에서는 가장 널리 사용되는 구조적 요소에 중점을 두지만 확실히 추가적인 요소와 요소가 있어 웹사이트 구축 시 고려해야 할 환경적 요인 있습니다. 다음은 모든 내용을 포괄하는 개념이라기보다는 소개입니다.
명소
AT 사용자는 구조적 요소에 의존하여 디자인을 조정할 수 있습니다. 콘텐츠의 넓은 영역을 분리할 때 ARIA 랜드마크 역할이나 최신 HTML 랜드마크 요소를 사용하여 추가할 수 있습니다.
랜드마크는 콘텐츠가 탐색 가능한 지역에 있도록 합니다. 페이지당 하나 이상의 랜드마크를 제공하는 것이 좋습니다.
일부 리소스에서 ARIA와 HTML 랜드마크를 함께 사용하도록 권장합니다. 함께 사용하여 더 나은 AT 범위를 제공합니다. 이러한 유형의 중복성은 사용자에게 문제를 일으키려면 스크린 리더를 사용하여 패턴을 테스트하세요 있습니다. 확실하지 않은 경우에는 기본적으로 최신 HTML만 사용하는 것이 좋습니다. 인코더-디코더에 브라우저 지원은 강력해졌습니다
HTML 랜드마크 요소를 매핑된 해당하는 ARIA 랜드마크 역할을 수행할 수 있습니다
이제 접근 가능한 콘텐츠 구조의 예시를 비교해 보겠습니다.
<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>