Regiões vivas são regiões percebíveis de uma página web que são normalmente atualizadas como resultados de um eventos externos, enquanto o foco do usuário pode estar em outro lugar. As atualizações em tais regiões não são sempre resultado de uma interação direta do usuário. Este tipo de evento é bastante comum em aplicações que usam AJAX.
Exemplos de Regiões Vivas são: histórico de conversas em um chat, atualização de mensagens em um placar ao vivo de um evento esportivo. Como essas atualizações assíncronas ocorrem em regiões diferentes de onde está o foco do usuário, TA não são informadas sobre os novos conteúdos e, consequentemente, não informam os usuários. As Regiões Vivas provêem condições para que tais regiões possam ser identificadas e monitoradas. Assim atualizações assíncronas podem ser notificadas aos usuários, por meio das TA.
Dica: Veja como testar o exemplo em Como testar o seu código.
Documento: liveregion.html.
<!DOCTYPE html> <html lang="pt-br"> <head> <title>Regiões vivas (Live Regions)</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> <meta charset="utf-8" /> </head> <body aria-hidden="true"> <h1>Regiões vivas (<span lang="en">Live Regions</span>)</h1> <fieldset id="area"> <legend lang="en">Chat</legend> <div class="messageLog"> <ul id="LiveRegion1" aria-live="polite" aria-relevant="additions" aria-atomic="false" aria-busy="false"></ul> </div> </fieldset> <div id="configuracoes"> <fieldset> <legend lang="en">Aria Live</legend> <label for="polite" lang="en"> <input type="radio" name="live" value="polite" id="polite" checked> polite</label><br> <label for="off" lang="en">< input type="radio" name="live" value="off" id="off"> off</label><br> <label for="assertive" lang="en"> <input type="radio" name="live" value="assertive" id="assertive"> assertive</label> </fieldset> <fieldset> <legend lang="en">Aria Relevant</legend> <label for="additions" lang="en"> <input type="radio" name="relevant" value="additions" id="additions" checked> additions</label><br> <label for="text" lang="en"> <input type="radio" name="relevant" value="text" id="text"> text</label><br> <label for="additiontext" lang="en"> <input type="radio" name="relevant" value="addition text" id="additiontext"> addition text</label><br> <label for="all" lang="en"> <input type="radio" name="relevant" value="all" id="all"> all</label> </fieldset> <fieldset> <legend>Intervalo entre mensagens</legend> <label for="intervalo"> <input type="number" name="intervalo" id="intervalo" min="1" max="30" step="1" value="5">segundos</label> </fieldset> <input type="button" value="iniciar exemplo" id="botao"><br> </div> </body> </html>
Folha de estilo: estilo.css.
body { font-family: "Segoe UI", "Arial", "Helvetica", "sans-serif"; font-size: 18px; } #area { position:relative; left:37%; top:29%; width:320px; height:270px; } fieldset { width:320px; padding: 0; margin: 0; } .messageLog { width: 98%; height: 220px; margin-left: 0.1em; overflow: auto; } #area legend {font-size: 2em;} #LiveRegion1 { list-style-type:none; margin: 0; padding: 0.3em; } .chat li{list-style-type: none;} #texto{ position: relative; left: 37%; top: 29%; width: 318px; height: 50px; resize: none; overflow: auto; } #enviar{ position: relative; left: 37%; } #configuracoes{ position: relative; left: 37%; top: 29%; width: 320px; }
Script: script.js.
$(function () { var mensagens = ["oi", "oi, como vai?", "vou bem, e você?", "vou bem também, obrigado!", "você foi bem na prova de física?", "acho que sim, o resultado sai na terça!", "humm, tomara que sim,", "Vamos torcer :)"]; var i = 0; function exibirMensagem() { $("#LiveRegion1").append('<li class="chat"><b>Fulano: </b>' + mensagens[2 * i] + '</li>'); $("#LiveRegion1").append('<li class="chat-b"><b>Beltrano: </b>' + mensagens[2 * i + 1] + '</li>'); i++; if (i == 4) //zerar o contador i = 0; } var myTimer; $('#botao').click(function () { if ($(this).val() == "iniciar exemplo") { $('input:radio[name=live]').attr("disabled","disabled"); $('input:radio[name=relevant]').attr("disabled","disabled"); $('#intervalo').attr("disabled","disabled"); $(this).val("parar"); $('body').attr('aria-hidden', 'false'); myTimer = window.setInterval(exibirMensagem, $('#intervalo').val()*1000); } else { $('input:radio[name=live]').removeAttr("disabled"); $('input:radio[name=relevant]').removeAttr("disabled"); $('#intervalo').removeAttr("disabled"); $(this).val("iniciar exemplo"); $('body').attr('aria-hidden', 'true'); clearInterval(myTimer); } }); $('input:radio[name=live]').click(function () { $('#LiveRegion1').attr("aria-live", $(this).attr("value")); }); $('input:radio[name=relevant]').click(function () { $('#LiveRegion1').attr("aria-relevant", $(this).attr("value")); }); });
Alertas são um tipo de região viva que contém informações importantes e, geralmente, sensíveis ao tempo (eventos). Os alertas são usados para avisar o usuário de algo que ocorreu ou está ocorrendo em um certo momento.
Há dois tipos de alertas, o papel alert
e a sua especialização alertdialog
.
As alerts
são regiões vivas assertivas, dessa maneira criadores de RIA e navegadores Web não necessitam gerenciar o foco para os alertas. Consequentemente, usuários não devem ter que fechar um alerta. A Figura 1 ilustra a aparência comum de alert
.
Já o alertdialog
requer que o foco seja alterado para um elemento dentro do alertdialog
(geralmente um dos botões do diálogo). A apresentação deve ser no estilo modal, ou seja, a navegação deve ficar somente no alertdialog
até que ele seja fechado. Um alertdialog
é composto pela mensagem de alerta e o demais elementos para o diálogo. A Figura 2 ilustra a aparência comum de alertdialog
.
Propriedades para os papeis alert
e alertdialog
: aria-atomic
, aria-controls
, aria-describedat
, aria-describedby
, aria-dropeffect
, aria-flowto
, aria-haspopup
, aria-label
, aria-labelledby
, aria-live
, aria-owns
, aria-relevant
.
Para o papel alertdialog
há ainda uma propriedade adicional: aria-modal
.
Estados para os papeis alert
e alertdialog
: aria-busy
, aria-disabled
, aria-expanded
, aria-grabbed
, aria-hidden
, aria-invalid
.
Dica: Veja como testar o exemplo em Como testar o seu código.
Documento: alert.html.
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Exemplo do Papel Alert</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">Alert</span></h1> <fieldset id="area"> <legend>Formulário</legend> <p>Campos obrigatórios marcados com *.</p> <p role="alert" id="alerta">Falha ao enviar!</p> <label id="descNome">Nome* <input type="text" name="nome" id="nome" placeholder="nome" class="nome" required></label> <label for="sobrenome">Sobrenome* <input type="text" name="sobrenome" id="sobrenome" placeholder="sobrenome" class="sobrenome" required></label> <label for="email">E-mail* <input type="text" name="email" id="email" placeholder="e-mail" class="email" required></label> <label for="senha">Senha* <input type="password" name="senha" id="senha" placeholder="senha" class="senha" required></label> <input id="enviar" type="button" name="submit" value="enviar dados" onkeypress="this.onclick();"> </fieldset> </body> </html>
Folha de estilo: estilo.css.
body { font-family: "Segoe UI", "Arial", "Helvetica", "sans-serif"; font-size: 18px; } #area{ position:relative; left:37%; top:29%; width:320px; height:370px; } fieldset{ width:300px; height:300px; } legend{ font-size: 28px; text-align: center; } label {display: block; margin-bottom: 1em;} input { border: solid rgb(170, 170, 170) 0.1em; } input.nome{ position:absolute; left:115px; width:200px; } input.sobrenome{ position:absolute; left:115px; width:200px; } input.email{ position:absolute; left:115px; width:200px; } input.senha{ position:absolute; left:115px; width:200px; } #descNome{ margin-top: 102px; } #alerta{ position: absolute; display: none; color: red; }
Script: script.js.
/*arquivo JavaScrip do Alert Role*/ $(function() { function isEmail(email) { var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; return regex.test(email); } function setInputStyle(element, type) { if (type == "alert") $(element).css("border","solid #F00 0.1em"); else if (type == "normal") $(element).css("border","solid rgb(170, 170, 170) 0.1em"); } $("#enviar").click(function() { var camposInvalidos = ""; if($("#nome").val() == '') { setInputStyle("#nome","alert"); camposInvalidos = "Por favor insira um nome"; } else setInputStyle("#nome","normal"); if($("#sobrenome").val() == '') { setInputStyle("#sobrenome","alert"); camposInvalidos += camposInvalidos.length == 0 ? "Por favor insira um sobrenome" : ", um sobrenome"; } else setInputStyle("#sobrenome","normal"); if(isEmail($("#email").val()) == false) { setInputStyle("#email","alert"); camposInvalidos += camposInvalidos.length == 0 ? "Por favor insira um email válido" : ", um email válido"; } else setInputStyle("#email","normal"); if($("#senha").val() == '') { setInputStyle("#senha","alert"); camposInvalidos += camposInvalidos.length == 0 ? "Por favor insira uma senha" : ", uma senha"; } else setInputStyle("#senha","normal"); $("#alerta").css("display","block"); if (camposInvalidos.length > 0) { $("#alerta").css("color","#F00"); camposInvalidos += "."; $("#alerta").text(camposInvalidos); } else { $("#alerta").css("color","#0A0"); $("#alerta").text("Dados enviados com sucesso."); } }); });