정의 및 사용 방법

role 속성의 button 값은 웹 접근성 측면에서 해당 HTML 요소에 버튼 역할(role)이라는 의미(semantic meaning)를 부여합니다.

클릭 또는 누를 때 사용자가 특정 동작을 실행할 수 있는 버튼의 의미를 가진 콘텐츠라는 것을 스크린 리더 등과 같은 웹 접근성 도구가 사용자에게 알려줄 수 있도록 합니다.

특징

  • 스크린 리더 등과 같은 웹 접근성 도구가 해당 요소를 버튼의 역할이라는 것으로 식별하는 데 사용됩니다.
  • 이 값은 의미(semantic meaning)에 관한 것일 뿐, 포커스, 클릭 이벤트 및 키보드 처리와 같은 일반적인 버튼 기능은 제공하지 않습니다.
  • 이러한 기능들은 직접 추가해야 합니다.

고려할 점

기본적으로 HTML의 많은 요소들은 이미 고유한 역할의 의미(semantic meaning)를 가지고 있습니다.

role 속성의 button 값으로 부여할 수 있는 버튼 역할을 이미 가지고 있는 요소들도 있습니다.

다음과 같은 요소들입니다.

이러한 요소들은 이미 버튼의 역할을 하기 때문에 role 속성의 button 값으로 버튼 역할을 부여할 필요는 없으며, 스크린 리더 등과 같은 웹 접근성 도구뿐만 아니라 관련 기술에서의 처리, 코드를 직접 다루는 개발자 및 코드의 가독성 측면에서도 올바른 의미론적 HTML 요소들을 사용하는 것이 좋습니다.

role 속성의 button 값 사용하기

이미 버튼 역할을 가지고 있는 요소는 아니지만, 버튼 역할을 부여하고 싶은 요소에 사용합니다. 특히, 이러한 요소는 이미 고유한 다른 역할이 없는 요소(예를 들면, <div>)에 사용하는 것이 좋습니다.

기본 예제

HTML 
<div role="button">저장하기</div>

위 예제는 이미 고유한 다른 역할이 없는 <div>에 role 속성의 button 값을 사용해 버튼의 역할을 부여했습니다. 이렇게 하면 스크린 리더 등과 같은 웹 접근성 도구는 해당 요소를 버튼으로 식별합니다.

하지만, 의미(semantic meaning)에 관한 것일 뿐, 포커스, 클릭 이벤트 및 키보드 처리와 같은 일반적인 버튼 기능은 제공하지 않습니다. 이러한 기능들은 다음의 예와 같이 직접 추가할 수 있습니다.

HTML 
<div role="button" tabindex="0" onclick="buttonFunction()">저장하기</div>

위 예제는 role 속성의 button 값을 사용해 <div>에 버튼의 역할을 부여하고, tabindex 속성을 사용해 키보드로 포커스할 수 있도록 했습니다. 또한 자바스크립트의 onclick 이벤트를 사용해 사용자가 클릭하면 buttonFunction() 함수가 실행되도록 했습니다. 물론, CSS를 추가해 버튼 스타일을 적용할 수도 있습니다. 이처럼 role="button"을 사용하는 경우 버튼으로서 필요한 기능을 직접 추가해야 합니다.

실제 버튼 만들어 보기

HTML 
<div class="btn" role="button" tabindex="0" onclick="buttonFunction()">저장하기</div>

<script>
    function buttonFunction() {
	    alert("저장되었습니다.");
    }
</script>
CSS 
.btn {
	display: inline-block;
	padding: 10px 20px;
	background-color: #333;
	color: white;
	border-radius: 5px;
	cursor: pointer;
}
실제 적용된 모습 버튼을 클릭하면 자바스크립트가 실행됩니다.

명세서

role 속성의 button 값에 대한 명세서 사양
명세서 사양
role="button" Accessible Rich Internet Applications (WAI-ARIA)
#button

참고문헌

같이 보기