웹 접근성 체크리스트 10가지
퍼블리셔 실무 기준 정리
웹 접근성(A11Y)은 장애가 있는 사용자뿐만 아니라
모든 사용자가 웹을 편하게 이용할 수 있도록 만드는 중요한 요소다.
특히 공공기관이나 서비스 사이트에서는 웹 접근성 준수 여부가 매우 중요한 기준이 된다.
이번 글에서는 퍼블리싱 실무에서 꼭 확인해야 할 웹 접근성 체크리스트 10가지를 정리해보자.
1. 이미지에는 대체 텍스트 제공하기
이미지에는 반드시 alt 속성을 제공해야 한다.
<!-- HTML -->
<img src="logo.png" alt="회사 로고">
스크린리더 사용자는 이미지를 직접 볼 수 없기 때문에 대체 텍스트가 중요하다.
✔ 의미 있는 이미지 → alt 작성
✔ 장식 이미지 → alt=""
2. 키보드로 모든 기능 사용 가능해야 한다
마우스를 사용하지 못하는 사용자를 위해
키보드만으로도 모든 기능을 사용할 수 있어야 한다.
- TAB 이동 가능
- 버튼 포커스 이동
- 메뉴 조작 가능
3. 명확한 label 제공
폼 입력 요소에는 반드시 label 태그를 제공해야 한다
<!-- HTML -->
<label for="email">이메일</label>
<input id="email" type="email">
label이 없으면
스크린리더 사용자는 입력 목적을 알기 어렵다.
4. 아이콘 버튼에는 설명 제공
아이콘만 있는 버튼은 의미를 알 수 없기 때문에
설명을 제공해야 한다.
<!-- HTML -->
<button aria-label="검색">
<span class="icon-search"></span>
</button>
또는
<!-- HTML -->
<button>
<span class="icon-search"></span>
<span class="sr-only">검색</span>
</button>
5. 색상만으로 정보 전달하지 않기
색상만으로 정보를 전달하면
색각 이상 사용자에게 문제가 될 수 있다.
예를 들어
❌ 빨간색 = 오류
⭕ 아이콘 + 텍스트 함께 제공
6. 충분한 색 대비 유지
텍스트와 배경 사이에는
충분한 명도 대비가 필요하다.
웹 접근성 기준
- 일반 텍스트 → 4.5:1 이상
- 큰 텍스트 → 3:1 이상
색 대비 확인은 다음 도구로 확인할 수 있다.
- WebAIM Contrast Checker
- Chrome DevTools
7. heading 구조 올바르게 사용
페이지 구조는 heading 태그로 구성해야 한다.
<!-- HTML -->
<h1>페이지 제목</h1>
<h2>섹션 제목</h2>
<h3>세부 제목</h3>
잘못된 예 :
<!-- HTML -->
<h1>
<h4>
<h2>이렇게 순서가 깨지면
스크린리더 사용자가 구조를 이해하기 어렵다.
8. 링크 텍스트는 명확하게 작성
다음과 같은 링크는 좋지 않다.
❌ 자세히 보기
❌ 클릭
대신
⭕ 웹 접근성 가이드 보기
⭕ 퍼블리싱 체크리스트 확인
처럼 목적을 알 수 있는 텍스트를 사용해야 한다.
9. 테이블에는 제목 제공
데이터 테이블에는 th 태그를 사용해야 한다.
<!-- HTML -->
<table>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
</tr>
</thead>
</table>
스크린리더는
헤더 정보를 기준으로 데이터를 읽는다.
10. 스킵 네비게이션 제공
페이지 상단에는 본문 바로가기 링크를 제공하는 것이 좋다.
<!-- HTML -->
<a href="#content" class="skip-link">
본문 바로가기
</a>
키보드 사용자들은
메뉴를 반복해서 지나가지 않고
바로 콘텐츠로 이동할 수 있다.
정리
웹 접근성은 복잡한 기술이 아니라
기본적인 퍼블리싱 원칙을 지키는 것에서 시작한다.
퍼블리싱 실무에서 반드시 확인해야 할 체크리스트는 다음과 같다.
1. 이미지 alt 제공
2. 키보드 접근 가능
3. label 제공
4. 아이콘 버튼 설명
5. 색상만으로 정보 전달 금지
6. 충분한 색 대비
7. 올바른 heading 구조
8. 명확한 링크 텍스트
9. 테이블 헤더 제공
10 스킵 네비게이션
이 기본 요소만 잘 지켜도 웹 접근성을 크게 개선할 수 있다.