B. Leporini, F. Paternò Pisa, maggio 2003 Usabilita' e Screen Reader: Nuovi Criteri di Progettazione

Integrazione di usabilità e accessibilità - Pisa Presentazione del lavoro Non solo accessibilità: migliorare lusabilità con screen reader; Accessibilità: garantire laccesso allinformazione (anche con browser testuale); Usabilità: agevolare la navigazione tramite dispositivi speciali (sintetizzatore vocale, display braille, etc.); Proposta di 18 criteri di progettazione; Esempi di applicazione dei criteri proposti.

Integrazione di usabilità e accessibilità - Pisa Fasi di lavoro Empirica: identificazione problemi con screen reader; Simulazione: individuazione e test di più soluzioni tecniche; Sistematica: organizzazione e classificazione dei criteri proposti.

Integrazione di usabilità e accessibilità - Pisa Aspetti di navigazione e possibili problemi con dispositivi speciali Perdita di globalità: Es. Link, pulsanti, campi, etc. Sovraccarico di informazione: Es. Barra di navigazione, banner, etc. Lettura sequenziale: Es. messaggi di risposta, risultati di una ricerca, pagine contenenti diversi tipi di informazione.

Integrazione di usabilità e accessibilità - Pisa Organizzazione dei criteri Insieme di criteri e di checkpoint. Classificazione per livelli di priorità in base allimportanza del completamento del task. Classificazione in base alla UI (dialogo e presentazione); Individuazione di contesti ben precisi di cui tener conto durante la fase di sviluppo.

Integrazione di usabilità e accessibilità - Pisa I criteri proposti 18 criteri suddivisi in 3 insiemi in base alla def. di usabilità: Efficacia Efficienza Soddisfattibilità 1. Effectiveness Criteria 1.1.b. Logical partition of interface elements 1.2.a. Proper link content 1.3.b. Messages and dynamic data management 1.4.a. Proper style sheets 1.5.b. Terminological Consistency and layout 2. Efficiency Criteria 2.1.b. Number of links and frames 2.2.b. Proper name for frames,tables and images 2.3.a. Location of the navigation bar 2.4.b. Importance levels 2.5.b. Keyboard shortcuts 2.6.a. Proper form layout 2.7.b. Specific sections 2.8.b. Indexing of contents 2.9.b. Navigation links 2.10.b Identifying the current page content 3. Satisfaction Criteria 3.1.b. Addition of short sound 3.2.a. Colour of text and background 3.3.a. Magnifying at passing by mouse

Integrazione di usabilità e accessibilità - Pisa Esempi di applicazione Testo significativo: Nomi di frame; Contenuto dei link; Descrizione tabelle; Barra di navigazione, menu e sotto menu: Menu e sotto menu a livelli, Pop-up menu; Uso di suoni: Caricamento della pagina, Differenziazione dei tipi di link, Differenziazione dei formati di file.

Integrazione di usabilità e accessibilità - Pisa Testo significativo: nomi dei frame Main frame2 top1 frame2 Florences council web site link2 italian version link2 the mayor … link2 home top1 frame end2 left1 frame2 link2 documents found link2 immigrants … main frame2 navigation bar1 frame2 Florences council web site link2 italian version link2 the mayor … link2 home navigation bar1 frame end2 navigation sub-bar1 frame2 link2 documents found link2 immigrants …

Integrazione di usabilità e accessibilità - Pisa Testo significativo:Contenuto dei link Link testuale: Testo compreso tra valore attributo title; Link grafico: valore attributo title e alt; Link grafico e testuale: Se 2 link con stesso HREF unico link combinazione testo link e valore attributo alt.

Integrazione di usabilità e accessibilità - Pisa Pagina modulistica sociale Pagina originale Direzione Sicurezza sociale – Modulistica Table with 4 columns and 4 rows Summary: assegni per il nucleo familiare 1) Assegni per il nucleo familiare e di maternità e... Link 2 cerchio rosso 1, scarica in formato doc Link 2 cerchio blu 1, scarica come rtf Link 2 cerchio verde 1 - scarica i file zip... Dichiarazione sostitutiva ( Link 2.doc 1 - Link 2.rtf 1 ) Allegati ( Link 2.doc 1 - Link 2.rtf 1 ) Istruzioni ( Link 2.pdf 1 ) Tutti i modelli ( Link 2.zip 1 ) table end Pagina modificata Direzione Sicurezza sociale - Modulistica Table with 4 columns and 4 rows Summary: assegni per il nucleo familiare 1) Assegni per il nucleo familiare e di maternità e... Link 2 formato doc - assegno di maternità 1 Link 2 formato rtf - assegno di maternità 1 Link 2 file zip di entrambi i formati 1 … table end

Integrazione di usabilità e accessibilità - Pisa Guida on line html Lettura dello screen reader Pagina originale Link 2 previous page 1 Link 2 Drop Down Menu With Frames 1 Link 2 1 Link 2 next page Pagina modificata Link 2 previous page: Drop Down Menu With Frames 1 Link 2 next page: 1 Codice html Pagina originale Drop Down Menu With Frames Pagina modificata Drop Down Menu With Frames <A HREF="...">

Integrazione di usabilità e accessibilità - Pisa Barra di navigazione, Menu e sottomenu LETTURA DELLA BARRA DI NAVIGAZIONE Table with 2 columns and 5 rows 2 Summary 2 : Right part of the head 1 Link 2 Cerca | Link 2 Personalizzazione | Link 2 Mappa Link 2 Skip to content 1 Table with 2 columns and 5 rows 2 Summary 2 : Navigation bar 1 L ink 2 Cerca | Link 2 Skip to content1 Graphic 2 Navigation bar 1 L ink 2 Cerca | LETTURA DEL SOTTOMENU Graphic sottomenu 1,2 List of 2 items 1,2 Link 2 Utenti List of 5 items nesting level 1 1,2 Link 2 Forum Link 2 Elementi di base... List end nesting level 1 1,2 Link 2 WebMaster List of 4 items nesting level 1 1,2 Link 2 Informazioni generali Link 2 Forum... List end nesting level 1 1,2 List end 1,2 IDENTIFICAZIONE Marcare la barra di navigazione e menu: etichette nascoste o tabella; Usare struttura a più livelli per menu e sottomenu (liste); Differenziare i link da quelli della pagina: AccessKey e Tabindex.

Integrazione di usabilità e accessibilità - Pisa Pop-up menu LETTURA DEI MENU Human Interfaces in Information Systems Graphic 2 Pop-up menu 2 : Link 2 Research Link 2 Research Topics List of 4 items 2 Link 2 Design of Interactive Systems Link 2 Usability and Accessibility Link 2 Mobile Information System All Link 2 Interaction with Information Systems list end 2 Link 2 People List of 5 items 2 Link 2 Permanent Staff Link 2 Research Assistants COSTRUZIONE DEL MENU Titoli e voci del menu = link; Ogni menu e sottomenu racchiuso in un blocco ; Importanza della sequenza logica dei blocchi; Uso liste per voci del sottomenu; Uso CSS: Proprietà position e visibility; Uso javascript: apertura e chiusura sottomenu; No supporto di javascript: menu = lista di link CODICE HTML #menu2 {position: absolute; visibility: visible;...} #submenu2 {position: absolute ; visibility: hidden;...} Research Topics Design of Interactive Systems

Integrazione di usabilità e accessibilità - Pisa Conclusioni Proposti 18 criteri per migliorare lusabilità dei siti web con screen reader; Raffinare i criteri proposti definendo checkpoint tecnici; Implementazione di un tool di valutazione e applicazione dei criteri (checkpoint).; Inspection evaluation: test di un campione di siti; User testing: valutare lapporti dei criteri usando un prototipo di sito web.