Form campi obbligatori

[massi94]

Secondo il punto 1.3.1 del WCAG A #43 bisogna rappresentare i campi obbligatori con un * alla fine, specificando "i campi segnati con * sono obbligatori" o anche mettendo la scritta in colore rosso. Come possiamo fare per avvisare l'utente che non sta inserendo un campo?

[Polpetta]

@massi94 Scusa se ti rispondo solamente ora. Secondo me andrebbe fatto in JavaScript, perche' e' l'unico modo "interattivo" di avvisare prontamente l'utente che non ha compilato i campi.

Senza JavaScript pero' si potrebbe pensare anche di bordare i form obbligatori di rosso, in modo da dargli un senso di importanza. Questo andrebbe fatto via CSS da @WeissL.

Come ti pare l'idea?

[WeissL]

Li metterei con sfondo giallo per segnalare il required. é una convenzione, perchè rosso indica campo sbagliato.. comunque questo andrebbe ad influire il punto sull'accessibilità che dice che un elemento non deve essere distinguibile per il colore

[Polpetta]

Ok, ma se nell'html segnamo allo screenreader che e' un campo obbligatorio rimane comunque non accessibile?

[WeissL]

se segnali in html che è obbligatorio con l'attributo required non compila più le pagine in xhtml strict.. se si potesse segnalare required allora partirebbe il default del browser che in questi casi è da preferire...

[Polpetta]

No ok, ma io dicevo dei colori. Non possiamo mettere i campi colorati per via che persone con forti problemi visivi non distinguerebbero comunque i campi colorati da quelli no?

[WeissL]

Diceva Andrea l'altro giorno che c'è un punto sull'accessibilità che dice che gli elementi non dovrebbero essere distinguibili solamente per il loro colore o per la loro forma. In realtà segnalarli di giallo anche chi ha forme di daltonismo li riconoscerebbe

[korut94]

Comunque ragazzi se uno non compila i campi obbligatori quando invia appare il box errore con tutti gli errori commessi. Non è il massimo perché è distante ma basta mettere i campi obbligatori in alto e quelli opzionali in basso. Intanto contrassegnali con l'asterisco.

[Polpetta]

Ok, io stavo parlando di chi si aiuta con gli screen reader. Se mettiamo nell'html dei segnalibri anche chi non nota i colori può comprendere quali sono i campi obbligatori e quali no. O facciamo tutti i campi obbligatori dentro una label e gli altri li etichettiamo come "campi facoltativi" Il 17 gen 2016 13:14, "WeissL" notifications@github.com ha scritto:

Diceva Andrea l'altro giorno che c'è un punto sull'accessibilità che dice che gli elementi non dovrebbero essere distinguibili solamente per il loro colore o per la loro forma. In realtà segnalarli di giallo anche chi ha forme di daltonismo li riconoscerebbe

— Reply to this email directly or view it on GitHub https://github.com/Hexamini/PassioneKaraoke/issues/81#issuecomment-172318335 .

[massi94]

Avevo visto che anche con solo css si può mettere dentro la form tipo un tick verde o un segnale di errore che sta ad indicare se il campo è stato inserito o no

[Polpetta]

@massi94 Usiamo quello?

[massi94]

@Polpetta Non da nessuna informazione agli screen reader però!

[Polpetta]

@massi94 Se usiamo quelli + label?

[massi94]

@Polpetta Usare le label vorrebbe dire mettere due fieldset diversi, ma l'informazione che si deve inviare é sempre quella!

[Polpetta]

Ok, ma in questa maniera non si avrebbe separazione tra campi obbligatori o campi facoltativi? Il 17 gen 2016 13:46, "massi94" notifications@github.com ha scritto:

@Polpetta https://github.com/Polpetta Usare le label vorrebbe dire mettere due fieldset diversi, ma l'informazione che si deve inviare é sempre quella!

— Reply to this email directly or view it on GitHub https://github.com/Hexamini/PassioneKaraoke/issues/81#issuecomment-172321625 .

[massi94]

Adesso dico una cavolata, per segnalare che non sono stati inseriti i dati, non possiamo usare lo stesso errore che usiamo per segnalare che sono stati inseriti dati invalidi? e per i campi che invece che sono opzionali, non possiamo mettere che l'espressione regolare accetti anche la stringa vuota?

[korut94]

Certo @massi94, il discorso è legare il controllo ad uno o più messaggi. Quindi in se basta un array multidimensionale con la parola -> controllo[1..n] -> messaggio[1..n]

[massi94]

@korut94 ma avvisare dell'errore solo via javascript non possiamo?

[korut94]

Per questioni di sicurezza no, ma è gia tutto pronto anche per il Perl. Ho pensato, per non diventare scemi, che nel caso uno non avesse JavaScript, Perl riesegue i controlli e inserisca in un BoxError tutti gli errori trovati. Lo svantaggio è che l'errore non è vicino al form ma credo che con un riferimento vada tutto. Se invece c'è JavaScript appaiono gli errori proprio sopra i form.

[massi94]

@korut94 ah, è già pronto anche il perl! comunque https://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/G139 da dei consigli su come segnalare gli errori!

[korut94]

Oh dio, manca la parte di eseguire i controlli che saranno un CTRL+C CTRL+V da JavaScript.

[Polpetta]

@massi94 Ho notato che hai messo l'asterisco nei campi obbligatori, ma manca il colore rosso. Aggiungo alle label una classe in modo tale che @WeissL possa farci il CSS associato che colori di rosso il testo.

[massi94]

Secondo me non serve che il colore sia per forza rosso per i campi obbligatori! Avendo già messo l'asterisco vanno già bene così

[Polpetta]

@massi94 Quindi rimuovo le classi che ho messo?

[massi94]

@Polpetta A leggere quello che è scritto nel wcag secondo me si!

[Polpetta]

@massi94 Che 2 maroni. Ok tolgo tutti i class che ho messo, nessun problema.

[Polpetta]

Chiudo in quanto penso che il problema in questa issue sia stato risolto.

[korut94]

@Polpetta Mancherebbe solo nasconderli e visualizzarli quando si commette un errore.

[Polpetta]

@korut94 Ma questa issue non era legata solamente a mettere l'asterisco nei campi obbligatori in modo da informare l'utente?

[korut94]

@korut94 Ah ok, era per sicurezza.

[Polpetta]

@korut94 Per non saper ne leggere ne scrivere invoco @massi94, sperando ci dica che questa issue e' finita.

[massi94]

@Polpetta Sisi chiudi tutto

[Polpetta]

@massi94 E' gia' chiusa 😂