- docs.argus
- accessibilitat
- Formularis accessibles? (i II)
Formularis accessibles? (i II)
Utilitza una etiqueta (<label>) i 'Seràs Accessible!'
Sens dubte, una de les etiquetes més útils per a l'accessibilitat d'un formulari és l'etiqueta <label>.
Com es comporta el label?
Prenem el següent exemple:
<label for="idNom">Nom</label><br />
<input type="text" name="nom" id="idNom" size="20"/>
El label crea un lligam entre el text que hi ha dins l'etiqueta i l'input relacionat amb ella.
Recorda, els Ids, han de ser únics! No pot haver dos elements en la mateixa pàgina amb el mateix identificador (id).
Un altre dels beneficis d'utilitzar l'element <label> és que alguns navegadors et permetran clicar en el text contingut a l'element . Això és utilitzat pels checkboxes i radio buttons que tenen una àrea molt petita.
On puc utilitzar el Label ?
L'element <label> pot utilitzar-se en quasi tots els elements d'un formulari, excepte en els botons (no és necessari cap text extern).
A continuació farem una taula dels elements d'un formulari:
| Elements del formulari: | El codi és: |
|---|---|
| | <label for="txtFirstName">Nom:</label> |
| Edat: |
|
| Quins colors t'agraden: | Quins colors t'agraden:<br /> |
| | <label for="txtLifeStory">La història de la teva vida:</label> <br /> <textarea title="Escriu la història de la teva vida aquí" name="txtLifeStory" id="txtLifeStory" rows="5" cols="25"></textarea> |
| | < for="ddlTown">Municipi Favorit:</label> <br/> <select id="ddlTown" title="Si us plau, escull el teu municipi favorit" name="ddlTown"> <option value="" selected="selected">Selecciona ...</option> <option value="Barcelona">Barcelona</option> <option value="London">London</option> <option value="Alcanar">Alcanar</option> </select> |
Agrupar elements
L'element Fieldset
Segons la complexitat del formulari, a vegades hi ha la necessitat d'agrupar els diferents camps per temàtica, d'aquesta manera facilitarem la llegibilitat a l'usuari. Utilitzarem l'etiqueta <fieldset> (conjunt de camps) per aquesta finalitat.
Amb això s'augmentarà l'usabilitat/accessibilitat de la pàgina, facilitant la lectura als usuaris amb problemes visuals o dificultats cognitives.
Un exemple de Fieldset (relacionat amb el títol legend -que és el text descriptiu que sortirà a dalt de la caixa- 'Radio Buttons' en aquest exemple):
El codi a escriure és el següent:
<fieldset>
<legend>Radio buttons</legend>
<input type="radio" title="Escull entre una de les opcions" name="rad" id="rad1" value="Opció 0" />
<label for="radAge4_0"> Opció 0</label>
<br />
<input type="radio" title="Escull entre una de les opcions" name="rad" id="rad2" value="Opció 1" />
<label for="radAge4_1"> Opció 1</label>
...
</fieldset>
Es pot donar estil al fieldset com a qualsevol element HTML utilitzant el CSS, tal i com mostra la imatge següent:
L'element Optgroup
Igual que agrupem lògicament els elements del formualri, també es pot utilitzar l'element <optgroup> per agrupar opcions utilitzades en l'element <select>. Mirem el codi:
<select name="menjarfavorit">
<optgroup label="Productes diaris">
<option>Formatge</option>
<option>Ous</option>
</optgroup>
<optgroup label="Verdures">
<option>Col</option>
<option>Enciam</option>
<option>Pessols</option>
<option>Cebes</option>
</optgroup>
<optgroup label="Fruïta">
<option>Pomes</option>
<option>Taronges</option>
<option>Pinya</option>
</optgroup>
</select>
Com pots veure en aquest exemple, la llista està agrupada per tipus de menjar.
Important: No confondre's entre l'element <label> i l'atribut label (que només s'utilitza en els elements <optgroup>
Més informació
Els nostres projectes web, siguin claus en mà o associats a algun punt del cicle de vida, són necessàriament usables, accessibles doble A, com per exemple Dona Badalona o l'Ajuntament de Lliçà d'Amunt, i utilitzen els estàndards XHTML i CSS per a l'estructuració i organització de la informació i per a la seva presentació visual. A més, la seva producció se sosté en la nostra plataforma tecnològica 100% java i 100% web, eGestió, i el seu avançat mòdul de creació, gestió i manteniment de sites, eGestió CMS.
per MARTA MARTÍNEZ i RAMON GIL
14 de FEBRER 2006
argus.net
email.argus
accés directe a la teva bustia de correu
