Prima prove di Usabilità ed accessibilità

[Federix]

Ho realizzato questa pagina seguendo un pò lo schema di un articolo di Pierofix.
Ora vorrei sapere, prima di continuare ad andare avanti con il mio lavoro, se questa pagina potrebbe essere presa come modello per altre pagine, oppure se dev'essere modificato qualcosa.

PS = Non fate caso alla validazione dei caratteri, è un problema in fase di soluzione

[panta1978]

Originariamente inviato da Federix
Ora vorrei sapere, prima di continuare ad andare avanti con il mio lavoro, se questa pagina potrebbe essere presa come modello per altre pagine, oppure se dev'essere modificato qualcosa.

... tra cui il Comune di Montevarchi, la Comunità Montana della Valtiberina e la Federconsumatori.


Autore: Coldiretti Arezzo

Ti invio le mie considerazioni:

_ Non mi piace il doppio
. Fossi in te, userei la proprietà margin-bottom dei CSS.

_ Hai inserito tanto testo. Non è molto leggibile, io aumenterei un pò l'interlinea e soprattutto userei di qua e di là l'attributo strong per rendere più visibile il testo

_ Forse sarebbe meglio un foglio di stile esterno (ma questo immagino che lo avrai previsto sicuramente)

_ Se si eccettua una linea verde verticale, è tutto in bianco e nero. Un pò di colore non guasterebbe (ad esempio, potresti fare i titoli in blu, così fra l'altro si capisce al volo che sono titoli. Ora mi sembra molto uniforme, come sito)

_ Per facilitare la navigazione, io metterei in cima un elenco dei vari articoli, ed alla fine di ogni sezione, prevederei un link tipo "Inizio Pagina" (cito solo per farti un esempio, qualcosa come questo: www.parrocchiasantateresa.it/storia.php). Poi immagino che metterai anche dei link ad altre pagine.

[Robycz]

Direi che quella non è la home-page.. vero?
cmq servirebbe una qualche intestazione che spieghi al navigatore dov'è attraccato.

Ho notato che non ci sono dei link che permettono di saltare ai diversi articoli,
anzi, ad una prima occhiata non mi ero nemmeno accorto che c'erano più articoli,
pensa un po se lo capiva un non vedente...
Forse potresti dividere i contenuti, per ottenere una pagina per ogni articolo (e ricordati di impostare gli accesskey nei link).

Gli alternate delle immagini sono un po da rivedere..

Attualmente i colori sono ok, se scegli di seguire il consiglio di panta (fossi in te lo seguirei...) devi prestare molta attenzione alla differenza tra colore di sfondo e colore del carattere.
Magari usa un qualche tool (tipo colour contrast analyzer, per esempio).

Non dovresti utilizzare i caratteri << >> per delimitare una citazione... che tra l'altro in Mozilla (1.7.2) manco si vede.. l'ho scoperta nel codice.

Se ti va, dai un'occhiata al codice di www.uiciechi.it
(magari anche alla sezione O.S.I.)

[Federix]

Non è la homepage, è solamente la homepage di un futuro blog che al momento ho riempito con le notizie del portale che ho realizzato.

Per quanto riguarda i colori dei titoli, avete ragione, infatti li ho modificati ora e ho aumentato anche l'interlinea del testo, da 16 a 18px.
Lo stile esterno è d'obbligo, ma per il momento volevo solamente un documento su cui lavorare, senza css o js esterni.
"L'inizio pagina" ci avevo pensato, ma dovrei creare un livello solamente per quella scritta, quindi si profilo anche un aumento del peso della pagina, comunque guarderò.

Gli ALT delle immagini come andrebbero messi?? Io ci ho messo il secondo titolo della notizia.

Grazie per le info

[panta1978]

Originariamente inviato da Federix
Non è la homepage, è solamente la homepage di un futuro blog che al momento ho riempito con le notizie del portale che ho realizzato.

Per quanto riguarda i colori dei titoli, avete ragione, infatti li ho modificati ora e ho aumentato anche l'interlinea del testo, da 16 a 18px.
Lo stile esterno è d'obbligo, ma per il momento volevo solamente un documento su cui lavorare, senza css o js esterni.
"L'inizio pagina" ci avevo pensato, ma dovrei creare un livello solamente per quella scritta, quindi si profilo anche un aumento del peso della pagina, comunque guarderò.

Gli ALT delle immagini come andrebbero messi?? Io ci ho messo il secondo titolo della notizia.

Grazie per le info

Molto bello. Sembra decisamente migliorato!

Vuoi qualche altra critica costruttiva?

_ Io inserirei un effetto hover sui link

_ Farmacisti in serrata contro il Decreto Bersani, il servizio sarà garantito da 1500 farmacie private in servizio di turno obbligatorio mi sembra un pò troppo lungo, come titolo! Idem dicasi per Il COMUNE DI MONTEVARCHI CERCA DEGLI SPONSOR PER L'ACQUISTO DI UN AUTOMEZZO DA ADIBIRE AL TRASPORTO DI PERSONE CON DIFFICOLTA' DI DEAMBULAZIONE (che oltretutto è in maiuscolo, immagino sia una svista).

_ Io toglierei i bordi alle immagini, che così come sono sembrano dei link.

img{border:0}

_ Mi piace il colore #F9F9F9 di sfondo al div contenitore. Potresti fare uno sfondo non bianco al resto della pagina (ad esempio, uno sfondo a righe diagonali che ultimamente "va per la maggiore").

[Federix]

Per i titoli siamo in fase di correzione.

Ora ho provato totalmente una nuova versione, che ne dite??

[Robycz]

Dico che mi piace
Però i titoli sono troppo chiari
Scaricati il colour contrast analyzer [http://www.webaccessibile.org/argome...to.asp?cat=530]

Ti parlavo degli alternate.. quelli che hai inserito non sempre descrivono l'immagine.
ad esempio le foto b/n sullo spezzone dedicato alla traviata presumo ritraggano tre attori,
mentre l'alternate è "Cortona: Lirica in Piazza Signorelli".
Non è necessariamente vero che l'alternate debba descrivere l'immagine, però la linea guida 1 ("Fornire un contenuto che, quando viene presentato all'utente, gli trasmetta essenzialmente la stessa funzione o scopo del contenuto audio o visivo ") prevede l'inclusione di un'informazione equivalente.
Di lirica non me ne intendo, però se gli attori ritratti in quelle foto sono conosciuti, credo che nell'alternate sia corretto indicarne i nomi.
Stesso discorso (l'equivalenza) va applicato agli altri "alt".

Non so fin dove vuoi spingerti con l'accessibilità, comunque, a voler essere pignoli, non andrebbero dimenticate le persone che hanno deficit cognitivi o difficoltà di lettura...
Gli articoli sono molto lunghi, dovresti almeno inserire un "take" di 2 righe sotto il titolo, scritto con linguaggio chiaro e semplice. Non è un sistema ortodosso al 100% , però aiuta molto.

[naig]

In linea di massima la pagina ha già una discreta accessibilità.
Gli aspetti da migliorare secondo me sono i seguenti:

1) Rendi fluida l'altezza dell'elemento #header: facendo lo zoom dei caratteri l'altezza resta fissa nascondendo il titolo principale

2) Ridurre la lunghezza della pagina: troppo testo. Se il sito è dinamico puoi studiare eventualmente una duplice soluzione che permetta, secondo la scelta dell'utente, la visualizzazione di tutti gli articoli in un'unica pagina o di ogni articolo in una pagina specifica. In ogni caso se lasci più articoli in una pagina sarebbe opportuno mettere delle ancore che permettono una navigazione a salti all'interno del documento in modo da permettere, soprattutto a chi usa un browser vocale, il salto direttamente al contenuto che gli interessa

3) C'è uno scarso contrasto tra il verde e il bianco e nei link di rimando all'inizio pagina tra l'azzurro e il grigio e anche tra l'azzurro e il bianco

4) Predisponi un effetto a:hover per mettere in evidenza i collegamenti

5) Inserisci un attributo longdesc per le immagini: questo ti permetterà di mettere degli alternate abbastanza brevi senza pregiudicare la possibilità di fruire di una descrizione dettagliata delle immagini ai non vedenti

6) Utilizza i tag di definizione dei contenuti tipi acronym, abbr, ecc. Ad esempio, ho visto la sigla CNCU. E' raccomandato l'uso del tag ABBR o ACRONYM in questi casi (ABBR se la sigla si legge facendo lo spelling, come nel caso di CNCU, oppure ACRONYM se va trattata come un acronimo, ad esempio NATO). Aggiungi l'attributo title=... in questo modo dai anche la possibilità a chi usa browser tipo Opera, Mozilla, Firefox di conoscere il testo esteso dell'acronimo

7) Specifica i cambiamenti di lingua: ad esempio, la stringa CLASS ACTION dovrebbe essere inserita all'interno di un elemento SPAN con l'attributo lang=en . Alcuni browser vocali (ad esempio IBM Screen Reader) supportano il cambiamento di testo e pronunceranno i testi in altre lingue con il corretto accento.

8) Per una piena accessibilità l'allineamento del testo non dovrebbe essere giustificato bensì allineato a sinistra. Un testo giustificato rende fastidiosa la lettura quando si usano zoom eccezionali del carattere a causa della frequenza di spazi molto larghi

PS: a parte questi appunti, il layout grafico è molto gradevole, complimenti

[pierofix]

Comincio anch'io la mia serie di commenti. Partirò dal markup.

In linea generale mi pare tu abbia fatto un gran bel lavoro, soprattutto in relazione ai lavori precedenti. Il markup è usato con saggezza (a parte in qualche punto, che di seguito approfondirò) e ordine.

Affrontiamo le note a mio avviso stonate.

1. Il prologo XML (<?xml version="1.0" encoding="ISO-8859-1"?>) lo passi anche a IE? Per ora non è consigliabile farlo, in quanto manda quel caca-browser in quirks mode (quindi genera errori di visualizzazione).
   
2. XHTML 1.0 Transitional? Secondo me puoi usare tranquillamente lo Strict. Motivo della scelta?
   
3. La questione dei paragrafi. Un testo (come un articolo, ad esempio), solitamente si struttura attraverso i paragrafi (e le intestazioni). Scordati l'uso di br: è un marcatore privo di significato. Se due righe devono andare a capo significa che sono 'due cose diverse' e quindi ognuna merita di essere marcata per conto suo; il fatto che compaiano su due righe diverse sarà impostato poi nel CSS.
   
   Usa bene i paragrafi, quindi. Scrivi questo:
   
   

   
   Primo paragrafo.</p>
   
   
   Secondo paragrafo.</p>

   e non:
   
   

   
   
      Primo paragrafo.
   
   
      Secondo paragrafo.
   </p>

   Vuoi identificare e separare meglio una notizia dall'altra? Potresti fare così:
   
   

   <div class="notizia">
      <h2>Titolo notizia</h2>
      
   
   Io sono un paragrafo.</p>
      
   
   Io sono un altro paragrafo.</p>
      
   </div>

4. Le liste. Usa le liste! Scrivi:
   
   

   <ul>

5. Consiglio 1
6. Consiglio 2
7. Consiglio 3

[Federix]

Preciso un pò:

• - Quello che è scritto dentro il paragrafo sono comunicati stampa, che io prendo, copio e incollo nel database, per questo alcune volte ci sono dei
  o delle cose di difficile interpretazione, come per esempio << >>, ma nella mia mente, il mio blog lo scrivo io, quindi non ci saranno di questi problemi.
  
  - Lo Strict non volevo usarlo perché mi crea dei margini e mi rende un pò di problemi con le immagini, creando dei filetti tra un oggetto e l'altro che a volte mi tornano scomodi. Perché preferire Strict a Transitional??
  
  - Non ho capito il punto a
  
  - I livelli preferirei non usarli per il momento, se poi la cosa diventa complessa vedrò
  
  - Ho reso fluida l'header come diceva naig ed è veramente una grande cosa questa, soprattutto quando si aumenta o diminuisce il carattere della pagina
  
  - Ho fatto delle prove con ColorAnalyzer e devo dire che i miei colori sembrano andare bene, dovrei scurire solamente di qualche punto il verde e il resto vanno tutti bene, anche il blu sul grigio. Inoltre ho voluto tenere il blu elettrico perché si capisce subito che è un link, mentre mi piace meno l'idea di mettere uno colore per a:visited anche se ho letto che è molto utile per gli ipovedenti.

Grazie a tutti dei consigli