HTML 강좌 / HTML 접근성 기본: 제목·링크·이미지·키보드
HTML 접근성의 출발점은 문서의 의미를 정확히 쓰는 것입니다. 제목을 순서대로 배치하고, 링크의 목적을 알 수 있게 적고, 이미지에는 역할에 맞는 대체 텍스트를 제공하며, 모든 조작을 키보드로도 할 수 있는지 확인하세요.
제목 구조를 순서대로 작성하기
제목은 글자 크기를 키우는 도구가 아니라 내용의 계층을 나타냅니다. 페이지의 주제에 해당하는 h1 아래에 주요 절을 h2로, 그 절의 하위 주제를 h3로 작성합니다. 더 크게 보이게 하려고 h4를 바로 쓰는 대신 CSS로 크기를 조절하세요. 제목 단계와 문단의 구조는 제목과 문단에서 실제 예제로 구분합니다.
한 페이지에서 제목만 차례로 읽어도 무엇을 설명하는지 알 수 있어야 합니다. 비어 있는 제목이나 내용과 맞지 않는 제목은 구조를 흐리게 합니다.
예를 들어 ‘배송 안내’ 아래에 ‘배송 지역’과 ‘소요 시간’이 있다면 두 하위 항목은 h3가 자연스럽습니다. 제목 글자의 크기가 마음에 들지 않아도 계층을 바꾸지 말고 CSS로 조정하세요. 제목 구조는 보이는 목차뿐 아니라 보조 기술이 문서를 훑는 기준이 됩니다.
링크 문구와 이미지 설명 점검하기
링크가 여러 개 있을 때 ‘여기’만 반복하면 목적을 구별하기 어렵습니다. <a href="guide.html">이용 안내 읽기</a>처럼 연결되는 내용을 링크 자체에 적으세요. 파일을 내려받는 링크라면 파일의 종류도 문맥에서 알 수 있게 하세요. 역할에 맞는 이미지 대체 텍스트와 크기는 이미지 넣기: img, alt, 크기에서 함께 다룹니다.
정보를 담은 이미지의 alt는 이미지가 전달하는 핵심을 설명합니다. 같은 내용을 바로 옆 문장이 충분히 전달하는 장식 이미지에는 alt=""가 적합할 수 있습니다. 이미지가 링크라면 링크의 목적도 전달돼야 합니다. 판단이 어려울 때는 W3C WAI 이미지 설명 결정표를 확인하세요.
예를 들어 ‘이용 안내’ 페이지로 가는 이미지 링크에는 ‘이용 안내 열기’처럼 목적을 전달하는 대체 텍스트가 필요합니다. 바로 옆에 같은 목적의 텍스트 링크가 있으면 중복 탐색을 줄일 방법을 검토할 수 있습니다. 이미지의 색과 모양을 세세하게 나열하기보다 그 이미지가 이 위치에서 수행하는 역할을 기준으로 작성하세요.
키보드로 조작해 보기
- 마우스를 사용하지 않고
Tab키로 링크와 양식 필드, 버튼을 차례로 이동합니다. - 현재 어디에 초점이 있는지 화면에 보이는지 확인합니다.
Enter또는Space키로 동작하는 요소를 실제로 조작해 봅니다.- 입력 오류가 났을 때 메시지를 읽고 값을 고쳐 다시 제출할 수 있는지 확인합니다.
눌러야 하는 요소를 단순한 div에 클릭 이벤트만 붙여 만들면 키보드 동작과 의미를 따로 구현해야 합니다. 링크 이동에는 a, 동작 실행에는 button처럼 본래 목적에 맞는 요소부터 사용하세요. 양식 이름의 명시적 연결은 label과 input으로 입력 필드 만들기의 클릭 실습으로 확인하세요.
일반적으로 링크는 초점을 옮긴 뒤 Enter로 열고, 버튼은 Enter나 Space로 활성화합니다. 링크를 버튼처럼, 버튼을 링크처럼 쓰기보다 이동과 동작의 목적에 맞는 요소를 선택해야 키보드 사용자가 예상한 방식으로 조작할 수 있습니다.
키보드 검사 중 초점이 보이지 않거나, 화면에만 초점이 남고 실제로는 숨겨진 메뉴에 들어간다면 사용하기 어렵습니다. 특히 팝업이나 펼침 영역을 만든 경우 열기·닫기 후 초점이 어디로 이동하는지 확인하세요. Tab 이동 순서는 화면을 읽는 순서와 크게 어긋나지 않아야 합니다.
작은 페이지로 직접 점검하기
아래 전체 코드를 accessible-page.html로 저장합니다. 이미지 강좌에서 제공한 960px 예제 파일을 같은 폴더에 둡니다. 이 양식은 입력 검사와 GET 값 확인용이며 문의를 수신하는 기능은 없습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>키보드 점검 실습</title>
<style>
body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
img { max-width: 100%; height: auto; }
input { max-width: 100%; font: inherit; }
:focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
</style>
</head>
<body>
<a href="#main-content">본문으로 건너뛰기</a>
<header>
<nav aria-label="페이지 안의 메뉴">
<a href="#guide">이용 안내</a>
<a href="#contact">문의 입력</a>
</nav>
</header>
<main id="main-content" tabindex="-1">
<h1>작은 정원 안내</h1>
<section id="guide">
<h2>이용 안내</h2>
<p>걷기 편한 신발과 물을 준비하세요.</p>
<img src="html-image-sample-lake-tree-960-v1.webp"
alt="호수의 작은 섬에 있는 나무와 먼 산" width="960" height="540">
</section>
<section id="contact">
<h2>문의 입력 연습</h2>
<form method="get">
<label for="practice-email">이메일(필수)</label>
<input id="practice-email" name="email" type="email"
aria-describedby="email-help" required>
<p id="email-help">실제 주소 대신 name@example.com을 사용하세요.</p>
<button type="submit">입력값 확인</button>
</form>
</section>
</main>
</body>
</html>- Tab을 한 번 눌러 본문 건너뛰기 링크에 이동하고 Enter를 누릅니다. 반복 메뉴를 지나 본문으로 이동하는지 확인합니다.
- main의 tabindex="-1"은 일반 Tab 순서에 새 항목을 추가하지 않으면서 이동 대상이 초점을 받을 수 있게 합니다. 이어지는 Tab 이동도 읽기 순서와 맞는지 확인합니다.
- 문의 필드까지 이동해 이메일을 비워 제출하고, abc처럼 틀린 값과 형식에 맞는 테스트 값을 각각 비교합니다. 이름과 도움말이 입력 중에도 남는지 확인합니다.
- 390px 너비와 확대 상태에서 그림·본문·입력칸이 읽히는지 확인합니다. 이미지 파일을 잠시 다른 이름으로 바꾼 뒤 대체 텍스트의 뜻도 검토하고, 파일명을 복구합니다.
| 점검 대상 | 잘못된 방향 | 이 예제의 방향 |
|---|---|---|
| 이동 | 클릭 이벤트만 가진 div | 실제 href가 있는 링크 |
| 입력 이름 | 사라지는 placeholder만 사용 | label과 지속적인 도움말 |
| 초점 | outline을 지우고 대체 표시도 없음 | CSS로 보이는 초점 표시 |
제목·링크·레이블·그룹의 의미와 기본 조작은 HTML이 제공합니다. 크기·배치·초점의 시각적 표현은 CSS가 담당합니다. 사용자 정의 오류 안내나 복잡한 메뉴를 추가하면 JavaScript의 상태·초점 처리도 별도로 시험해야 합니다. 이 실습을 통과했다고 모든 접근성 요구사항을 충족한다고 판단하지 마세요.
점검의 범위 이해하기
자동 검사 도구는 일부 오류를 찾지만 실제 읽기 순서와 이해 가능성을 모두 판단하지는 못합니다. 키보드 사용, 화면 확대, 필요하면 스크린 리더 확인을 함께 진행하세요. HTML 의미 요소를 바르게 쓰는 방법은 MDN의 HTML 접근성 안내에서 더 자세히 볼 수 있습니다.
자동 검사에서 오류가 0개여도 ‘여기’라는 링크 문구나 엉뚱한 대체 텍스트처럼 맥락의 문제는 남을 수 있습니다. 반대로 접근성 검사를 시작할 때 모든 보조 기술을 완벽히 다룰 필요는 없습니다. 의미 있는 HTML을 작성하고, 키보드만으로 핵심 작업을 마친 뒤, 실제 사용자에게 중요한 경로부터 차근차근 확인하세요.
