시맨틱 HTML과 접근성

시맨틱 HTML이 접근성의 기반인 이유

Why Semantic HTML Is the Foundation

시맨틱 HTML이란 태그의 시각적 표현이 아닌 의미와 역할에 맞는 HTML 요소를 사용하는 것입니다. 브라우저는 마크업에서 접근성 트리(Accessibility Tree)를 생성해 각 요소의 이름(name), 역할(role), 상태(state), 값(value)을 보조기술에 전달합니다 — 시맨틱 요소를 쓰면 이 정보가 공짜로 제공됩니다.

Semantic HTML means choosing elements by meaning and role, not visual appearance. The browser derives an Accessibility Tree from markup, exposing each element's name, role, state, and value to assistive technologies — semantic elements provide this information for free.

`<div>`로 만든 버튼과 `<button>`의 차이를 생각해보세요. `<button>`은 키보드 포커스, Enter/Space 활성화, '버튼' 역할 낭독, 폼 제출 동작을 기본 제공합니다. `<div onclick>`은 이 모든 것을 JavaScript와 ARIA로 재구현해야 하고, 하나라도 빠뜨리면 접근성 결함이 됩니다. '기본 요소를 쓸 수 있으면 쓴다'가 WAS 전체를 관통하는 원칙입니다.

Compare a `<div>` styled as a button with a real `<button>`: the `<button>` gives you keyboard focus, Enter/Space activation, a 'button' role announcement, and form submission behavior out of the box. A `<div onclick>` requires re-implementing all of that with JavaScript and ARIA — and every omission is an accessibility defect. 'Use the native element when you can' is the principle running through all of WAS.

랜드마크로 페이지 구조 만들기

Structuring Pages with Landmarks

HTML5 랜드마크 요소는 페이지의 주요 영역을 정의합니다: `<header>`(배너), `<nav>`(내비게이션), `<main>`(주요 콘텐츠, 페이지당 하나), `<article>`(독립 콘텐츠), `<section>`(주제별 그룹), `<aside>`(부가 정보), `<footer>`(콘텐츠 정보). 스크린리더 사용자는 랜드마크 단축키로 영역 간을 빠르게 이동합니다.

HTML5 landmark elements define the page's major regions: `<header>` (banner), `<nav>`, `<main>` (one per page), `<article>`, `<section>`, `<aside>`, and `<footer>` (contentinfo). Screen reader users jump between regions with landmark shortcuts.

실무 요령: 같은 유형의 랜드마크가 여러 개면 aria-label로 구분합니다(예: `<nav aria-label="주 메뉴">`와 `<nav aria-label="페이지 내 목차">`). 모든 콘텐츠는 어떤 랜드마크 안에든 속하는 것이 좋고, `<section>`은 접근 가능한 이름(aria-label/aria-labelledby)이 있을 때만 region 랜드마크로 노출됩니다.

Practical tips: when multiple landmarks of the same type exist, distinguish them with aria-label (e.g., `<nav aria-label="Main menu">` vs `<nav aria-label="Table of contents">`). Ideally all content lives inside some landmark, and note that `<section>` is exposed as a region landmark only when it has an accessible name (aria-label/aria-labelledby).

제목 계층 구조

Heading Hierarchy

`<h1>`은 페이지당 하나의 주요 제목으로 사용하고, `<h2>`~`<h6>`은 계층 순서대로 사용합니다. 레벨을 건너뛰면 안 됩니다(h1 → h3 금지). 제목은 시각적 크기가 아니라 콘텐츠의 논리적 구조를 나타내야 하며, 크기 조정은 CSS로 합니다.

Use `<h1>` as the single main heading per page, then `<h2>`–`<h6>` in order — never skip levels (no h1 → h3). Headings express the logical structure of content, not visual size; adjust size with CSS.

제목이 중요한 이유: 설문조사에서 스크린리더 사용자가 가장 많이 쓰는 페이지 탐색 방법이 제목 이동(H 키)입니다. 굵은 텍스트를 제목처럼 보이게 스타일링한 가짜 제목은 이 탐색에서 완전히 누락됩니다. 반대로 시각적 강조 목적으로 아무 데나 h 태그를 쓰면 구조가 왜곡됩니다.

Why headings matter: surveys consistently find heading navigation (the H key) is screen reader users' most-used way to explore pages. Fake headings — bold text styled to look like headings — are entirely invisible to that navigation. Conversely, using h tags anywhere just for visual emphasis distorts the structure.

인터랙티브 요소와 리스트

Interactive Elements and Lists

인터랙티브 요소 선택 기준: 동작 실행은 `<button>`, 페이지·위치 이동은 `<a href>`, 데이터 입력은 `<input>`, 선택 목록은 `<select>`. 링크와 버튼의 구분은 시험 단골입니다 — '어디로 가는가'는 링크, '무엇을 하는가'는 버튼입니다. href 없는 `<a>`는 키보드 포커스를 받지 못한다는 점도 주의하세요.

Choosing interactive elements: `<button>` for actions, `<a href>` for navigation, `<input>` for data entry, `<select>` for selection lists. The link-versus-button distinction is a favorite exam topic — 'where does it go' is a link; 'what does it do' is a button. Also note that an `<a>` without href cannot receive keyboard focus.

리스트 요소: 순서 없는 목록 `<ul>`, 순서 있는 목록 `<ol>`, 용어-설명 쌍은 `<dl>`. 스크린리더는 '목록, 3개 항목'처럼 항목 수와 현재 위치를 알려주므로, 시각적으로만 목록처럼 배치한 `<div>` 나열과 실제 목록 마크업은 사용 경험이 완전히 다릅니다.

Lists: `<ul>` for unordered, `<ol>` for ordered, `<dl>` for term–description pairs. Screen readers announce 'list, 3 items' and your position within it — so a stack of `<div>`s that merely looks like a list is a completely different experience from real list markup.