prima trasformazione

Codice di output dello script originario, come visibile nell’esempio online:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="it">
<HEAD>
<TITLE>bbs</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<p><a href="http://bobby.watchfire.com/bobby/bobbyServlet?URL=http://www.protty.net/bbs_source.php" class="external">Bobby</a>
| La trasformazione di pagine dinamiche, WA </p>
<p>
<H1>BBS</H1>
<H2>il codice nella versione originaria</H2>
<UL>
<LI>(2003-02-15 16:47:29) <A HREF="bbs_source.php?messageID=2">codice originario</A><BR>
<UL>
</UL>
</UL>
<FORM ACTION="bbs_source.php" METHOD="post">
<INPUT TYPE="hidden" NAME="inputParent" VALUE="0"><INPUT TYPE="hidden" NAME="ACTION" VALUE="POST"><TABLE BORDER="1" CELLSPACING="0" CELLPADDING="5" WIDTH="400">
<TR><TD WIDTH="100"><B>Oggetto</B></TD><TD WIDTH="300"><INPUT TYPE="text" NAME="inputTitle" SIZE="35" MAXLENGTH"64" VALUE=""></TD></TR>
<TR><TD WIDTH="100"><B>Poster</B></TD><TD WIDTH="300"><INPUT TYPE="text" NAME="inputPoster" SIZE="35" MAXLENGTH"64"></TD></TR>
<TR><TD COLSPAN="2" WIDTH="400"><TEXTAREA NAME="inputBody" COLS="45" ROWS="5"></TEXTAREA></TD></TR>
<TR><TD COLSPAN="2" WIDTH="400"><CENTER><INPUT TYPE="submit" VALUE="Post"></CENTER></TD></TR>
</TABLE>
</FORM>
</p>
<p>&nbsp;</p>
<p>script di Leon Atkinson</p>
</BODY>
</HTML>


I valori delle larghezze sono in pixel. Dobbiamo intervenire nel sorgente per generare in output valori in percentuale.

Ecco le linee da modificare, tratte dal sorgente originario:

function postForm($parentID, $useTitle)
{
printf( "<FORM ACTION="bbs_source.php" METHOD="post">n");
printf( "<INPUT TYPE="hidden" NAME="inputParent" VALUE="$parentID">");
printf( "<INPUT TYPE="hidden" NAME="ACTION" VALUE="POST">");
printf( "<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="5" WIDTH="400">n");
printf( "<TR><TD WIDTH="100"><B>Oggetto</B></TD>");
printf( "<TD WIDTH="300"><INPUT TYPE="text" NAME="inputTitle" SIZE="35" MAXLENGTH"64" VALUE="$useTitle"></TD></TR>n");
printf( "<TR><TD WIDTH="100"><B>Poster</B></TD>");
printf( "<TD WIDTH="300"><INPUT TYPE="text" NAME="inputPoster" SIZE="35" MAXLENGTH"64"></TD></TR>n");
printf( "<TR><TD COLSPAN="2" WIDTH="400">");
printf( "<TEXTAREA NAME="inputBody" COLS="45" ROWS="5"></TEXTAREA></TD></TR>n");
printf( "<TR><TD COLSPAN="2" WIDTH="400"><CENTER><INPUT TYPE="submit" VALUE="Post"></CENTER></TD></TR>n");
printf( "</TABLE>n");
printf( "</FORM>n");
}


Ecco le stesse linee corrette (tolte le misure di “width”):

function postForm($parentID, $useTitle)
{
printf("<FORM ACTION="bbs.php" METHOD="post">n");
printf("<INPUT TYPE="hidden" NAME="inputParent" VALUE="$parentID">");
printf("<INPUT TYPE="hidden" NAME="ACTION" VALUE="POST">");
printf("<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="5" >n");
printf("<TR><TD><B>Oggetto</B></TD>");
printf("<TD><INPUT TYPE="text" NAME="inputTitle" SIZE="35" VALUE="$useTitle"></TD></TR>n");
printf("<TR><TD><B>Poster</B></TD>");
printf("<TD><INPUT TYPE="text" NAME="inputPoster" SIZE="35" ></TD></TR>n");
printf("<TR><TD></td>");
printf("<td><TEXTAREA NAME="inputBody" COLS="45" ROWS="5"></TEXTAREA></TD></TR>n");
printf("<TR><TD COLSPAN="2"><CENTER><INPUT TYPE="submit" VALUE="Post"></CENTER></TD></TR>n");
printf("</TABLE>n");
printf("</FORM>n");
}


Proviamo a validare la pagina, otteniamo il seguente risultato:

Priority 2 Accessibility errors found:

  • Explicitly associate form controls and their labels with the LABEL element. (3 instances) >>> seconda trasformazione
    Lines 18, 19, 20

Priority 3 accessibility errors found:

  • Provide a summary for tables. (1 instance) >>> terza trasformazione
    Line 17
  • Include default, place-holding characters in edit boxes and text areas. (3 instances) >>> quarta trasformazione
    Lines 18, 19, 20

Visualizza l’esempio online dopo la prima trasformazione (è disponibile un link a Bobby, cliccalo per verificare l’eliminazione del primo problema ;-).

Il primo problema priorità 2 è stato risolto. Restano 3 errori. >>> continua con la seconda trasformazione

Condividi:

Roberto Ellero

Web consultant, Videomaker, Web Designer. Expertise in accessibility, Web standards, movies designed for the Web and accessible to deaf and blind people (captioning, interpretation in sign language, audiodescription).
Videomaker, Web Designer. Competenze specialistiche in accessibilità, Web standard, video progettati per il Web accessibili alle persone sorde e non vedenti (contenuti audiovisivi, tecnologie, sottotitolazione, interpretazione in lingua dei segni, audiodescrizione).
email: info@robertoellero.it, mobile: 3480108848, skype: rellero
Ideatore e direttore artistico di www.webmultimediale.org, il portale della Svizzera italiana per l'accessibilità dei video sul Web.
Lavora presso il Centro Regionale di Cultura della Regione del Veneto.