javascript 자바스크립트란 - 역할 = 버튼의 의미는 무엇입니까?




2 Answers

접근성 (및 기타) 소프트웨어에 div 의 목적이 무엇인지 알려줍니다. 더 자세한 내용은 초안 role 특성 사양을 참조하십시오 .

예, 단지 의미 론적입니다. 버튼에 click 이벤트를 보내면 작동합니다.

이 답변의 이전 버전 (2011 년)은 다음과 같이 말했습니다 :

...하지만 jQuery의 click 기능은 그렇게하지 않습니다. 다른 방법으로 연결된 핸들러가 아니라 jQuery 를 사용하여 요소에 연결 한 이벤트 핸들러 만 트리거합니다.

... 그리고 아래에 샘플 코드와 출력을 제공했습니다.

출력을 복제 할 수 없습니다 (2 년 후). 이전 버전의 jQuery로 돌아가더라도 jQuery 핸들러, DOM0 핸들러 및 DOM2 핸들러를 모두 트리거합니다. 실제 클릭과 jQuery의 click 기능간에 순서가 반드시 동일하지는 않습니다. jQuery 버전 1.4, 1.4.1, 1.4.2, 1.4.3, 1.4.4, 1.5, 1.5.1, 1.5.2, 1.6 및 1.7.1, 1.8.3, 1.9.1 및 1.11.3 (이 글을 쓰는 현재 현재 1.x 버전). 나는 그것이 브라우저 일 뿐이라고 결론을 내릴 수 있으며 어떤 브라우저를 사용하고 있는지 알지 못합니다. (지금 크롬 26과 파이어 폭스 20을 테스트하고 있습니다.)

다음은 실제로 jQuery 핸들러, DOM0 핸들러 및 DOM2 핸들러가 모두 jQuery의 click 에 의해 트리거 된 것을 보여주는 테스트입니다.

jQuery(function($) {
  var div;

  $("<p>").text("jQuery v" + $.fn.jquery).appendTo(document.body);

  // Hook up a handler *not* using jQuery, in both the DOM0 and DOM2 ways
  div = document.getElementById("theDiv");
  div.onclick = dom0Handler;
  if (div.addEventListener) {
    div.addEventListener('click', dom2Handler, false);
  } else if (div.attachEvent) {
    div.attachEvent('onclick', dom2Handler);
  }

  // Hook up a handler using jQuery
  $("#theDiv").click(jqueryHandler);

  // Trigger the click when our button is clicked
  $("#theButton").click(function() {
    display("Triggering <code>click</code>:");
    $("#theDiv").click();
  });

  function dom0Handler() {
    display("DOM0 handler triggered");
  }

  function dom2Handler() {
    display("DOM2 handler triggered");
  }

  function jqueryHandler() {
    display("jQuery handler triggered");
  }

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="theDiv">Try clicking this div directly, and using the button to send a click via jQuery's <code>click</code> function.</div>
<input type='button' id='theButton' value='Click Me'>

예제 문법

Google+ 프로젝트 페이지에서 div는 다음과 같이 div로 구성됩니다.

<div role="button"></div>  

나는 이것을 알고 싶습니다. 이것은 의미 론적 의미 일뿐입니다. 모두 div 스타일이나 이벤트 핸들에 영향을 줍니까? JQuery 클릭으로 버튼을 클릭하여 시뮬레이션하려고했지만 작동하지 않습니다.




그것은 단지 의미론입니다.

<button> 태그를 사용하여 기본 HTML 단추를 사용하는 것이 좋습니다. 그러나 <a> 또는 <div> 태그를 사용하여 사용자 지정 컨트롤을 사용하는 경우 role='button' 에 대한 다음 정보를 적극 권장합니다.

  1. 응답 트리거

사용자 정의 컨트롤을 작성하는 경우 단추처럼 작동해야합니다. 요소를 클릭하면 응답이 트리거됩니다. 예를 들어,이 응답은 버튼의 텍스트, 즉 사용자 정의 컨트롤을 변경하지 않습니다. 그렇다면 버튼이 아닙니다.

  1. 키보드 포커스

버튼으로 작동하는 이러한 사용자 정의 컨트롤은 키보드를 통해 탭으로 포커스를 설정할 수 있어야하며 화면 판독기를 프로그래밍 방식으로 포커스 할 수 있어야합니다.

  1. 조작성

사용자 정의 컨트롤은 onKeyDownonKeyDown 이벤트를 구현해야합니다. 버튼은 스페이스 바를 통해 활성화 할 수 있습니다. 따라서 사용자 지정 컨트롤에 역할을 추가하는 경우 이러한 이벤트를 직접 처리해야합니다. 그렇지 않으면 의미 론적 의미가 없어집니다. 스크린 리더 사용자는 스페이스 바를 사용하여 버튼을 활성화하려고 시도하지만 할 수는 없습니다.

role='button' 사용자 정의 컨트롤의 표준 구문은 다음과 같습니다.

<div role="button" tabindex="0" onclick="click_handler()" onKeyDown="keyhandler_for_space()">

<a> 태그를 사용하는 경우 tabindex="0" 은 필요하지 않지만 <span> 또는 <div> 와 같이 초점을 맞출 수없는 태그를 사용하여 수동으로 포커스를 허용하는 경우 필요합니다.

또 다른 유용한 팁은 사용자 정의 버튼을 작성하는 데 여전히 의지하는 경우라면 onclick 핸들러를 피할 수 있으므로 <a> 태그를 사용하는 것이 훨씬 더 좋습니다.




Related

javascript html javascript-events google-plus