Hoje abordaremos um assunto importante, acessibilidade em formulários.
O que é acessibilidade segundo a W3C.
Link para referência http://www.w3.org/WAI/intro/accessibility.php
No site maujor temos acesso a este mesmo material em português.
Link para referência http://www.maujor.com/w3c/introwac.html
Segundo Nick Rigby criador desta técnica a vantagem de utilizarmos um formulário projetado desta forma. É a flexibilidade que ganhamos, podendo usar ele em vários projetos, mudando apenas a formatação, utilizando uma que se encaixe no layout do seu projeto.
A parte mais importante do nosso formulário é o html, para a construção dele usaremos as seguintes tags:
<fieldset>
<label>
<legend>
<ol>
<li>
<em>
Se você nunca utilizou estas tags, aconselho a ler a documentação da W3Schools.
Link para referência http://www.w3schools.com/tags/default.asp
Abaixo o nosso HTML 4.01 / XHTML 1.0.
<head> <script src="lib/jquery-1.2.3.js" type="text/javascript"></script> <script src="lib/cmxforms.js" type="text/javascript"></script> <link rel="stylesheet" href="css/screen.css" media="screen" type="text/css"> </head> <form class="cmxform" action="#"> Campos de preenchimento obrigatório. Contém<em>*</em> <fieldset> <legend>Acessibilidade em Formulário</legend> <ol> <li> <label for="name">Nome<em>*</em></label> <input id="name" type="text" /></li> <li> <label for="age">Idade<em>*</em></label> <input id="age" type="text" /></li> <li> <label for="height">Altura<em>*</em></label> <input id="height" type="text" /></li> <li> <label for="weight">Peso<em>*</em></label> <input id="weight" type="text" /></li> <li> <label for="email">E-mail<em>*</em></label> <input id="email" type="text" /></li> <li> <fieldset> <legend>Aceita os termos de responsabilidade?<em>*</em></legend> <label> <input name="condition" type="radio" value="yes" /> Sim</label> <label> <input name="condition" type="radio" value="no" /> Não</label> </fieldset></li> </ol> </fieldset> <fieldset> <legend>Outras informações</legend> <ol> <li> <label for="dob">Data do aniversário <span class="sr">(Dia)</span><em>*</em> </label> <select id="dob"> <option value="1">1</option> <option value="2">2</option> </select> <label class="sr" for="dob-m">Data do aniversário (Mês) <em>*</em> </label> <select id="dob-m"> <option value="1">Jan</option> <option value="2">Feb</option> </select> <label class="sr" for="dob-y">Data do aniversário (Ano) <em>*</em> </label> <select id="dob-y"> <option value="1984">1984</option> <option value="1985">1985</option> </select> </li> <li> <label for="sex">Sexo <em>*</em></label> <select id="sex"> <option value="female">Feminino</option> <option value="male">Masculino</option> </select> </li> <li> <fieldset> <legend>Qual esporte você prática?</legend> <label for="football"> <input id="football" type="checkbox" /> Futebol</label> <label for="golf"> <input id="golf" type="checkbox" /> Golfe</label> <label for="volley"> <input id="volley" type="checkbox" /> Vôlei</label> <label for="tennis"> <input id="tennis" type="checkbox" /> Tênis</label> <label for="basketball"> <input id="basketball" type="checkbox" /> Basquete</label> <label for="boxing"> <input id="boxing" type="checkbox" /> Boxe</label> </fieldset> </li> <li> <label for="comments">Comentário</label> <textarea id="comments" cols="25" rows="7"></textarea></li> </ol> </fieldset> </form>
Abaixo nosso screen.css com os imports.
@import "reset.css"; @import "core.css"; @import "cmxTpl.css"; @import "cmxform.css";
Não irei postar todos arquivos css para não tornar o post muito extenso.
Para o funcionamento do nosso formulário, trabalharemos com a biblioteca javascript jQuery.
Link para download jQuery
Para contornar o bug de navegadores da fundação mozilla, que não interpretam corretamente a propriedade do css display:inline utilizaremos um script para atribuir o valor display: -moz-inline-box as tags <label>
Nosso cmxforms.js
// apply inline-box only for mozilla if( jQuery.browser.mozilla ) { // do when DOM is ready $( function() { // search form, hide it, search labels to modify, filter classes nocmx and error $( 'form.cmxform' ).hide().find( 'li>label:not(.nocmx):not(.error)' ).each( function() { var $this = $(this); var labelContent = $this.html(); var labelWidth = document.defaultView.getComputedStyle( this, '' ).getPropertyValue( 'width' ); // create block element with width of label var labelSpan = $("<span>") .css("display", "block") .width(labelWidth) .html(labelContent); // change display to mozilla specific inline-box $this.css("display", "-moz-inline-box") // remove children .empty() // add span element .append(labelSpan); // show form again }).end().show(); }); };
Mesmo script utilizado no Bassitance mudei apenas a regra seletora li>label:not(.nocmx):not(.error)
Navegadores testados:
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
Recent Comments