접근성 좋은 버튼 마크업 방법
퍼블리셔 실무 기준 정리
웹 퍼블리싱에서 버튼은 사용자 인터랙션의 핵심 요소다.
하지만 단순히 디자인만 고려해서 버튼을 만들면
스크린리더 사용자나 키보드 사용자에게는 사용하기 어려운 UI가 될 수 있다.
그래서 접근성을 고려한 버튼 마크업은 다음 기준을 지켜야 한다.
- 올바른 HTML 요소 사용
- 명확한 텍스트 제공
- 키보드 접근 가능
- 아이콘 버튼 설명 제공
이번 글에서는 접근성 좋은 버튼 마크업 방법을 실무 기준으로 정리해보자.
1. 버튼은 button 태그 사용하기
가장 기본적인 접근성 원칙이다.
버튼 기능에는 반드시 button 태그를 사용하는 것이 좋다.
올바른 예
<!-- HTML -->
<button type="button">확인</button>
button 태그는 기본적으로
- 키보드 접근 가능
- 스크린리더 인식 가능
- 클릭 이벤트 지원
을 제공한다.
잘못된 예
<!-- HTMl -->
<div class="btn">확인</div>
div를 버튼처럼 사용하는 것은 좋지 않다.
이 경우
- 키보드 접근 불가
- 스크린리더 인식 어려움
문제가 발생한다.
2. 링크와 버튼을 구분하기
실무에서 많이 헷갈리는 부분이다.
버튼
<!-- HTMl -->
<button type="submit">저장</button>링크
<!-- HTML -->
<a href="/list">목록 보기</a>페이지 이동은 a
기능 실행은 button
으로 구분해야 한다.
3. 아이콘 버튼에는 설명 제공
아이콘만 있는 버튼은 의미를 알기 어렵다.
예를 들어 검색 버튼이 있다고 하자.
접근성 없는 코드
<!-- HTML -->
<button>
<span class="icon-search"></span>
</button>
스크린리더는 버튼의 의미를 알 수 없다.
접근성 있는 코드
<!-- HTML -->
<button aria-label="검색">
<span class="icon-search"></span>
</button>
또는
<!-- HTML -->
<button>
<span class="icon-search"></span>
<span class="sr-only">검색</span>
</button>
4. 버튼 텍스트는 명확하게 작성
다음과 같은 버튼 텍스트는 좋지 않다.
❌ 확인
❌ 실행
❌ 클릭
대신
⭕ 회원가입
⭕ 검색
⭕ 게시글 등록
처럼 버튼 역할이 명확하게 드러나야 한다.
5. 키보드 포커스 스타일 제공
키보드 사용자는 포커스 표시를 통해 현재 위치를 확인한다.
/* CSS */
button:focus {
outline: 2px solid #2a7de1;
}
포커스를 제거하는 코드는 좋지 않다.
/* CSS */
outline: none;
6. 버튼 크기는 충분히 크게
접근성 기준에서는 터치 영역도 중요하다.
모바일에서는 최소 다음 크기를 권장한다.
- 44px 이상
/* CSS */
button {
min-height: 44px;
padding: 10px 16px;
}
7. disabled 상태 제공
버튼이 비활성 상태라면
명확하게 표시해야 한다.
<!-- HTML -->
<button disabled>
저장
</button>스크린리더는 버튼이 비활성 상태임을 인식할 수 있다.
접근성 좋은 버튼 마크업 예시
실무에서 많이 사용하는 구조다.
<!-- HTML -->
<button class="btn btn-primary">
<span class="icon-search" aria-hidden="true"></span>
<span class="btn-text">검색</span>
</button>
아이콘은 aria-hidden="true" 를 사용해 스크린리더에서 제외할 수 있다.
정리
접근성 좋은 버튼 마크업을 위해서는 다음 기준을 지켜야 한다.
1. button 태그 사용
2. 링크와 버튼 구분
3. 아이콘 버튼 설명 제공
4. 명확한 버튼 텍스트
5. 포커스 스타일 제공
6. 충분한 버튼 크기
7. disabled 상태 제공
이 기본 원칙만 지켜도 접근성이 크게 개선된다.