이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

button 역할은 사용자의 동작에 반응하는, 클릭할 수 있는 요소에 사용해야 합니다. 혼자서 사용할 때, role="button"은 어떠한 요소(예시: <p>, <span>, <div>)도 스크린 리더가 버튼으로 인식하게 할 수 있습니다. 추가로 aria-pressed 속성을 통해 토글 가능한 버튼을 만들 수도 있습니다.

참고:  HTML 기본 버튼(<button>, <input type="button" />, <input type="submit" />, <input type="reset" /><input type="image" />)은 모든 유저 에이전트와 보조 기술에서 지원하며 기본으로 키보드와 포커스 기능을 지원하기 때문에, 가능하면 button 역할보다 HTML 버튼을 사용하는게 좋습니다.

키보드와 포커스

버튼은 상호작용 컨트롤이며 따라서 포커스가 가능합니다. button 역할을 추가한 요소가 포커스 불가능한 요소(<span><div><p> 등)라면 tabindex 속성으로 포커스 가능하게 해야 합니다.

Buttons can be operated by both mouse users as well as keyboard users. For native HTML <button> elements, the button's onclick event will fire both for mouse clicks and pressing of spacebar ,while the button has focus. But if another tag is used  to create a custom button, the onclick event will only fire when clicked by the mouse cursor, even if role="button" is used. Because of this, the developer will have to surely add a separate key event handler to the element so that the button can be triggered,even  when the space key is pressed.

Warning: Be careful when marking up links with the button role. Buttons are expected to be triggered using the Space key, while links are expected to be triggered using the Enter key. In other words, when links are used to behave like buttons, adding role="button" alone is not sufficient. It will also be necessary to add a key event handler that listens for the Space key in order to be consistent with native buttons.

토글 버튼

An advantage of using role="button" is that it allows the creation of toggle buttons. A toggle button can have two states: pressed and not pressed. Whether  a button is a toggle button or not can be indicated with the aria-pressed attribute in addition to the button role:

  • If aria-pressed is not used the button is not a toggle buttton.
  • If aria-pressed="false" is used the button is a toggle button that is currently not pressed. 
  • If aria-pressed="true" is used the button is a toggle button that is currently pressed.
  • if aria-pressed="mixed" is used, the button is considered to be partially pressed.

버튼 이름 붙이기

Buttons should always have an accessible name. For most buttons, this name will be the same as the text inside the button. In some cases, for example for icon buttons, the accessible name can be provided through an aria-label or aria-labelledby attribute.

유저 에이전트와 보조 기술에서의 효과

When the button role is used, user agents should expose the element as a button control in the operating system's accessibility API. Screen readers should announce the element as a button and describe its accessible name. Speech recognition software should allow the button to be activated by saying "click" followed by the button's accessible name.

Note: Opinions may differ on how assistive technology should handle this technique. The information provided above is one of those opinions and therefore not normative.

예시

ARIA 기본 버튼

In the snippet below, a span element has been given the button role. Because a <span> element is used, the tabindex attribute is required to make the button focusable and part of the tab order. Note that this snippet implies that CSS styles are provided to make the <span> element look like a button and that handleBtnClick and handleBtnKeyUp are event handlers that perform the button's action when clicked and when the Space key is pressed. 

<span role="button" tabindex="0" onclick="handleBtnClick()" onKeyUp="handleBtnKeyUp()">Save</span>

ARIA 토글 버튼

In this snippet a native HTML button is converted to a toggle button using the aria-pressed attribute. Note that the tabindex attribute needs not to be used here because the <button> element is already focusable by default. When the button is activated, the aria-pressed value keeps on switching between true and false;

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title>ARIA Button Role Example</title>
 <style type="text/css">
  [role="button"] {
   padding:3px;
   border: 1px solid #CCC;
  }
  [role="button"][aria-pressed="true"] {
   border: 2px solid #000;
  }
 </style>
 <script type="text/javascript">
  function handleBtnClick(event) {
    event = event || window.event;
    var pressed = event.target.getAttribute("aria-pressed") == "true";
    //change the aria-pressed value as the button is toggled:
    event.target.setAttribute("aria-pressed", pressed ? "false" : "true");
    //... (perform the button's logic here)
  }

  function handleBtnKeyUp(event) {
    event = event || window.event;
    if (event.keyCode === 32) { // check for Space key
      handleBtnClick(event);
    }
  }
 </script>
</head>
<body>
 <button role="button" aria-pressed="false" onclick="handleBtnClick(event)" onKeyUp="handleBtnKeyUp(event)">Edit Mode</button>
</body>
</html>

작업 예:

노트 

사용한 ARIA 속성

추가 자료

문서 태그 및 공헌자

태그: 
이 페이지의 공헌자: urty5656, seunghun, naduhy2
최종 변경자: urty5656,