작은 사이트를 위한 웹 접근성 점검 목록
웹 접근성은 장애가 있는 사용자만을 위한 배려가 아닙니다. 햇빛 아래에서 휴대폰을 보는 사람, 마우스 없이 키보드만 쓰는 사람, 느린 회선을 쓰는 사람 모두에게 영향을 줍니다. 작은 사이트를 만들 때 바로 적용할 수 있는 항목을 점검 목록으로 정리했습니다.
문서 구조
<html lang="ko">를 지정합니다. 화면 낭독기가 올바른 언어의 발음 규칙으로 읽고, 브라우저 번역 기능도 원문 언어를 정확히 인식합니다.- 제목은 순서대로 씁니다. 페이지당
h1은 하나, 그 아래로h2,h3를 단계적으로 씁니다. 글자를 크게 보이려고 제목 태그를 쓰거나, 제목인데div에 굵은 글씨만 주는 것은 피합니다. 화면 낭독기 사용자는 제목 목록으로 페이지를 훑어보기 때문입니다. - 랜드마크 요소를 씁니다.
header,nav,main,footer를 쓰면 보조 기술이 영역 사이를 바로 이동할 수 있습니다. - 링크 문구만 읽어도 목적지를 알 수 있게 씁니다. "여기를 클릭"보다 "개인정보처리방침 보기"가 낫습니다.
텍스트와 색상
- 명암비: WCAG 2.x는 본문 텍스트와 배경의 명암비를 4.5:1 이상, 큰 텍스트는 3:1 이상으로 권장합니다. 연한 회색 글씨가 세련되어 보여도 읽기 어렵다면 의미가 없습니다.
- 색만으로 정보를 전달하지 않습니다. 오류를 빨간색으로만 표시하면 색을 구분하기 어려운 사용자는 알아볼 수 없습니다. 아이콘이나 "필수 입력입니다" 같은 문구를 함께 씁니다.
- 확대를 막지 않습니다. 뷰포트 메타 태그에
user-scalable=no나maximum-scale=1을 넣지 않습니다. - 줄 길이와 줄 간격: 본문 폭을 적당히 제한하고 줄 간격을 1.5 이상으로 두면 긴 글을 읽기가 훨씬 편합니다. 한국어 본문에는
word-break: keep-all을 주면 단어 중간에서 줄이 바뀌지 않습니다.
이미지
- 정보를 담은 이미지에는 내용을 설명하는
alt를 씁니다. "이미지", "사진1" 같은 값은 도움이 되지 않습니다. - 장식용 이미지는
alt=""로 비워 두어 화면 낭독기가 건너뛰게 합니다.alt속성 자체를 빼면 파일 이름을 읽어 버리는 경우가 있습니다. - 글자가 들어간 이미지는 가능하면 실제 텍스트로 바꿉니다. 확대해도 깨지지 않고, 검색과 번역도 됩니다.
키보드 사용
- Tab 키만으로 모든 링크와 버튼, 입력란에 도달할 수 있어야 합니다.
- 포커스 표시(테두리)를 CSS로 없애지 않습니다.
outline: none을 쓴다면 반드시 다른 눈에 띄는 표시를 대신 제공합니다. - 클릭 동작이 있는 요소는
div가 아니라button으로 만듭니다.button은 키보드 포커스와 Enter/Space 동작을 기본으로 제공합니다. - 아이콘만 있는 버튼에는
aria-label로 이름을 붙입니다.
폼
- 모든 입력란에
<label for="...">를 연결합니다. 자리 표시자는 입력을 시작하면 사라지므로 레이블을 대신하지 못합니다. - 입력 종류에 맞는
type(email,tel,url)을 지정하면 모바일 자판이 알맞게 바뀝니다. - 전송 결과처럼 동적으로 바뀌는 메시지는
role="status"영역에 넣어 화면 낭독기가 읽게 합니다.
폼 구현 예시는 서버 없이 문의 폼 만들기에서 자세히 다룹니다.
직접 확인하는 방법
- 마우스를 치우고 Tab, Shift+Tab, Enter만으로 사이트를 한 바퀴 돌아봅니다. 가장 빠르고 효과적인 검사입니다.
- 브라우저 확대를 200%로 올려 내용이 잘리거나 겹치지 않는지 봅니다.
- Chrome 개발자 도구의 Lighthouse에서 접근성 항목을 실행해 자동으로 찾을 수 있는 문제를 확인합니다.
- 가능하다면 macOS의 VoiceOver나 Windows의 내레이터, NVDA 같은 화면 낭독기로 직접 들어 봅니다.
자동 검사 도구는 전체 문제 중 일부만 찾아냅니다. 점수가 100점이어도 실제 사용이 불편할 수 있으므로 직접 써 보는 확인을 꼭 함께 하세요.
댓글