Botões (Button)

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.

Exemplo: Código com WAI-ARIA

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();
	});
	
});