-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathaccessibility-report.html
103 lines (86 loc) · 25.5 KB
/
accessibility-report.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html> <html lang="pt"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Checklist de Acessibilidade - SAPO UX</title> <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="shortcut icon" href="//assets.web.sapo.io/sapologos/favicon/generic/favicon.ico" type="image/x-icon"> <link rel="icon" sizes="192x192" href="//assets.web.sapo.io/sapologos/touchicon/generic/touch-icon-192.png"> <link rel="icon" sizes="128x128" href="//assets.web.sapo.io/sapologos/touchicon/generic/touch-icon-128.png"> <link rel="apple-touch-icon" href="//assets.web.sapo.io/sapologos/touchicon/generic/touch-icon-60.png"> <link rel="apple-touch-icon" sizes="76x76" href="//assets.web.sapo.io/sapologos/touchicon/generic/touch-icon-76.png"> <link rel="apple-touch-icon" sizes="120x120" href="//assets.web.sapo.io/sapologos/touchicon/generic/touch-icon-120.png"> <link rel="apple-touch-icon" sizes="152x152" href="//assets.web.sapo.io/sapologos/touchicon/generic/touch-icon-152.png"> <meta name="mobile-web-app-capable" content="yes"> <link rel="stylesheet" type="text/css" href="/css/ink.min.css"> <link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="/css/sapo-ux.css"> <style>#bsu-placeholder {height:60px;position:relative;}</style> <!--[if lt IE 9 ]> <link rel="stylesheet" href="/css/ink-ie.min.css" type="text/css" media="screen" charset="utf-8"> <script type="text/javascript" src="/js/html5shiv.js"></script> <![endif]--> <link rel="pingback" href="/xmlrpc.php"> <meta name="description" content="A checklist de acessibilidade permite verificar se o seu website cumpre as regras de acessibilidade da WCAG"/> <link rel="canonical" href="https://ux.sapo.pt/checklists/acessibilidade/"/> <meta property="og:locale" content="pt_PT"/> <meta property="og:type" content="article"/> <meta property="og:title" content="Checklist de Acessibilidade - SAPO UX"/> <meta property="og:description" content="A checklist de acessibilidade permite verificar se o seu website cumpre as regras de acessibilidade da WCAG"/> <meta property="og:url" content="https://ux.sapo.pt/checklists/acessibilidade/"/> <meta property="og:site_name" content="SAPO UX"/> <meta property="og:image" content="http://ux.sapo.pt/img/fb.png"/> <meta name="twitter:card" content="summary"/> <meta name="twitter:description" content="A checklist de acessibilidade permite verificar se o seu website cumpre as regras de acessibilidade da WCAG"/> <meta name="twitter:title" content="Checklist de Acessibilidade - SAPO UX"/> <meta name="twitter:site" content="@sapo_ux"/> <meta name="twitter:image" content="http://ux.sapo.pt/img/fb.png"/> <meta name="twitter:creator" content="@sapo_ux"/> <link rel='dns-prefetch' href="//s.w.org/"/> <link rel="alternate" type="application/rss+xml" title="Feed de comentários de SAPO UX » Acessibilidade" href="feed/"/> <script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/ux.sapo.pt\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.1.15"}};
!function(e,a,t){var n,r,o,i=a.createElement("canvas"),p=i.getContext&&i.getContext("2d");function s(e,t){var a=String.fromCharCode;p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,e),0,0);e=i.toDataURL();return p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,t),0,0),e===i.toDataURL()}function c(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(o=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},r=0;r<o.length;r++)t.supports[o[r]]=function(e){if(!p||!p.fillText)return!1;switch(p.textBaseline="top",p.font="600 32px Arial",e){case"flag":return s([55356,56826,55356,56819],[55356,56826,8203,55356,56819])?!1:!s([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]);case"emoji":return!s([55358,56760,9792,65039],[55358,56760,8203,9792,65039])}return!1}(o[r]),t.supports.everything=t.supports.everything&&t.supports[o[r]],"flag"!==o[r]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[o[r]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(n=t.source||{}).concatemoji?c(n.concatemoji):n.wpemoji&&n.twemoji&&(c(n.twemoji),c(n.wpemoji)))}(window,document,window._wpemojiSettings);
</script> <style type="text/css"> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 .07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link rel='stylesheet' id='wp-block-library-css' href="/wp-includes/css/dist/block-library/style.min.css?ver=5.1.15" type='text/css' media='all'/> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="/xmlrpc.php?rsd"/> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="/wp-includes/wlwmanifest.xml"/> <link rel='shortlink' href="/?p=46"/> <link rel="alternate" type="application/json+oembed" href="/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fux.sapo.pt%2Fchecklists%2Facessibilidade%2F"/> <link rel="alternate" type="text/xml+oembed" href="/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fux.sapo.pt%2Fchecklists%2Facessibilidade%2F&format=xml"/> </head> <body class="checklists ink-drawer"> <div class="a11y"> <a href="#contents">Saltar para os conteúdos</a> </div> <!--[if lt IE 9 ]> <div class="ink-alert basic alert warning"> <button class="ink-dismiss">×</button> <p> <span class="fa fa-warning fa-3x push-left right-space"></span> <strong>Detetámos que está a usar uma versão desatualizada do Internet Explorer.</strong><br /> Por favor <a href="http://browsehappy.com/">atualize ou mude de browser</a> para melhorar a sua experiência de navegação. </p> </div> <![endif]--> <div class="content-drawer"> <div class="ink-grid"> <div id="bsu-placeholder"></div> </div> <header class="main-header" role="banner"> <div class="ink-grid"> <a class="left-drawer-trigger push-left hide-all show-tiny show-small show-medium fa fa-bars" tabindex="-1" href="#"> MENU</a> <h1><a href="/" data-trackerlink="logo|header|header">SAPO UX</a></h1> <div class="social"> <ul class="unstyled inline"> </ul> </div> </div> <nav class="navigation ink-navigation ink-sticky hide-tiny hide-small hide-medium" role="navigation"> <div class="ink-grid"> <ul class="menu horizontal main-menu"> <li><a class="fa fa-home" href="/" data-trackerlink="nav|header|mainmenu"><span class="hide-text">Início</span></a></li> <li><a href="/usabilidade/" data-trackerlink="nav|header|mainmenu">Usabilidade</a></li> <li><a href="/acessibilidade/" data-trackerlink="nav|header|mainmenu">Acessibilidade</a></li> <li><a href="/seo/" lang="en" title="Search Engine Optimization" data-trackerlink="nav|header|mainmenu">SEO</a></li> <li class="active"><a href="../" lang="en" data-trackerlink="nav|header|mainmenu">Checklists</a></li> </ul> <form action="/" method="get" class="ink-form" id="search_form" role="search"> <label class="hide-text" for="search_input">Pesquisar no <span lang="en">site</span></label> <input type="search" required name="s" id="search_input" placeholder="Pesquisar"/> <button class="fa fa-search" type="submit"><span class="hide-text">Pesquisar</span></button> </form> </div> </nav> </header> <div class="ink-grid main-content"> <div class="column-group gutters"> <div class="hide-tiny hide-small hide-medium all-20"> <nav class="ink-navigation ink-sticky" data-offset-top="80" data-bottom-element=".main-footer"> <ul class="menu vertical sidebar small" role="directory"> <li class="page_item page-item-43"><a href="../usabilidade/">Usabilidade (Web)<span class="fa fa-chevron-right push-right"></span></a></li> <li class="page_item page-item-1513"><a href="../usabilidade-mobile/">Usabilidade (Mobile)<span class="fa fa-chevron-right push-right"></span></a></li> <li class="page_item page-item-46 current_page_item"><a href="./" aria-current="page">Acessibilidade<span class="fa fa-chevron-right push-right"></span></a></li> <li class="page_item page-item-48"><a href="../seo/">SEO<span class="fa fa-chevron-right push-right"></span></a></li> </ul> </nav> </div> <div class="all-100 large-80 xlarge-80" role="main" id="contents" tabindex="0"> <article itemscope itemtype="http://schema.org/Article"> <header class="clearfix"> <h1 itemprop="name" class="push-left slab-400"><span class="pre-title"><span lang="en">Checklist</span> de pontos de verificação de:</span> Acessibilidade</h1> </header> <div class="intro"> <p>A checklist de acessibilidade consiste num conjunto de pontos de verificação que podem ser feitos em qualquer altura, quer seja na fase de desenvolvimento do seu website, quer seja numa optimização para melhorar a acessibilidade num site já existente.</p> <p>A maior parte dos pontos são relativos a pequenas mudanças no HTML, pelo que não terão grande impacto visual na aparência do seu site. Apenas os temas relacionados com cores, contrastes e aumento das áreas clicáveis poderão implicar algumas alterações visuais.</p> </div> <div class="checklist-items"> <form id="myf"> <h2>Elementos não textuais</h2> <p><label><input type="checkbox"/> <span><strong>Todas as imagens têm um texto alternativo (alt)</strong><br/> Todas as imagens devem ter o atributo "alt". O texto alternativo deve ser usado sempre que a imagem transmite algo relevante para o conteúdo. O texto deve ser breve e percetível. Nas imagens que não adicionam informação relevante (ex: imagem de uma bola de futebol num artigo sobre futebol), o atributo "alt" tem de existir na mesma, mas neste caso deve estar vazio, ex: alt="".</span></label></p> <p><label><input type="checkbox"/> <span><strong>Os itens não textuais têm uma versão alternativa em texto</strong><br/> Todas as imagens, ilustrações, ou outros elementos não textuais devem ter uma forma de poderem ser lidos. Isto pode ser feito através do atributo "alt" nas imagens, mas também através de outras técnicas que permitam sempre mostrar uma versão alternativa do mesmo conteúdo.</span></label></p> <p><label><input type="checkbox"/> <span><strong>Não são usadas imagens que contêm blocos de texto</strong><br/> Nunca devem ser usadas imagens para mostrar blocos de texto. Todos os blocos de texto devem estar no formato texto e nunca dentro de uma imagem. Isto não só aumenta em várias vezes o peso da página, como torna esse conteúdo invisível para quem precisa de usar tecnologias assistivas.</span></label></p> <h2>Formulários</h2> <p><label><input type="checkbox"/> <span><strong>Todos os campos dos formulários têm uma <label> associada</strong><br/> Todos os campos de preenchimento (input, select, textarea, etc) têm de ter uma label associada. As labels permitem que o título do campo seja clicável, aumentando a zona clicável nas checkboxes e radio-buttons e facilitando a leitura do formulário por tecnologias assistivas (ex: screen-reader) Para associar uma label a um campo, basta corresponder o atributo "for" da label com o "id" do input, ex:<br/><label for="nome">Nome: </label><input id="nome" type="text" /> ou<br/><label>Nome: <input id="nome" type="text" /></label></span></label></p> <p><label><input type="checkbox"/> <span><strong>São usados <fieldset> e <legend> para agrupar os vários campos nos formulários</strong><br/> Devem ser usados fieldsets para criar grupos de campos e organizar melhor os formulários. Cada grupo pode (e deve) ter um título, através da tag <legend>.</span></label></p> <p><label><input type="checkbox"/> <span><strong>O envio dos formulários é feito via input/button e não através de links e JavaScript</strong><br/> Todos os formulários devem funcionar nativamente, ou seja, através do botão de submit. Os formulários nunca podem depender exclusivamente de JavaScript para funcionar.</span></label></p> <p><label><input type="checkbox"/> <span><strong>Os erros nos formulários são indicados em texto e junto do campo que contém o erro</strong><br/> As mensagens de erro devem estar indicadas junto aos campos que contêm o erro e não apenas no topo ou no final do formulário. Isto permite contextualizar melhor os erros e ajuda a perceber onde é que os utilizadores têm de os corrigir.</span></label></p> <h2>Uso da cor e elementos que piscam</h2> <p><label><input type="checkbox"/> <span><strong>Não é usada apenas a cor para transmitir informação</strong><br/> Nunca se deve usar apenas a cor para transmitir alguma informação. Juntamente com a cor, devem ser usados outros elementos que possam transmitir a informação pretendida. por exemplo, nas mensagens de erro, não usar a penas o vermelho. A cor deve ser acompanhada de um ícone ou outro elemento que permita reconhecer que tipo de mensagem é.</span></label></p> <p><label><input type="checkbox"/> <span><strong>Não há elementos que piscam ou mudam de cores repetidamente</strong><br/> Não usar elementos que façam a página piscar ou mudar de cor em frequências superiores a 2Hz e inferiores a 55Hz (1Hz = 1 rotação/oscilação/imagem por segundo) Cinco por cento dos epiléticos são foto-sensíveis e podem ter ataques causados por determinadas frequências de elementos a piscar.</span></label></p> <h2>Navegação</h2> <p><label><input type="checkbox"/> <span><strong>São fornecidos atalhos para saltar links repetitivos</strong><br/> No topo das páginas deve haver um link (que pode estar escondido) que permita saltar diretamente para os conteúdos, de modo a que os utilizadores que precisem de tecnologia assistiva (ex: screen readers) não tenham que navegar por todos os links dos menus até chegarem finalmente ao conteúdo, em todas as páginas.</span></label></p> <p><label><input type="checkbox"/> <span><strong>O <title> das páginas é claro, direto e percetível e está intimamente relacionado com o conteúdo da mesma</strong><br/> Os títulos são usados pelos motores de busca para identificar as páginas. Se houver mais do que uma página com o mesmo título as mesmas não podem ser diferenciadas uma da outra pelos utilizadores ou pela funcionalidade de Favoritos do browser. Se o utilizador adiciona uma página aos favoritos, ele não deve ter que adicionar ou alterar o título da página manualmente.<br/> Para evitar confusões, o título da página deve ser semelhante ao título dos conteúdos existentes na página.</span></label></p> <p><label><input type="checkbox"/> <span><strong>O site é navegável usando apenas o teclado</strong><br/> A navegação com o teclado é um ponto bastante importante na acessibilidade de um website. Desta forma, não deve ser removido o outline dos links no efeito :hover. Adicionalmente, deve-se duplicar todos os efeitos do :hover também para o :focus.</span></label></p> <h2>Semântica e Legibilidade</h2> <p><label><input type="checkbox"/> <span><strong>O conteúdo está estruturado de forma semântica</strong><br/> O uso de cabeçalhos (<h1>, <h2>, <h3>, ...), parágrafos (<p>) e listas (<ul>, <ol>) serve para estruturar os conteúdos na página de forma semântica e dão significado ao texto. Permite criar um nível hierárquico entre os conteúdos e que faz sentido quando lido sem estilos (CSS). A forma como os conteúdos são apresentados deve seguir uma hierarquia direta desde o item mais importante até ao item menos importante. Não podem ser saltados níveis hierárquicos.</span></label></p> <p><label><input type="checkbox"/> <span><strong>O idioma da página está indicado no HTML </strong><br/> Os screen-readers necessitam de saber em que linguagem está escrita a página para adaptarem a forma como vão ler os conteúdos. Por exemplo, se a página estiver em português e não for definido o idioma no HTML, o screen-reader vai usar um leitor inglês para ler texto em português, tornando-o impercetível. Isto é tão simples como adicionar o atributo lang="pt-PT" à tag <html></span></label></p> <p><label><input type="checkbox"/> <span><strong>As tabelas têm headings <th> definidos</strong><br/> Devem ser usados cabeçalhos de linha ou de coluna para identificar claramente os conteúdos de uma tabela. Ao usar estes cabeçalhos torna-se mais fácil perceber quais são os títulos das linhas ou colunas e ajuda a perceber melhor a informação.<br/> Para os utilizadores com screen-readers, estes cabeçalhos ajudam a adequar a forma como o texto irá ser lido (ex: título » dados) em vez de ler a tabela indiscriminadamente de esquerda para a direita ou de cima para baixo.</span></label></p> <p><label><input type="checkbox"/> <span><strong>O site funciona com as imagens desativadas</strong><br/> Ao desativar as imagens no browser, o site deve poder continuar a ser navegável e lido sem problemas.</span></label></p> <p><label><input type="checkbox"/> <span><strong>O site é legível e navegável com o CSS desativado</strong><br/> Ao desativar o CSS, devemos poder continuar a navegar e a ler os conteúdos do site sem problemas</span></label></p> <p><label><input type="checkbox"/> <span><strong>O site é legível aumentando o texto 2 vezes</strong><br/> Ao aumentar o texto em pelo menos 2x o site não deverá partir (os textos devem continuar a ser legíveis, e os menus navegáveis).</span></label></p> </form> </div> <div id="out"></div> <footer> <div class="all-50 small-100 tiny-100"> <ul class="sharing-links small unstyled"> <li class="share-fb"> <a data-trackerlink="share|article|facebook" href="//www.facebook.com/sharer/sharer.php?u=https://ux.sapo.pt/checklists/acessibilidade/&t=Checklist de Acessibilidade - SAPO UX" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" title="Partilhar no Facebook"><span class="fa fa-facebook"></span> Partilhar</a> </li> <li class="share-twitter"> <a data-trackerlink="share|article|twitter" href="//twitter.com/share?url=https://ux.sapo.pt/checklists/acessibilidade/&via=sapo_ux&text=Checklist de Acessibilidade - SAPO UX" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" title="Partilhar no Twitter"><span class="fa fa-twitter"></span> Twitar</a> </li> <li class="share-gplus"> <a data-trackerlink="share|article|gplus" href="//plus.google.com/share?url=https://ux.sapo.pt/checklists/acessibilidade/" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=350,width=500');return false;" target="_blank" title="Partilhar no Google+"><span class="fa fa-google-plus"></span> +1</a> </li> </ul> </div> </footer> </article> </div> </div> </div> </div> <div class="left-drawer"> <nav class="ink-navigation"> <ul class="menu vertical"> <li><a href="/" data-trackerlink="nav|mobile|mainmenu"><span class="fa fa-home"></span> Início</a></li> <li><a href="/usabilidade/" data-trackerlink="nav|mobile|mainmenu">Usabilidade</a> </li> <li><a href="/acessibilidade/" data-trackerlink="nav|mobile|mainmenu">Acessibilidade</a> </li> <li><a href="/seo/" lang="en" title="Search Engine Optimization" data-trackerlink="nav|mobile|mainmenu">SEO</a> </li> </li> <li class="active"><a href="../" lang="en" data-trackerlink="nav|mobile|mainmenu">Checklists</a> <ul> <li class="page_item page-item-43"><a href="../usabilidade/">Usabilidade (Web)<span class="fa fa-chevron-right push-right"></span></a></li> <li class="page_item page-item-1513"><a href="../usabilidade-mobile/">Usabilidade (Mobile)<span class="fa fa-chevron-right push-right"></span></a></li> <li class="page_item page-item-46 current_page_item"><a href="./" aria-current="page">Acessibilidade<span class="fa fa-chevron-right push-right"></span></a></li> <li class="page_item page-item-48"><a href="../seo/">SEO<span class="fa fa-chevron-right push-right"></span></a></li> </ul> </li> </ul> </nav> <form action="/" method="get" class="ink-form" id="search_form_sidebar"> <label class="hide-text" for="search_input_sidebar">Pesquisar no <span lang="en">site</span></label> <input type="search" required name="s" id="search_input_sidebar" placeholder="Pesquisar"/> <button class="fa fa-search" type="submit"><span class="hide-text">Pesquisar</span></button> </form> </div> <footer class="main-footer clearfix fw-300" role="contentinfo"> <div class="ink-grid"> <ul class="unstyled inline small" id="bsu-footer-links" data-trackerlink="nav|footer|footer"> </ul> <div id="bsu-footer" class="bsu-footer-light"></div> </div> </footer> <script type="text/javascript" src="/js/ink-all.min.js"></script> <script type="text/javascript" src="/js/autoload.min.js"></script> <script>
Ink.requireModules(['Ink.UI.Drawer_1'], function (Drawer) {
new Drawer();
});
</script> <script async id="bsuScript" src="//js.sapo.pt/Projects/bsuv3/js/bsuv3.min.js" data-country="pt" data-social-facebook="https://facebook.com/sapo" data-social-twitter="https://twitter.com/sapo" data-social-instagram="https://instagram.com/sapo"></script> <script type="text/javascript" src="//js.sapo.pt/SAPOWebAnalytics/"></script> <script>
SAPO.WebAnalytics.track({
swakt:"29bbd1aa-2c84-4efc-b1de-2474c16249a0"
});
SAPO.WebAnalytics.registerClick();
</script> <script type="text/javascript">
(function(){
function getCheck(formId) {
if(!formId) {
alert('no form id');
return;
}
if(typeof(formId) === 'string') {
var formElm = document.getElementById(formId);
} else {
var formElm = formId;
}
if(formElm === null) {
alert('Form not found');
return;
}
if(formElm.elements.length > 0) {
var aElms = formElm.elements;
var curType;
var aCheck = [];
for(var i=0, len=aElms.length; i < len; i++) {
curType = aElms[i].getAttribute('type');
if(curType !== null && curType === 'checkbox') {
aCheck.push(aElms[i]);
}
}
return aCheck;
}
}
function checkChecked(aCheck, callBack) {
var checked = 0;
for(var i=0, len=aCheck.length; i < len; i++) {
if(aCheck[i].checked) {
checked++;
}
}
callBack(checked, aCheck.length);
}
function onClickForm(event) {
var tgt = event.target || event.srcElement || null;
if(tgt !== null && tgt.getAttribute && tgt.getAttribute('type') === 'checkbox') {
checkChecked(aCheckbox, function(totalChecked, totalCheckbox) {
document.getElementById('out').innerHTML = 'A sua pontuação: <strong>'+totalChecked+'/'+totalCheckbox+'</strong>';
if((totalChecked >= 0.8*totalCheckbox) && (totalChecked != totalCheckbox)){
document.getElementById('out').classList.add("almost");
}
else if(totalChecked == totalCheckbox) {
document.getElementById('out').classList.remove("almost");
document.getElementById('out').classList.add("done");
}
else {
document.getElementById('out').classList.remove("done");
document.getElementById('out').classList.remove("almost");
}
});
}
}
var aCheckbox = getCheck('myf');
if(!aCheckbox) {
alert('Checkboxes not found');
return;
}
var formElm = document.getElementById('myf');
if(formElm.addEventListener) {
formElm.addEventListener('click', onClickForm, false);
} else if(formElm.attachEvent) {
formElm.addEventListener('click', onClickForm);
}
// init to write callback
checkChecked(aCheckbox, function(totalChecked, totalCheckbox) {
document.getElementById('out').innerHTML = 'A sua pontuação: <strong>'+totalChecked+'/'+totalCheckbox+'</strong>';
});
})();
</script> </body> </html>