Botões são entradas de dados que são acionadas pelo usuário por meio de cliques ou pressionamento de teclas. Ao definir um elemento de marcação como botão, é recomendável dar a ele a aparência de um botão físico.
Preferencialmente, deve-se optar por utilizar os elementos da linguagem de marcação. A definição de botões usando outros elementos (por exemplo, <div>
e <span>
) é necessário em casos especiais como, por exemplo, a definição de efeitos visuais não possíveis utilizando o elemento de botão nativo da linguagem de marcação. Assim, além de definir visualmente um elemento arbitrário como botão, também é necessário que tal elemento também seja marcado semanticamente como tal.
Propriedades para o papel button
: aria-atomic
, aria-controls
, aria-describedat
, aria-describedby
, aria-dropeffect
, aria-flowto
, aria-haspopup
, aria-label
, aria-labelledby
, aria-live
, aria-owns
, aria-relevant
.
Estados para o papel button
: aria-busy
, aria-disabled
, aria-expanded
, aria-grabbed
, aria-hidden
, aria-invalid
, aria-pressed
.
Dica: Veja como testar o exemplo em Como testar o seu código.
Documento: button.html.
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Papel Button</title> <link rel="stylesheet" type="text/css" href="estilo.css"> <script type="text/javascript" src="../libs/jquery.js"> </script> <script type="text/javascript" src="script.js"> </script> </head> <body> <h1>Papel <span lang="en">Button</span></h1> <p>O relevo do Paraná é formado por planaltos e planícies. Os planaltos ocupam a maior parte do território paranaense. As principais bacias hidrográficas do Paraná são: a bacia do <span id="botao" role="button" tabindex="0">rio Paraná</span>, no oeste, a bacia do rio Paranapanema no norte, a bacia do rio Iguaçu no sul e as bacias do Atlântico Sudeste e do Atlântico sul no leste.</p> </body> </html>
Folha de estilo: estilo.css.
#botao { box-shadow: 0px 10px 14px -7px #276873; background-color:#599bb3; border-radius:8px; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:20px; font-weight:bold; padding:13px 32px; text-decoration:none; text-shadow:0px 1px 0px #3d768a; } #botao:hover { background-color:#408c99; } #botao:active { position:relative; top:1px; }
Script: script.js.
/*arquivo JavaScrip do Button*/ $(function() { $("#botao").click(function() { alert("Ação realizada a partir de um clique de mouse ou quando pressionadas as teclas ENTER ou barra de espaço."); }); $("#botao").keypress(function() { var evtobj=window.event? event : e; //IE's event (window.event) ou Firefox's implícito. var unicode=evtobj.charCode? evtobj.charCode : evtobj.keyCode; if (unicode==13 || unicode==32) $("#botao").click(); }); });