Download - B. Leporini, F. Paternò Pisa, maggio 2003 Usabilita' e Screen Reader: Nuovi Criteri di Progettazione
B. Leporini, F. Paternò Pisa, maggio 2003
Usabilita' e Screen Reader: Nuovi Criteri di Progettazione
Integrazione di usabilità e accessibilità - Pisa 2003
2
Presentazione del lavoro• Non solo accessibilità: migliorare l’usabilità
con screen reader;• Accessibilità: garantire l’accesso
all’informazione (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 2003
3
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 2003
4
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 2003
5
Organizzazione dei criteri
• Insieme di criteri e di checkpoint.• Classificazione per livelli di priorità in base
all’importanza 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 2003
6
I criteri proposti 18 criteri suddivisi in 3 insiemi in base alla def.
di usabilità:
• Efficacia• Efficienza• Soddisfattibilità
1. Effectiveness Criteria1.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 Criteria2.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 Criteria3.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 2003
7
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 2003
8
Testo significativo: nomi dei frameMain frame2
top1 frame2
Florence’s 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
Florence’s 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 2003
9
Testo significativo:Contenuto dei link
Link testuale:Testo compreso tra <a> </a>valore attributo title;
Link grafico:valore attributo title e alt;
Link grafico e testuale:Se 2 link con stesso HREF unico linkcombinazione testo link e valore attributo alt.
Integrazione di usabilità e accessibilità - Pisa 2003
10
Pagina modulistica socialehttp://www.comune.firenze.it/comune/organi/modulistica/sicsociale/modulistica.htm
Pagina originale
Direzione Sicurezza sociale – ModulisticaTable with 4 columns and 4 rowsSummary: assegni per il nucleo familiare1) Assegni per il nucleo familiare e di maternità e ...Link2 cerchio rosso1, scarica in formato docLink2 cerchio blu1, scarica come rtfLink2 cerchio verde1 - scarica i file zip...Dichiarazione sostitutiva (Link2 .doc1 -Link2 .rtf1)Allegati (Link2 .doc1 -Link2 .rtf1)Istruzioni (Link2 .pdf1)Tutti i modelli (Link2 .zip1)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 ...
Link2 formato doc - assegno di maternità1
Link2 formato rtf - assegno di maternità1
Link2 file zip di entrambi i formati1
…
table end
Integrazione di usabilità e accessibilità - Pisa 2003
11
Guida on line htmlhttp://www.estek.net/estek/idocs/linking/_A.html
Lettura dello screen reader
Pagina originale
Link2 previous page1
Link2 Drop Down Menu With Frames1
Link2 <A HREF="...">1
Link2 next page1
... ------------------Pagina modificataLink2 previous page: Drop Down Menu With Frames1
Link2 next page: <A HREF="...">1
Codice html
Pagina originale
<A HREF="linking_famsupp_137.html"> <IMG SRC="../arrow_prev.gif" ALT="previous page"> </A>
<A HREF="linking_famsupp_137.html"> Drop Down Menu With Frames </A>
Pagina modificata
<A HREF="linking_famsupp_137.html"> <IMG SRC="../arrow_prev.gif" ALT="previous page:"> Drop Down Menu With Frames </A>
<A HREF="_A_HREF.html"> <IMG SRC="../arrow_forward.gif" ALT="next page:"> <A HREF="..."> </A>
Integrazione di usabilità e accessibilità - Pisa 2003
12
Barra di navigazione, Menu e sottomenuLETTURA DELLA BARRA DI NAVIGAZIONE
Table with 2 columns and 5 rows2
Summary2: Right part of the head1
Link2 Cerca |
Link2 Personalizzazione |
Link2 Mappa
-------------------------------------------------
Link2 Skip to content1
Table with 2 columns and 5 rows2
Summary2: Navigation bar1
Link2 Cerca |
--------------------------------------------------
Link2 Skip to content1
Graphic2 Navigation bar1
Link2 Cerca |
LETTURA DEL SOTTOMENU
Graphic sottomenu1,2
List of 2 items1,2
• Link 2 Utenti
List of 5 items nesting level 11,2
• Link 2 Forum
• Link 2 Elementi di base
...
List end nesting level 11,2
• Link 2 WebMaster
List of 4 items nesting level 11,2
• Link 2 Informazioni generali
• Link 2 Forum
...
List end nesting level 11,2
List end1,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 2003
13
Pop-up menuLETTURA DEI MENU
Human Interfaces in Information Systems
Graphic2 Pop-up menu2 :
Link2 Research
Link2 Research Topics
List of 4 items2
• Link2 Design of Interactive Systems
• Link2 Usability and Accessibility
• Link2 Mobile Information System All
• Link2 Interaction with Information Systems
list end2
Link2 People
List of 5 items2
• Link2 Permanent Staff
• Link2 Research Assistants
COSTRUZIONE DEL MENU
• Titoli e voci del menu = link;• Ogni menu e sottomenu racchiuso in un blocco <div>;• 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<style type=”text/css”>
#menu2 {position: absolute; visibility: visible; ...}
#submenu2 {position: absolute ; visibility: hidden; ...}
</style>
<body>
<img src="" alt="Pop-up menu:" class="hiddenlabel">
<div id="menu2" class="menu">
<a href="lab/research_topics.html" onmouseover="overMenu('menu2', 1)" onmouseout="outMenu('menu2', 1)" onfocus="overMenu('menu2', 0)" onblur="outMenu('menu2', 1)"> Research Topics </a>
</div>
<div id="submenu2" class="submenu" onmouseover="overMenu('menu2', 1)" onmouseout="outMenu('menu2', 1)">
<ul>
<li> <a href="lab/research_topics.html#res1"> Design of Interactive Systems </a> </li>
...
</ul>
</div> ......
Integrazione di usabilità e accessibilità - Pisa 2003
14
Conclusioni• Proposti 18 criteri per migliorare l’usabilità 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 l’apporti dei criteri usando un
prototipo di sito web.