ARIA 접근성 가이드

상태 · 위젯 상태

aria-pressed

버튼을 토글 버튼으로 만들고, 지금 눌린(켜진) 상태인지 알립니다.

기초

한눈에 보기

구분
상태 (State)
분류
위젯 상태
값 형식
삼중 상태 (true / false / mixed / undefined)
기본값
undefined
적용 범위
특정 역할에만 사용
HTML 대체
없음 (HTML에는 토글 버튼 요소가 없습니다. <button>에 이 속성을 붙입니다)

설명

aria-pressed는 button을 토글 버튼(누를 때마다 켜짐·꺼짐이 바뀌는 버튼)으로 만들고, 현재 상태를 알립니다. 속성이 있으면 화면낭독기는 “토글 버튼, 눌림” 또는 “눌리지 않음”처럼 읽습니다. 속성이 없으면(undefined) 일반 버튼입니다.

편집기의 “굵게”·“기울임” 버튼, 동영상의 “음소거” 버튼, “좋아요”·“즐겨찾기” 버튼, 필터 칩처럼 같은 버튼을 다시 눌러 되돌리는 기능에 씁니다. <button>에 붙이면 키보드 동작(Enter·Space)이 기본으로 제공되므로 스크립트에서는 값만 바꾸면 됩니다.

가장 흔한 실수는 상태에 따라 버튼 이름을 바꾸는 것입니다. “음소거” 버튼을 누르면 이름을 “음소거 해제”로 바꾸면서 aria-pressed="true"까지 쓰면, “음소거 해제, 토글 버튼, 눌림”처럼 상반된 정보가 들립니다. 둘 중 하나만 선택합니다. 이름을 고정하고 aria-pressed로 상태를 알리거나, 이름만 바꾸고 aria-pressed는 쓰지 않습니다.

mixed는 여러 대상을 한꺼번에 제어하는 토글 버튼에서 일부만 켜졌을 때 씁니다(예: 선택한 글자 중 일부만 굵은 상태). 켬/끔이 아니라 “설정 켜기/끄기”라는 의미가 더 강하면 switch(aria-checked)가, 여러 선택지 중 하나를 고르는 기능이면 라디오 그룹이 더 알맞을 수 있습니다.

테스트할 때는 버튼을 누를 때마다 값과 시각적 눌림 표시가 함께 바뀌는지, 상태가 바뀐 직후 화면낭독기가 새 상태를 읽는지, 버튼 이름이 상태와 충돌하지 않는지 확인합니다.

값

값
값의미
true눌린(켜진) 상태입니다.
false토글 버튼이며, 눌리지 않은(꺼진) 상태입니다.
mixed여러 대상을 제어하는데 일부만 켜진 상태입니다.
undefined 기본값토글 버튼이 아닙니다(일반 버튼).

사용 예

음소거 토글 버튼

권장HTML
<button type="button" aria-pressed="false">음소거</button>

상태 바꾸기

JavaScript
btn.addEventListener('click', function () {
  var pressed = btn.getAttribute('aria-pressed') === 'true';
  btn.setAttribute('aria-pressed', String(!pressed));
  video.muted = !pressed;
});

아이콘 토글 버튼

HTML
<button type="button" aria-pressed="true" aria-label="즐겨찾기">
  <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">…</svg>
</button>

이름과 상태를 함께 바꾸는 경우 (비권장)

비권장HTML
<!-- 눌린 뒤 -->
<button type="button" aria-pressed="true">음소거 해제</button>

“음소거 해제, 토글 버튼, 눌림”으로 들려 지금 음소거인지 아닌지 헷갈립니다. 이름은 “음소거”로 고정합니다.

직접 해 보기

버튼을 누르거나 Tab으로 이동해 Space·Enter를 눌러 보세요. 이름은 그대로이고 aria-pressed 값만 바뀝니다.

미리 보기 문장입니다.

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
눌리지 않은 토글 버튼에 포커스굵게, 토글 버튼, 눌리지 않음
Space를 눌러 켬눌림
mixed 상태의 토글 버튼에 포커스굵게, 토글 버튼, 부분 눌림

사용 지침

이렇게 쓰세요

  • <button>에 붙여 키보드 동작을 기본으로 얻습니다.
  • 버튼 이름은 고정하고 값만 바꿉니다.
  • [aria-pressed="true"] 선택자로 시각적 눌림 표시를 함께 줍니다.
  • 초기 상태도 "false"로 명시해 토글 버튼임을 알립니다.

이렇게 쓰지 마세요

  • 상태에 따라 이름(“켜기/끄기”)을 바꾸면서 동시에 쓰지 않습니다.
  • 링크, 탭, 메뉴 항목에 쓰지 않습니다. 탭은 aria-selected, 현재 페이지 링크는 aria-current입니다.
  • 펼침 버튼에 쓰지 않습니다. 영역을 여닫는 버튼은 aria-expanded입니다.

사용할 수 있는 역할

button
aria-checkedaria-expandedaria-selectedaria-current

이 속성을 쓰는 패턴

버튼과 토글 버튼스위치

참고 자료