웹 접근성 체크리스트 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 스킵 네비게이션

 

이 기본 요소만 잘 지켜도 웹 접근성을 크게 개선할 수 있다.