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

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.


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.


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.


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.


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


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.


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

…


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.


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


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>


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.


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> ......


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.

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

Documents

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