[HTML 기초 5편] 시맨틱 태그 심화 및 웹 접근성(A11Y) 확장

웹 접근성과 시맨틱 태그는 단순한 개념을 넘어 실전에서 어떻게 활용하는지가 중요합니다. 이번 글에서는 시맨틱 태그의 심화 활용법과 웹 접근성을 한층 더 강화하는 방법을 다룹니다.

 

1. 시맨틱 태그 심화 활용법

기본적인 시맨틱 태그 외에도, HTML5에서는 다양한 의미를 갖는 태그를 제공하며, 이를 적절히 활용하면 사용성과 접근성을 함께 높일 수 있습니다.

✅ <details> & <summary>: 토글 가능한 콘텐츠

이 두 태그를 사용하면 JavaScript 없이도 클릭하여 열고 닫을 수 있는 콘텐츠를 만들 수 있습니다.

<details>
  <summary>더 많은 정보 보기</summary>
  <p>여기에 추가적인 설명이 들어갑니다.</p>
</details>

✅ <dialog>: 모달 창

기본적으로 모달 대화상자를 쉽게 만들 수 있으며, open 속성을 추가하면 자동으로 표시됩니다.

<dialog id="myDialog">
  <p>이것은 다이얼로그 창입니다.</p>
  <button onclick="document.getElementById('myDialog').close()">닫기</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">모달 열기</button>

✅ <mark>, <time>, <progress> 활용

<p>이 단어는 <mark>강조</mark>됩니다.</p>
<p>현재 시간: <time datetime="2025-03-19T14:00">2025년 3월 19일 오후 2시</time></p>
<progress value="70" max="100">70%</progress>

✅ <section> vs <article> 구분

• <section>: 특정 주제나 개념을 그룹화하는 용도
• <article>: 독립적으로 배포 가능(블로그 글, 뉴스 기사 등)

<section>
  <h2>HTML 개요</h2>
  <p>HTML은 웹의 기본적인 마크업 언어입니다.</p>
</section>

<article>
  <h2>최신 웹 기술</h2>
  <p>웹 기술이 점점 발전하고 있습니다.</p>
</article>

---

2. 웹 접근성 향상을 위한 실전 테크닉

웹 접근성(A11Y)을 높이기 위해 고려해야 할 몇 가지 중요한 사항이 있습니다.

✅ 키보드 내비게이션 최적화

모든 요소는 마우스뿐만 아니라 키보드만으로도 접근 가능해야 합니다.

<button tabindex="0">키보드로 초점 이동 가능</button>

✅ ARIA 속성 활용

ARIA(Accessible Rich Internet Applications) 속성을 사용하면 화면 리더가 콘텐츠를 보다 정확히 해석할 수 있습니다.

<button aria-label="메뉴 열기">☰</button>

ARIA 속성 설명

aria-label	요소에 접근성 레이블 추가
aria-hidden="true"	화면 리더가 무시하도록 설정
role="navigation"	내비게이션 역할 명시
aria-live="polite"	실시간으로 업데이트되는 콘텐츠를 사용자에게 안내

✅ 색맹 사용자를 고려한 색상 대비

명암비를 조정하여 가독성을 높이고, 색상만으로 정보를 전달하지 않도록 주의해야 합니다.

/* 명암비를 높인 버튼 스타일 */
button {
  background-color: #005A9C;
  color: white;
  font-size: 16px;
  padding: 10px;
}

---

3. 웹 접근성 테스트 방법

✅ Chrome Lighthouse를 활용한 접근성 평가

1. Chrome 개발자 도구 열기 (F12 또는 Ctrl + Shift + I)
2. "Lighthouse" 탭에서 "Accessibility" 카테고리 선택
3. "Analyze page load" 클릭하여 평가 실행

✅ 스크린 리더(VoiceOver, NVDA)로 웹페이지 테스트

• Windows: NVDA(무료) 다운로드 후 사용
• Mac: VoiceOver (Command + F5로 활성화)

✅ 자동화된 접근성 검사 도구

• axe DevTools (Chrome 확장 프로그램)
• WAVE(Web Accessibility Evaluation Tool)

---

4. 결론

시맨틱 태그를 적극적으로 활용하면 HTML의 가독성과 유지보수성이 향상되며, 접근성(A11Y)도 동시에 개선할 수 있습니다.

웹 접근성을 고려한 마크업을 사용하면 장애를 가진 사용자도 웹사이트를 편리하게 이용할 수 있으며, SEO에도 긍정적인 영향을 미칩니다.

👉 이제 실전에서 적용해 보세요!