이번 시간에는 시맨틱 태그 와 **웹툰(A11Y)**에 대해 함께 하겠습니다. 시맨틱 태그는 HTML의 코드를 의미하도록 하고, 웹 접근(A11Y)은 모든 사용자가 웹 콘텐츠에 접근할 수 있도록 허용하는 중요한 개념입니다. 이 두 가지 웹페이지의 품질과 사용자 경험을 향상시키는 핵심 요소입니다.
웹사이트를 제작할 때 단순히 화면에 보이는 것만 신경 써서는 안 됩니다. HTML 문서는 검색 엔진, 스크린 리더, 다양한 디바이스에서도 올바르게 해석될 수 있어야 합니다. 이를 위해 시맨틱 태그와 웹 접근성(A11Y) 개념을 이해하는 것이 중요합니다.
1. 시맨틱 태그란?
시맨틱(Semantic) 태그는 태그 이름만 보고도 해당 요소가 어떤 역할을 하는지 쉽게 이해할 수 있도록 만든 HTML 태그입니다. 예전에는 <div>와 <span> 같은 비시맨틱(non-semantic) 태그로 구조를 만들었지만, 시맨틱 태그를 사용하면 코드의 가독성과 유지보수성이 향상됩니다.
주요 시맨틱 태그
태그 설명
| <header> | 페이지나 섹션의 머리글 |
| <nav> | 내비게이션 링크 그룹 |
| <section> | 논리적인 콘텐츠 구획 |
| <article> | 독립적인 콘텐츠 블록 (예: 블로그 글) |
| <aside> | 보조 정보(광고, 사이드바) |
| <footer> | 페이지나 섹션의 바닥글 |
| <main> | 주요 콘텐츠 영역 |
| <figure> & <figcaption> | 이미지 및 설명을 포함하는 블록 |
✅ 시맨틱 태그 사용의 장점
✔ 가독성 향상: 개발자와 협업할 때 문서 구조를 쉽게 이해 가능 ✔ SEO 최적화: 검색 엔진이 페이지를 더 효과적으로 크롤링하고 색인화 가능 ✔ 웹 접근성 향상: 스크린 리더가 문서 구조를 명확하게 이해하고 안내할 수 있음
2. 웹 접근성(A11Y)이란?
웹 접근성(A11Y, Accessibility)은 장애를 가진 사용자를 포함하여 모든 사람이 웹을 쉽게 이용할 수 있도록 보장하는 개념입니다. 특히, 시각·청각·운동 장애를 가진 사용자가 웹 콘텐츠를 원활히 탐색할 수 있도록 HTML, CSS, JavaScript 등을 활용해야 합니다.
웹 접근성을 위한 HTML 요소 및 속성
- alt 속성: <img> 태그에 대체 텍스트를 제공해 스크린 리더가 이미지 정보를 전달 가능
- <img src="coffee.jpg" alt="커피 한 잔이 놓여있는 테이블">
- label 태그: <input> 등의 폼 요소와 함께 사용하여 접근성을 향상
- <label for="username">사용자 이름:</label> <input type="text" id="username" name="username">
- aria-* 속성: ARIA(Accessible Rich Internet Applications) 속성을 사용하여 추가적인 접근성 정보 제공
- <button aria-label="메뉴 열기">☰</button>
- 키보드 내비게이션 고려: tabindex="0"을 활용하여 키보드 사용자도 편리하게 탐색 가능
- <div tabindex="0">키보드로 초점을 받을 수 있는 요소</div>
3. 시맨틱 태그와 웹 접근성의 관계
✔ 시맨틱 태그를 사용하면 스크린 리더가 문서 구조를 쉽게 해석 가능 ✔ 검색 엔진(SEO)과 접근성을 동시에 개선할 수 있음 ✔ <nav>, <main>, <aside> 등의 태그를 적절히 활용하면 키보드 및 음성 내비게이션이 더 효과적으로 동작
예제: 시맨틱 HTML 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹 접근성을 고려한 HTML</title>
</head>
<body>
<header>
<h1>웹 접근성과 시맨틱 HTML</h1>
<nav>
<ul>
<li><a href="#about">소개</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>소개</h2>
<p>이 페이지는 웹 접근성과 시맨틱 HTML을 설명합니다.</p>
</section>
</main>
<footer>
<p>© 2025 웹 접근성 연구소</p>
</footer>
</body>
</html>
4. 결론
웹을 개발할 때 시맨틱 태그를 적극 활용하면 가독성, 유지보수성, 접근성을 모두 향상할 수 있습니다. 또한, 웹 접근성을 고려한 마크업을 사용하면 장애를 가진 사용자도 콘텐츠를 쉽게 소비할 수 있습니다.
👉 모든 사용자가 웹을 편리하게 이용할 수 있도록, 시맨틱 태그와 웹 접근성을 고려한 HTML을 작성해 보세요!
'기술 & 트렌드 (Future Tech & Trends) > Web - HTML' 카테고리의 다른 글
| [HTML 기초 6편] Form 구조와 input 태그의 진화 – 초보자도 이해하는 HTML5의 폼 이야기 (2) | 2025.04.15 |
|---|---|
| [HTML 기초 5편] 시맨틱 태그 심화 및 웹 접근성(A11Y) 확장 (1) | 2025.03.22 |
| [HTML 기초 3편] 테이블과 폼을 활용하기 (0) | 2025.03.13 |
| [HTML 기초 2편] 링크, 이미지, 목록 활용하기 (0) | 2025.03.11 |
| [HTML 기초 1편] HTML 기본 구성과 핵심 Tag 알아보기 (1) | 2025.03.11 |
