웹 접근성을 위한 시멘틱 태그

웹 접근성을 높이기 위해 HTML에서 시멘틱 태그를 사용하는 것은 매우 중요합니다. 시멘틱 태그는 콘텐츠의 의미를 명확히 전달하며, 스크린 리더 같은 보조 기술이 웹 페이지를 더 잘 이해하도록 돕습니다. 아래는 웹 접근성을 위한 주요 시멘틱 태그와 그 사용법을 나열한 것입니다.

1. <header>
   • 페이지나 섹션의 머리글을 정의합니다. 로고, 제목, 내비게이션 등을 포함할 수 있습니다.
   • 예시:

     <header>
       <h1>사이트 제목</h1>
       <nav>내비게이션 메뉴</nav>
     </header>
     

2. <nav>
   • 내비게이션 링크 모음을 나타냅니다. 주요 메뉴나 사이트 링크를 포함합니다.
   • 예시:

     <nav>
       <ul>
         <li><a href="#home">홈</a></li>
         <li><a href="#about">소개</a></li>
       </ul>
     </nav>
     

3. <main>
   • 문서의 주요 콘텐츠를 정의합니다. 페이지에서 고유한 콘텐츠 영역이어야 하며, 반복되는 요소(예: 사이드바)는 제외합니다.
   • 예시:

     <main>
       <h2>메인 콘텐츠</h2>
       <p>여기에 주요 내용이 들어갑니다.</p>
     </main>
     

4. <article>
   • 독립적인 콘텐츠 블록을 나타냅니다(예: 블로그 포스트, 뉴스 기사 등).
   • 예시:

     <article>
       <h2>기사 제목</h2>
       <p>기사 내용...</p>
     </article>
     

5. <section>
   • 문서 내 주제별로 구분된 섹션을 정의합니다. 일반적으로 제목(<h1>-<h6>)을 포함합니다.
   • 예시:

     <section>
       <h2>섹션 제목</h2>
       <p>섹션 내용...</p>
     </section>
     

6. <aside>
   • 주요 콘텐츠와 관련이 있지만 직접적인 부분은 아닌 부수적인 내용을 나타냅니다(예: 사이드바, 광고).
   • 예시:

     <aside>
       <h3>관련 링크</h3>
       <ul>
         <li><a href="#">링크 1</a></li>
       </ul>
     </aside>
     

7. <footer>
   • 페이지나 섹션의 바닥글을 정의합니다. 저작권 정보, 연락처 등을 포함할 수 있습니다.
   • 예시:

     <footer>
       <p>&copy; 2025 xAI. All rights reserved.</p>
     </footer>
     

8. <figure>와 <figcaption>
   • 이미지, 다이어그램 등 독립적인 미디어와 그 설명을 그룹화합니다.
   • 예시:

     <figure>
       <img src="image.jpg" alt="설명">
       <figcaption>이미지 설명</figcaption>
     </figure>
     

9. <h1> ~ <h6>
   • 제목 수준을 정의하며, 계층 구조를 명확히 해야 합니다. <h1>은 페이지의 주제목으로 보통 한 번만 사용합니다.
   • 예시:

     <h1>페이지 제목</h1>
     <h2>소제목</h2>
     

추가 팁:

• 의미 없는 <div> 사용 지양: <div>는 시멘틱 의미가 없으므로, 가능하면 위 태그로 대체하세요.
• ARIA 속성 활용: 복잡한 경우 role, aria-label 등을 추가해 접근성을 보완하세요.
• 논리적 순서: 태그 구조가 콘텐츠의 흐름을 자연스럽게 반영해야 합니다.

이 태그들을 적절히 사용하면 웹 페이지의 구조가 명확해지고, 접근성이 크게 향상됩니다. 필요하면 더 구체적인 예시를 요청해 주세요!