javascript accessibile

joey.santiago

javascript accessibile

googleando ho trovato un ottimo articolo sull'utilizzo di javascript non intrusivo per verificare un form. Seguendo alcune semplici linee guida, ho modificato il codice che utilizzavo e credo di aver fatto un buon lavoro, rendendo javascript non fondamentale per registrarsi al mio sito.

la pagina con il form da convalidare rimanda a se stessa, il codice javascript viene importato nell'intestazione e si autoattiva richiamando un paio di funzioni con window.onload . Quel che mi chiedevo è... devo comunque inserire i tag noscript, se voglio passare la validazione di accessibilità AAA (richiesta per passare il mio esame di webdesign II)?

Trovo poi scandaloso che ci siano siti anche molto frequentati che dipendono da javascript e non lo dichiarano nemmeno... provate a consultare una casella di posta di libero senza javascript... nessun avviso, eppure non succede nulla!

hogudo

Se ho capito bene stiamo parlando di wcag 1.0

Bisogna fornire contenuti alternativi per ciò che non è testo
http://www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent
qui ti giochi l'esame col bollino A
http://www.w3.org/TR/WCAG10/
mi sa che ti tocca il controllo con php

Con le 2.0 vedrai che qualcosa cambierà, per la questione di tutta la parte scripts e multimedia.

Ne quem sperare

joey.santiago

il controllo è già tutto gestito col php! il codice javascript mi mette solo il focus sul campo che deve essere compilato.... quindi dovrei essere a posto, no? grazie mille!

tambu

però NOSCRIPT io ce lo metterei ugualmente

joey.santiago

metto un noscript vuoto?

tambu

mhh... in effetti sono stato un po' precipitoso... se fa davvero solo il focus...

hogudo

Beh, a essere pignoli dovrebbe rimandare all'<input />

Se ci posti l'indirizzo magari ci diamo un occhio

Tu sei sicuro al 100% che quel javascript non interferisca con tecnologie alternative?

joey.santiago

purtroppo il sito non è online, perché lo sto ultimando per un esame e non saprei dove metterlo! Questo è il codice javascript caricato nella pagina con un semplice <script type="text/javascript" src="javascript/verificaPrenotazione.js">
</script> inserito nello header.

 var registrationForm;
window.onload = init;
window.onload = verificaTutto;
function init() {
    //Attaching the onSubmit event to the login form
    registrationForm = document.getElementById('prenotazione');
    registrationForm.onsubmit = function () {
        verificaTutto(this);
    }
}
function campo(campo){
         var ret=true;
         if ((campo == "") || (campo == "undefined")) {
            ret=false;
         }
         return ret;
}
function catturaDate(){
         giornoArrivo= window.document.forms['prenotazione'].giornoArrivo.value;
         meseArrivo= window.document.forms['prenotazione'].meseArrivo.value;
         annoArrivo= window.document.forms['prenotazione'].annoArrivo.value;
         dataArrivo=annoArrivo+"-"+meseArrivo+"-"+giornoArrivo;
         giornoArrivo=parseInt(giornoArrivo);
         meseArrivo=parseInt(meseArrivo);
         annoArrivo=parseInt(annoArrivo);

         giornoPartenza = window.document.forms['prenotazione'].giornoPartenza.value;
         mesePartenza = window.document.forms['prenotazione'].mesePartenza.value;
         annoPartenza = window.document.forms['prenotazione'].annoPartenza.value;
         dataPartenza=annoPartenza+"-"+mesePartenza+"-"+giornoPartenza;
         giornoPartenza=parseInt(giornoPartenza);
         mesePartenza=parseInt(mesePartenza);
         annoPartenza=parseInt(annoPartenza);
}
function verificaDati(){
        var retDati = true;
        catturaDate();

        if (annoArrivo>annoPartenza){
                retDati = false;
                }
        if ((meseArrivo>mesePartenza)&&(annoArrivo==annoPartenza)){
                retDati = false;
                }
        if ((meseArrivo==mesePartenza)&&(annoArrivo==annoPartenza)&&(giornoArrivo>giornoPartenza)){
                retDati = false;
                }
        return retDati;
}
function verificaTutto(){
        var retTutto = true;
        
        numeroLetti=window.document.forms['prenotazione'].numeroLetti.value;
        
        catturaDate();
        //verifica consistenza date
        retTutto = verificaDati();
        //tutti i campi devono essere completati
        if (campo(numeroLetti)==false){
            window.document.forms['prenotazione'].numeroLetti.focus();
            retTutto = false;
            }
        else if (campo(meseArrivo)==false){
            window.document.forms['prenotazione'].meseArrivo.focus();
            retTutto = false;
            }
        else if (campo(giornoArrivo)==false){
            window.document.forms['prenotazione'].giornoArrivo.focus();
            retTutto = false;
            }
        else if (campo(annoArrivo)==false){
            window.document.forms['prenotazione'].annoArrivo.focus();
            retTutto = false;
            }
        else if (campo(mesePartenza)==false){
            window.document.forms['prenotazione'].mesePartenza.focus();
            retTutto = false;
            }
        else if (campo(giornoPartenza)==false){
            window.document.forms['prenotazione'].giornoPartenza.focus();
            retTutto = false;
            }
        else if (campo(annoPartenza)==false){
            window.document.forms['prenotazione'].annoPartenza.focus();
            retTutto = false;
            }
        return retTutto;
}

il codice, come dicevo, si limita a mettere il focus ai campi non compilati. potrebbe fare anche altro, naturalmente, ma dato che i controlli sono già fatti dal server con php (anch'esso strutturato in modo che mi sembra intelligente, con un file esterno incluso che si limita a scrivere "avvertimenti" sulla pagina), non c'è bisogno di nulla di più!

che mi dite? (se volete che uploaddi da qualche parte la pagina, lo faccio volentieri... ma esistono hosting gratuiti che permettono di avere un database mysql?)

grazie a tutti!

hogudo

Poi se prendi un bel voto e, quando vai a bere fuori, non ci chiami, il prossimo esame ti bocciano!

Ora il problema è appunto se il tuo esame verte sull'accessibilità.
Devi fare una prova con il javascript disabilitato.

Il tuo che hai postato non da particolari richieste e potrebbe essere bypassato o magari aggiunta un piccola descrizione. Sta di fatto che però, se invece il flusso si blocca per qualche motivo che non posso controllare non dovuto al javascript quanto alla collocazione, questo non mi è dato saperlo.

Appunto è il bello della verifica manuale di cui tanto parliamo.

PS: che poi il tuo prof se ne accorga potrebbe, e dico potrebbe, essere un altro discorso

Non so per my_sql.... se il regolamento lo permette vai a chiederlo nella sezione hosting che ne sanno di +

Ciao

PS ma che corso/facoltà/università_di fai?

joey.santiago

faccio scienze della comunicazione, sono iscritto al corso di laurea specialistica in comunicazione nella società dell'informazione.

Il corso di webdesign 2 prevede la realizzazione di un sito pienamente accessibile (livello AAA), scritto in xhtml 1.1 strict e con layout completamente realizzato in css. Io ho aggiunto anche molte cose in php perché ho ripreso il sito che avevo creato per l'esame di programmazione per il web.
Provato il sito senza javascript abilitato, va alla grande! però, appunto, mi chiedevo se sia comunque obbligatorio inserire dei noscript, oppure no. Credo che questa tecnica permetta di non usare i tag noscript per il semplice fatto che ho evitato di usare javascript per inviare il form, cosa che tipicamente si fa con un void(0) o cose del genere...

eheh... vediamo come va l'esame, prima di parlare dei festeggiamenti!

grazie ancora... in questo forum siete tutti gentilissimi...

giorgiotave

@joey santiago said:

grazie ancora... in questo forum siete tutti gentilissimi...

Ma figurati, saresti così gentile da dire a tutti quelli che frequentano il tuo stesso corso che si possono accasare qui da GT, offro io

Scherzo ovviamente e Buona fortuna con gli esami (facci sapere)

massy

Buona fortuna con gli esami (facci sapere)
Ecco... lo hai bruciato

joey.santiago

argh!!! mi sa tanto che non passerò l'esame dopo il tuo augurio... col cavolo che consiglio ai miei compagni di corso di frequentare il forum!

hogudo

argh!!! mi sa tanto che non passerò l'esame dopo il tuo augurio...

A me invece mi sa tanto che rischi molto di più di non passare se non riesci a testare come si deve il tuo programma, ovvero come si fa quando si vuole creare un prodotto professionale.

Quindi consiglierei di finirla con gli OT (abbiamo una bellissima sezione dove ci divertiamo tantissimo) e testare il comportamento dei browsers alternativi, anche perchè credo che se i tuoi compagni, e chi lo fa di mestiere, sapessero dell'esistenza di un forum dove dei professionisti si offrono di aiutare gratuitamente gli aspiranti webmasters, correrebbero

Indi per cui: ci sono novità? Hai chiesto e ti sei informato in merito alla pubblicazione per evitare ed evitarti spiacevoli sorprese?
Da un javascript ed un accenno al codice nessuno può dirti con certezza nulla

joey.santiago

di prove ne ho fatte un bel po' usando mozilla firefox 1.5, opera 9, ie 5, 5.5 e 6. Ho provato a navigare ed effettuare tutte le operazioni anche con javascript disabilitato... probabilmente non è a livello professionale, ma credo possa andare per l'esame...

se volete vederlo, è finalmente online... devo ancora fare qualche modifica per accedere al database, ma comunque si può vedere: http://utenti.lycos.it/oliverclaims/agrivillar/home.php

hogudo

se volete vederlo, è finalmente online... devo ancora fare qualche modifica per accedere al database, ma comunque si può vedere: http://utenti.lycos.it/oliverclaims/agrivillar/home.php

La dinamica l'hai capita, anche sulle funzioni ed in parte anche sui wcag1.
Una veloce passata con jaws e linx mi ha confermato che i contenuti passano (anche dove c'è il js).

Quello secondo me che non hai compreso bene è la differenza tra html e xhtml
in quanto a me risulta no "well formed"

http://validator.w3.org/check?uri=http%3A%2F%2Futenti.lycos.it%2Foliverclaims%2Fagrivillar%2Fregistrazione.php&charset=(detect+automatically)&doctype=Inline&ss=1&verbose=1&No200=1#line-22
http://validator.w3.org/check?uri=http%3A%2F%2Futenti.lycos.it%2Foliverclaims%2Fagrivillar%2Fhome.php&charset=(detect+automatically)&doctype=Inline&ss=1&verbose=1&No200=1

in quanto vai ad annidare senza il giusto criterio i moduli.

La qual cosa ti manda naturalmente per aria la validazione css e l'accessibilità normativa.
Pensando all'esame temo che il fuoco verterà più su queste seconde considerazioni che sulla prima. quindi vedi di darci un occhio perchè sarebbe un peccato, visto che sei sulla buona strada.

Ciao

joey.santiago

oooops... avevo guardato le cose riguardanti il tag <map> di corsa... credevo si usasse per raggruppare liste di link.. comunque la maggior parte degli errori sono causati dal codice tripod, mica dal mio!
ma, a proposito del tag <map>... su questo link: http://accessibility.comune.prato.it/tradotte/TR/WCAG10-HTML-TECHS/#group-bypass si cita proprio l'utilizzo che ne avevo fatto io! a meno che non vada utilizzato nel caso uno usi già una lista...

grazie mille, sei stato gentilissimo!

hogudo

Tra w3c e comune di prato, io starei con le indicazioni del primo

Altro regalo: http://www.htmlhelp.com/tools/validator/problems.html#amp

joey.santiago

miticuzzo... esame superato con 30 e lode... grazie a tutti!

hogudo

Poi se prendi un bel voto e, quando vai a bere fuori, non ci chiami, il prossimo esame ti bocciano!

Giorgiotave.it : l'unico sito che ti fa prendere 30 e lode!

Vedi di dirlo con i tuoi colleghi di unviersità