시맨틱 HTML과 접근성
한국어 해설 KO
의미론적 HTML 요소를 올바르게 사용하여 스크린리더와 보조기술이 페이지 구조를 정확히 해석할 수 있도록 하는 방법을 학습합니다.
학습 목표
HTML5 랜드마크 요소와 그 역할을 설명할 수 있다
올바른 제목 계층 구조(h1~h6)를 적용할 수 있다
인터랙티브 요소 선택의 올바른 기준을 설명할 수 있다
시맨틱 HTML이 보조기술에 미치는 영향을 이해한다
시맨틱 HTML(Semantic HTML)이란 태그의 시각적 표현이 아닌 의미와 역할에 맞는 HTML 요소를 사용하는 것입니다. 스크린리더는 시맨틱 마크업을 기반으로 페이지 구조를 파악하고 사용자에게 전달합니다.
HTML5 랜드마크 요소는 페이지의 주요 영역을 정의합니다: `<header>`(페이지 헤더), `<nav>`(내비게이션), `<main>`(주요 콘텐츠, 페이지당 하나), `<article>`(독립적인 콘텐츠), `<section>`(주제별 그룹), `<aside>`(부가 정보), `<footer>`(페이지 푸터). 스크린리더 사용자는 랜드마크를 통해 페이지를 빠르게 탐색합니다.
제목 계층 구조: `<h1>`은 페이지당 하나의 주요 제목으로 사용하고, `<h2>`~`<h6>`은 계층 순서대로 사용합니다. 제목 레벨을 건너뛰면 안 됩니다(예: h1 → h3). 제목은 시각적 스타일이 아닌 콘텐츠의 논리적 구조를 나타내야 합니다.
인터랙티브 요소의 올바른 선택: 클릭 시 동작이 실행되면 `<button>`, 다른 페이지나 위치로 이동하면 `<a href>`, 데이터 입력에는 `<input>`, 선택 목록에는 `<select>`를 사용합니다. `<div>`나 `<span>`에 onclick 이벤트를 달면 키보드 접근성과 스크린리더 지원이 기본적으로 제공되지 않습니다.
리스트 요소: 순서 없는 목록에는 `<ul>`, 순서 있는 목록에는 `<ol>`, 설명 목록에는 `<dl>`을 사용합니다. 스크린리더는 '목록, 3개 항목' 처럼 목록 항목 수와 현재 위치를 사용자에게 알려줍니다.
Original Text EN
Learn to use semantic HTML elements correctly so that screen readers and assistive technologies can accurately interpret page structure.
Learning Objectives
Explain HTML5 landmark elements and their roles
Apply correct heading hierarchy (h1–h6)
Describe correct criteria for choosing interactive elements
Understand how semantic HTML impacts assistive technologies
Semantic HTML means using HTML elements according to their meaning and purpose, not just their visual appearance. Screen readers use semantic markup to understand and communicate page structure.
HTML5 landmark elements define major page regions: `<header>`, `<nav>`, `<main>` (one per page), `<article>`, `<section>`, `<aside>`, `<footer>`. Screen reader users navigate pages via these landmarks.
Heading hierarchy: Use `<h1>` as the single main heading per page. Use `<h2>`–`<h6>` in order. Never skip heading levels (e.g., h1 → h3). Headings represent logical content structure, not visual styling.
Choosing interactive elements: Use `<button>` for actions, `<a href>` for navigation, `<input>` for data entry, `<select>` for selection lists. Adding onclick to `<div>` or `<span>` doesn't provide keyboard accessibility or screen reader support by default.
List elements: Use `<ul>` for unordered lists, `<ol>` for ordered lists, `<dl>` for description lists. Screen readers announce the number of items and the user's current position (e.g., 'list, 3 items').