HTML 강좌 / HTML 접근성 기본: 제목·링크·이미지·키보드

HTML 접근성의 출발점은 문서의 의미를 정확히 쓰는 것입니다. 제목을 순서대로 배치하고, 링크의 목적을 알 수 있게 적고, 이미지에는 역할에 맞는 대체 텍스트를 제공하며, 모든 조작을 키보드로도 할 수 있는지 확인하세요.

제목 구조를 순서대로 작성하기

제목은 글자 크기를 키우는 도구가 아니라 내용의 계층을 나타냅니다. 페이지의 주제에 해당하는 h1 아래에 주요 절을 h2로, 그 절의 하위 주제를 h3로 작성합니다. 더 크게 보이게 하려고 h4를 바로 쓰는 대신 CSS로 크기를 조절하세요.

한 페이지에서 제목만 차례로 읽어도 무엇을 설명하는지 알 수 있어야 합니다. 비어 있는 제목이나 내용과 맞지 않는 제목은 구조를 흐리게 합니다.

예를 들어 ‘배송 안내’ 아래에 ‘배송 지역’과 ‘소요 시간’이 있다면 두 하위 항목은 h3가 자연스럽습니다. 제목 글자의 크기가 마음에 들지 않아도 계층을 바꾸지 말고 CSS로 조정하세요. 제목 구조는 보이는 목차뿐 아니라 보조 기술이 문서를 훑는 기준이 됩니다.

링크 문구와 이미지 설명 점검하기

링크가 여러 개 있을 때 ‘여기’만 반복하면 목적을 구별하기 어렵습니다. <a href="guide.html">이용 안내 읽기</a>처럼 연결되는 내용을 링크 자체에 적으세요. 파일을 내려받는 링크라면 파일의 종류도 문맥에서 알 수 있게 하세요.

정보를 담은 이미지의 alt는 이미지가 전달하는 핵심을 설명합니다. 같은 내용을 바로 옆 문장이 충분히 전달하는 장식 이미지에는 alt=""가 적합할 수 있습니다. 이미지가 링크라면 링크의 목적도 전달돼야 합니다. 판단이 어려울 때는 W3C WAI 이미지 설명 결정표를 확인하세요.

예를 들어 ‘이용 안내’ 페이지로 가는 이미지 링크에는 ‘이용 안내 열기’처럼 목적을 전달하는 대체 텍스트가 필요합니다. 바로 옆에 같은 목적의 텍스트 링크가 있으면 중복 탐색을 줄일 방법을 검토할 수 있습니다. 이미지의 색과 모양을 세세하게 나열하기보다 그 이미지가 이 위치에서 수행하는 역할을 기준으로 작성하세요.

키보드로 조작해 보기

1. 마우스를 사용하지 않고 Tab 키로 링크와 양식 필드, 버튼을 차례로 이동합니다.
2. 현재 어디에 초점이 있는지 화면에 보이는지 확인합니다.
3. Enter 또는 Space 키로 동작하는 요소를 실제로 조작해 봅니다.
4. 입력 오류가 났을 때 메시지를 읽고 값을 고쳐 다시 제출할 수 있는지 확인합니다.

눌러야 하는 요소를 단순한 div에 클릭 이벤트만 붙여 만들면 키보드 동작과 의미를 따로 구현해야 합니다. 링크 이동에는 a, 동작 실행에는 button처럼 본래 목적에 맞는 요소부터 사용하세요.

일반적으로 링크는 초점을 옮긴 뒤 Enter로 열고, 버튼은 Enter나 Space로 활성화합니다. 링크를 버튼처럼, 버튼을 링크처럼 쓰기보다 이동과 동작의 목적에 맞는 요소를 선택해야 키보드 사용자가 예상한 방식으로 조작할 수 있습니다.

키보드 검사 중 초점이 보이지 않거나, 화면에만 초점이 남고 실제로는 숨겨진 메뉴에 들어간다면 사용하기 어렵습니다. 특히 팝업이나 펼침 영역을 만든 경우 열기·닫기 후 초점이 어디로 이동하는지 확인하세요. Tab 이동 순서는 화면을 읽는 순서와 크게 어긋나지 않아야 합니다.

점검의 범위 이해하기

자동 검사 도구는 일부 오류를 찾지만 실제 읽기 순서와 이해 가능성을 모두 판단하지는 못합니다. 키보드 사용, 화면 확대, 필요하면 스크린 리더 확인을 함께 진행하세요. HTML 의미 요소를 바르게 쓰는 방법은 MDN의 HTML 접근성 안내에서 더 자세히 볼 수 있습니다.

자동 검사에서 오류가 0개여도 ‘여기’라는 링크 문구나 엉뚱한 대체 텍스트처럼 맥락의 문제는 남을 수 있습니다. 반대로 접근성 검사를 시작할 때 모든 보조 기술을 완벽히 다룰 필요는 없습니다. 의미 있는 HTML을 작성하고, 키보드만으로 핵심 작업을 마친 뒤, 실제 사용자에게 중요한 경로부터 차근차근 확인하세요.