1 Premessa
Questo tutorial si rifersice alla modifica pagina login.php di questo Blog.
L’intenzione è di
- trasformare la DTD in XHTML strict
- migliorare l’accessibilità della pagina
2 Trasformazione in strict
- Apri il file wp-login.php
- Cerca le righe contenenti il codice
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
- Sostituiscile con le seguenti righe di codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
3 Validazione codice XHTML
la validazione del codice dovrebbe contenere come unico errore la presenza del non necessario attributo name assegnato al tag form. Per ovviare a questo problema:
- Cerca il codice
<form name="loginform" id="loginform" action="wp-login.php" method="post"> - e cancella
name="loginform"
4 Validazione semiautomatica di accessibilità
Il validatore semiautomatico Webxact dovrebbe segnalare due errori:
- Explicitly associate form controls and their labels with the LABEL element.
- Include default, place-holding characters in edit boxes and text areas.
Decidiamo di agire solo sul primo (vedi anche Requisito 14 della Verifica tecnica legata alla Legge Stanca)
5 "Associare in maniera esplicita le etichette ai rispettivi controlli"
- Apri il file wp-login.php
- Cerca le righe contenenti il codice
<p><label><?php _e('Username:') ?><br /><input type="text" name="log" id="log" value="" size="20" tabindex="1" /></label></p>
<p><label><?php _e('Password:') ?><br /> <input type="password" name="pwd" id="pwd" value="" size="20" tabindex="2" /></label></p>
- Sostituiscile con le seguenti righe di codice:
<p><label for="log"><?php _e('Login') ?>:</label><br /><input type="text" name="log" id="log" value="" size="20" tabindex="1" /></p>
<p><label for="pwd"><?php _e('Password') ?>:</label><br /> <input type="password" name="pwd" id="pwd" value="" size="20" tabindex="2" /></p>