Sectioning element는 페이지를 의미 있는 영역으로 나눕니다. 그중 여러 개는 ARIA 랜드마크에 매핑됩니다. 랜드마크는 보조 기술이 사용자가 그 사이를 이동하게 해주는 이름 붙은 영역으로, 페이지의 목차와 같습니다.
html
...
Details
...
...
스크린 리더 사용자는 키를 눌러 랜드마크 목록을 보고 반복되는 헤더와 nav를 건너뛰어 곧장 <main>으로 이동할 수 있습니다. 이는 큰 효율성 향상이며, semantic tag가 ARIA 없이 자동으로 이를 제공합니다.
<article> — 그 자체로 의미가 통하고 신디케이션될 수 있는 콘텐츠입니다. 블로그 게시물, 제품 카드, 댓글 등입니다.<section> — 문서 안의 주제별 그룹으로, 보통 자체 헤딩을 가집니다. 독립적이지 않습니다.<article>
<h1>Blog post title</h1>
<section><h2>Introduction</h2>...</section>
<section><h2>Conclusion</h2>...</section>
</article>
경험 법칙: 독립적으로 존재할 수 있으면 <article>이고, 더 큰 전체의 라벨 붙은 한 덩어리에 불과하면 <section>입니다. <section>을 순전히 스타일링 래퍼로 사용하지 마십시오. 그것은 <div>의 역할입니다.
올바른 sectioning element를 사용하면 키보드/스크린 리더 내비게이션을 위한 무료의 견고한 랜드마크와 명확한 문서 개요를 얻어, 추가 ARIA attribute 없이 accessibility와 SEO를 향상시킵니다.
주니어부터 시니어까지 상세한 답변이 포함된 IT 면접 질문 라이브러리.
후원하기