웹 접근성(a11y) 기본 — 제목·ALT·대비
기술 블로그에서 가장 먼저 지켜야 할 웹 접근성 기본 요소인 제목 구조, 이미지 ALT, 색 대비를 실무 체크리스트로 정리합니다.
웹 접근성은 특별한 사용자만을 위한 별도 기능이 아닙니다. 제목 구조가 명확하면 화면 낭독기 사용자뿐 아니라 급하게 글을 훑는 독자도 도움을 받습니다. 이미지 ALT가 적절하면 이미지가 보이지 않는 환경에서도 의미가 전달됩니다. 색 대비가 충분하면 야외의 밝은 화면, 저품질 모니터, 시력이 좋지 않은 사용자 모두에게 읽기 쉬운 페이지가 됩니다.
기술 블로그에서는 복잡한 위젯보다 글, 이미지, 링크, 표가 핵심입니다. 그래서 접근성의 기본만 꾸준히 지켜도 품질이 크게 좋아집니다. 이 글은 서민혁닷컴 같은 Markdown 기반 블로그에서 바로 적용할 수 있는 제목, ALT, 대비 중심의 실무 체크리스트를 제공합니다.
제목 구조: 문서의 지도 만들기
HTML의 제목 태그는 시각적인 글자 크기만 의미하지 않습니다. 문서의 구조를 나타냅니다. 페이지에는 보통 하나의 H1이 있고, 본문은 H2, H3 순서로 내려갑니다. 제목 단계를 건너뛰거나, 디자인 때문에 제목 태그를 잘못 사용하면 화면 낭독기 사용자가 문서를 이해하기 어려워집니다.
Markdown에서는 #, ##, ### 문법이 제목 태그로 변환됩니다. 블로그 상세 페이지에서 사이트 템플릿이 이미 글 제목을 H1으로 렌더링한다면, Markdown 본문은 ##부터 시작하는 것이 일반적입니다. 본문에서 다시 #를 사용하면 H1이 중복될 수 있습니다.
| Markdown | HTML 의미 | 사용 기준 |
|---|---|---|
# 제목 |
H1 | 페이지 대표 제목, 보통 템플릿에서 처리 |
## 섹션 |
H2 | 본문의 큰 장 |
### 하위 섹션 |
H3 | H2 아래 세부 내용 |
#### 세부 항목 |
H4 | 긴 문서에서 제한적으로 사용 |
좋은 제목은 독자가 목차만 봐도 글의 흐름을 이해하게 합니다. “소개”, “내용”, “기타”처럼 모호한 제목보다 “색인 요청 전에 확인할 것”, “DNS 레코드 기본 이해”처럼 행동이나 주제가 드러나는 제목이 좋습니다.
ALT: 이미지를 설명하는 문장
ALT는 이미지가 전달하는 의미를 텍스트로 설명하는 속성입니다. 화면 낭독기는 ALT를 읽고, 이미지가 로드되지 않을 때 브라우저는 ALT를 보여 줄 수 있습니다. 검색엔진도 이미지의 맥락을 이해하는 데 참고합니다. 하지만 ALT는 파일명을 반복하거나 “이미지”라고 쓰는 곳이 아닙니다.
좋은 ALT는 이미지의 역할에 따라 달라집니다.
| 이미지 유형 | ALT 작성 방식 | 예시 |
|---|---|---|
| 정보 이미지 | 핵심 정보를 설명 | “LCP, INP, CLS 지표가 카드 형태로 나열된 대시보드” |
| 화면 캡처 | 화면에서 중요한 상태 설명 | “Search Console URL 검사 결과에서 색인 생성 요청 버튼이 보이는 화면” |
| 장식 이미지 | 의미가 없으면 빈 ALT 검토 | alt="" |
| 아이콘 | 기능을 설명 | “검색 열기” |
Markdown 블로그에서 대표 이미지는 frontmatter의 heroAlt 같은 필드로 관리할 수 있습니다. 본문 이미지는  형식을 사용합니다. 이미지를 넣는 순간 “이 이미지를 보지 못하는 사람에게 무엇을 전달해야 하는가?”를 질문하면 ALT 작성이 쉬워집니다.
색 대비: 읽을 수 있어야 디자인이다
색 대비는 텍스트와 배경의 밝기 차이를 말합니다. 회색 글자를 연한 배경 위에 올리면 세련되어 보일 수 있지만, 많은 사용자가 읽기 어렵습니다. 특히 본문, 링크, 버튼, 입력 오류 메시지는 충분한 대비가 필요합니다.
일반 텍스트는 WCAG 기준으로 대략 4.5:1 이상의 대비를 목표로 삼는 것이 좋습니다. 큰 텍스트는 기준이 조금 낮지만, 블로그 본문은 대부분 일반 텍스트이므로 보수적으로 잡는 편이 안전합니다. 브랜드 색상을 링크에 사용할 때도 배경과의 대비를 확인해야 합니다.
실무에서는 다음 항목을 점검하세요.
- 본문 글자색과 배경색의 대비가 충분한가?
- 링크가 색만으로 구분되지 않고 밑줄 또는 명확한 상태가 있는가?
- hover, focus 상태에서도 대비가 유지되는가?
- 코드 블록의 주석 색이 너무 흐리지 않은가?
- 다크 모드가 있다면 양쪽 테마 모두 대비를 확인했는가?
- 경고, 성공, 오류 상태가 색만으로 전달되지 않는가?
키보드와 포커스도 기본이다
이 글의 중심은 제목, ALT, 대비이지만, 키보드 접근성도 기본입니다. 링크와 버튼은 Tab 키로 이동할 수 있어야 하고, 현재 포커스가 어디인지 시각적으로 보여야 합니다. 브라우저 기본 focus outline을 무작정 제거하면 키보드 사용자가 길을 잃습니다.
블로그의 헤더 메뉴, 검색 버튼, 페이지네이션, 관련 글 링크는 키보드로 접근 가능해야 합니다. 마우스로만 열리는 메뉴는 모바일과 보조기기 환경에서 문제가 됩니다. 복잡한 UI가 적은 정적 블로그일수록 기본 HTML 요소를 올바르게 사용하는 것만으로 접근성을 크게 확보할 수 있습니다.
성능과 접근성의 연결
접근성은 성능과도 연결됩니다. 이미지 크기를 미리 지정하면 레이아웃이 밀리지 않아 CLS가 줄고, 의미 있는 제목 구조는 사용자가 빠르게 원하는 부분으로 이동하게 합니다. Core Web Vitals를 점검할 때 접근성도 함께 보면 효율적입니다. 관련 내용은 Core Web Vitals 초보 가이드를 참고하세요.
구조화 데이터와도 연결됩니다. 사람이 읽는 제목과 설명이 명확해야 JSON-LD의 headline, description도 자연스럽게 작성됩니다. 검색 노출을 위해 JSON-LD 구조화 데이터로 검색 노출 보강하기를 적용하더라도, 실제 문서 구조가 엉켜 있으면 사용자 경험은 좋아지지 않습니다.
Markdown 작성 체크리스트
- 본문은
##제목부터 시작하는가? - 제목 단계가 H2에서 H4까지 순서대로 내려가는가?
- 제목이 실제 섹션 내용을 설명하는가?
- 모든 정보성 이미지에 의미 있는 ALT가 있는가?
- 대표 이미지 alt가 파일명 반복이 아닌 설명 문장인가?
- 링크 문구만 보고도 이동할 내용을 예상할 수 있는가?
- 표에는 머리글 행이 있고 내용이 간결한가?
- 본문과 보조 텍스트의 색 대비가 충분한가?
- 키보드로 주요 링크와 버튼을 이동할 수 있는가?
Markdown 운영 기준은 Markdown으로 기술 블로그 운영하기에서 설명한 작성 워크플로와 함께 적용하면 좋습니다. 접근성은 마지막에 한 번 검사하는 항목이 아니라 글을 쓰는 과정에 포함되어야 합니다.
실무 주의점
첫째, 접근성을 “나중에 고치는 것”으로 미루면 비용이 커집니다. 글이 많아진 뒤 이미지 ALT를 다시 채우거나 제목 구조를 고치는 일은 생각보다 번거롭습니다. 템플릿과 작성 체크리스트에 접근성 항목을 포함시키세요.
둘째, 자동 검사 도구만 믿지 마세요. Lighthouse나 axe 같은 도구는 명백한 오류를 잘 찾지만, ALT가 실제로 적절한지, 링크 문구가 문맥에 맞는지는 사람이 판단해야 합니다. 자동 점수는 출발점이고, 최종 품질은 독자의 이해 가능성으로 봐야 합니다.
셋째, 디자인 시스템의 색상 토큰을 정리하세요. 매번 임의의 회색이나 브랜드 색을 선택하면 대비가 흔들립니다. 본문, 보조 텍스트, 링크, 테두리, 배경, 경고 색을 토큰으로 관리하면 접근성과 일관성을 함께 유지할 수 있습니다.
웹 접근성의 기본은 거창하지 않습니다. 의미 있는 HTML, 읽을 수 있는 색, 설명 가능한 이미지, 예측 가능한 링크를 꾸준히 지키는 일입니다. 이것이 검색엔진, 보조기기, 모바일 사용자, 바쁜 독자 모두에게 좋은 기술 블로그의 출발점입니다.