[Accessibilità] Richiedo analisi e consigli

[pierofix]

L'esperimento che ho realizzato riguarda una prova di impaginazione e posizionamento degli elementi per il mio futuro sito personale (se mai riuscirò a metterlo insieme VVoVe: ). Vorrei richiedere un vostro parere generale e un'analisi che ricopra la MAGGIOR PARTE dei punti; la pagina è la seguente:

- www.re1.it/pierofix/articoli/tabelle-layout.htm

L'articolo credo lo conosciate già, ma il contenuto non è fondamentale al fine di questa discussione. Potebbe però esserlo la sua strutturazione. Anche la struttura generale del sito che compare nei menù di navigazione è fittizia: prego quindi di cercare solo di comprenderne l'idea.

Mi piacerebbe che il vostro sguardo si posasse fondamentalmente (ma non solo ) sui seguenti punti:

1. titolo di pagina
2. identificazione del sito tramite logo grafico a cui è attribuito un testo alternativo
3. posizionamento e composizione delle "briciole di pane"
4. puntamento a barra di navigazione situata a fondo pagina
5. puntamento al modulo di ricerca: come fare per entrare direttamente nel campo per inserire il testo (l'accesskey c'è già)?
6. accesskey
7. strutturazione dell'articolo: uso degli header, suddivisione paragrafi, leggibilità testo
8. stile dei link: hover, visited, ecc.
9. menù di navigazione principale: posizionamento a fondo pagina e h1 associato: ho dovuto utilizzare un'ulteriore intestazione in quanto mi sono accorto che JAWS vi entrava titolando la porzione di pagina con l'ultimo h2 dell'articolo; ho pertanto ritenuto opportuno usare un h1 per "uscire" dalla struttura dell'articolo e crearne una nuova
10. modulo di ricerca: posizione e accorgimenti per l'accessibilità
11. pulsanti "torna su"
12. aspetto complessivo finale della pagina
13. css per la stampa; a tal proposito volevo anche chidervi cosa ne pensate della scelta che ho compiuto per i font: sans-serif per lo schermo e serif per la stampa

Un grazie tanto grande quanto il dettaglio delle vostre risposte.

[andrea.paiola]

comincio con 2 cosette... poi appena ho più tempo continuo...

- per migliorare la leggibilità del testo consiglio di evitare il rientro ad inizio paragrafo (meglio una lettera + grossa) e di ridurre il numero di caratteri per riga (leggibilità ottimale a 40-50 caratteri per riga)

[pierofix]

Ottimo: annoto. Grazie mille.

[elMoko]

[QUOTE]

1. titolo di pagina
2. identificazione del sito tramite logo grafico a cui è attribuito un testo alternativo

Un layout di tipo "keep it simple" è una scelta giustissima per un sito d'informazione (nel tuo caso guida?), inoltre il design minimalista va di moda attualmente quindi direi che fin qua ci siamo. Forse manca un po di dettaglio grafico... potresti magari aggiungere un paio di elementi colorati via CSS, un discreto background al body, colorare l'<hr/> o aggiungere un &raquo; colorato a sinistra degli <h1>...
Altrimenti scusa ma il logo a me non piace.

1. posizionamento e composizione delle "briciole di pane"
2. puntamento a barra di navigazione situata a fondo pagina
3. puntamento al modulo di ricerca: come fare per entrare direttamente nel campo per inserire il testo (l'accesskey c'è già)?
4. accesskey

Breadcrumbs OK,
Barra navigazione OK per utente, per motore di ricerca invece se il contenuto é troppo grande, forse non riuscirà a indicizzare tutto fino a raggiungere il box navigazione e quindi seguire i links. Secondo me nella home ci vuole la navigazione a inizio pagina mentre nelle pagine interne puoi averla in fondo.
Accesskeys non sono affatto evidenti, quindi non accessibili. Ciò messo un pò a capire che l'accesskey di un link appariva come title...
Puntamento al modulo di ricerca:

ricerca nel sito

1. strutturazione dell'articolo: uso degli header, suddivisione paragrafi, leggibilità testo
2. stile dei link: hover, visited, ecc.

Strutturazione perfetta. Font-size dei paragrafi forse un pelo troppo grande. Stile link OK

1. modulo di ricerca: posizione e accorgimenti per l'accessibilità
2. pulsanti "torna su"

Ok, io ci aggiungerei anche un "Ricerca in questa pagina" che evidenzia le parole trovate nel documento corrente.
di pulsanti "torna su" ce n'é uno solo in pié di pagina no?
Io metterei una freccina (immagine) volta verso l'alto e una con scritto menu ad ogni H1. Perché ? Se scrolli fino a "Tranquillo, non morde", e improvvisamente decidi di navigare nel sito, devi scrollare un bel po' prima di raggiungere l'inizio del documento per poi renderti conto che devi cliccare su un link per finalmente raggiunger eil menu.

1. aspetto complessivo finale della pagina

Come dicevo prima: semplice, minimalista, leggibile, bello - ma manca un po di colore, di elementi grafici (anche molto discreti).

[pierofix]

elMoko, sei stato davvero esaustivo: grazie davvero. Questa sera mi copio tutte le vostre risposte su un file di testo e poi me le stampo, così a casa me le rileggo tutte e le ho accanto a me mentre aggiusto.

Grazie ancora.

P.S. Nota speciale per il logo: non è definitivo, diciamo che ho fatto una "roba" in cinque minuti per piazzarla in alto nella pagina.

[span]

Originariamente inviato da pierofix [*] posizionamento e composizione delle "briciole di pane"

cosa vuol dire?

[*] puntamento al modulo di ricerca: come fare per entrare direttamente nel campo per inserire il testo (l'accesskey c'è già)?

Anziché all'id del modulo, punti all'id del campo per inserire il testo.
Non so se è meglio o peggio, però...

[*] css per la stampa; a tal proposito volevo anche chidervi cosa ne pensate della scelta che ho compiuto per i font: sans-serif per lo schermo e serif per la stampa

Ideale, che io sappia

Per la dimensione del font, mi è capitato di leggere un messaggio sulla mailing list di web accessibile in cui Charles McCathieNevile sosteneva di non dare misure del font inferiori al 100%


Edit: nei blocchi di codice, dove usi il <pre>, non ci vorrebbe anche il tag <code>?

[pierofix]

Originariamente inviato da span
cosa vuol dire?

E' un percorso tipo "Ti trovi qui: WEB > ARTICOLI": ti permette di risalire la struttura gradualmente e capire la propria posizione nella struttura stessa del sito.

Anziché all'id del modulo, punti all'id del campo per inserire il testo.
Non so se è meglio o peggio, però...

Ho già provato: non si seleziona il campo. Forse la soluzione ideale è quella in javascript (la soluzione alternativa in caso di js disattivato rimarrebbe l'accesskey).

Ideale, che io sappia

Bene.

Per la dimensione del font, mi è capitato di leggere un messaggio sulla mailing list di web accessibile in cui Charles McCathieNevile sosteneva di non dare misure del font inferiori al 100%

Darò subito un'occhiata: grazie mille!

Edit: nei blocchi di codice, dove usi il <pre>, non ci vorrebbe anche il tag <code>?

Sì, forse hai proprio ragione. Controllerò sulla specifica del linguaggio ma mi pare sia più che lecito.

Grazie millissime!!!

[thomas_anderson]

Ci sono dei problemi con Internet Explorer 6 SP1. Tutto appare sproporzionatamente ingigantito.

[awd]

Originariamente inviato da thomas_anderson
Ci sono dei problemi con Internet Explorer 6 SP1. Tutto appare sproporzionatamente ingigantito.

controlla che dimensione di carattere hai impostato via browser!
Io più grande vedo solo l'area di codice in courier a sfondo blu! Però i link sono diversi: blu su FF e nero a sfondo grigio con IE, è voluto?

[thomas_anderson]

right awd.
Ormai mi ero completamente disabituato a navigare con IE6
SP1.