Procedura dettagliata: creazione di un'applicazione Web di Accesso facilitato

Articolo
09/12/2008

Aggiornamento: novembre 2007

La creazione di pagine Web di Accesso facilitato consente di raggiungere il massimo numero possibile di clienti. Gli utenti con particolari esigenze non sono gli unici ad apprezzare le pagine ad accesso facilitato, anche gli utenti di browser che supportano la visualizzazione di solo testo o gli utenti di software che interpretano il contenuto della pagina Web possono fare affidamento sulle opzioni di Accesso facilitato. La progettazione di Accesso facilitato consente l'utilizzo di strumenti di automazione, quali i motori di ricerca, per cercare, indicizzare e utilizzare le informazioni contenute nelle pagine. Inoltre è possibile che in futuro le normative sulle telecomunicazioni richiedano che le informazioni distribuite su Internet siano accessibili allo stesso modo delle tradizionali applicazioni software. Per ulteriori informazioni, vedere Supporto per l'accesso facilitato in ASP.NET e Controlli ASP.NET e accesso facilitato.

Di seguito sono riportati i suggerimenti per la progettazione di pagine Web di Accesso facilitato reperibili dal sito Web Microsoft Accessibility:

Fornire testo alternativo di elevata qualità per tutta la grafica.
Utilizzare correttamente le mappe immagine.
Scrivere indicazioni utili sul testo dei collegamenti.
Progettare facilità di esplorazione da tastiera.
Fornire pagine alternative senza frame.
Utilizzare tabelle e relative alternative in modo corretto.
Supportare le opzioni di formattazione per il lettore di testo.
Non richiedere l'utilizzo di fogli di stile.
Utilizzare formati di file utilizzabili dall'utente.
Evitare il testo scorrevole.
Fornire titoli per la maggior parte degli oggetti.

Se non si è in grado di soddisfare i requisiti di Accesso facilitato è opportuno considerare l'ipotesi di fornire pagine Web alternative di solo testo.

I controlli ASP.NET supportano molti dei requisiti sull'Accesso facilitato, inclusi lo stato attivo ed elementi dello schermo. È possibile utilizzare le proprietà dei controlli ASP.NET per soddisfare altri requisiti di Accesso facilitato, come illustrato nella tabella riportata di seguito.

Proprietà Control	Considerazioni sull'Accesso facilitato
TabIndex	Utilizzare per creare un percorso di navigazione sensibile nel form. È importante che i controlli senza etichette intrinseche, quali le caselle di testo, siano immediatamente preceduti dalle etichette associate nell'ordine di tabulazione. Nei casi in cui ciò non sia possibile o non lo si desideri, utilizzare la proprietà AssociatedControlID di un controllo Label per associarlo a una casella di testo.
Text	Utilizzare l'elemento HTML u per visualizzare il tasto di scelta rapida per un controllo. I tasti di scelta rappresentano un metodo per consentire l'accesso da tastiera documentato a tutte le funzionalità. Per attivare un tasto di scelta rapida per un controllo, utilizzare la proprietà AccessKey.
Font Size	Utilizzare i tag di intestazione anziché dimensioni specifiche.
AlternateText	Fornire testo alternativo per tutte le immagini significative per il contenuto della pagina Web da riconoscere. In alcune istanze, è appropriato non impostare il testo alternativo di un'immagine, come nel caso di immagini utilizzate per la formattazione grafica. Per eseguire il rendering della proprietà AlternateText di un'immagine come vuota, impostare la proprietà GenerateEmptyAlternateText su true per il controllo Image.
AccessKey	Utilizzare per fornire l'accesso da tastiera ai controlli.

Prerequisiti

Per completare questa procedura dettagliata, è necessario disporre dei seguenti elementi:

Strumento di sviluppo Web Microsoft Visual Web Developer.
.NET Framework.

Creazione di un sito e di una pagina Web

In questa procedura dettagliata verrà creato un sito Web per un corso di algebra. Per l'interfaccia utente vengono utilizzati i seguenti controlli:

Un controllo Image per il logo del corso.
Un controllo Panel con i controlli HyperLink per le lezioni.
Un controllo GridView che visualizza una tabella contenente il programma del corso.
Un controllo HyperLink che collega a una pagina in cui viene descritto il libro di testo del corso.

L'obiettivo di questa procedura dettagliata è descrivere l'Accesso facilitato dell'interfaccia utente e la modalità di utilizzo dei controlli server Web per supportare l'Accesso facilitato. Vengono illustrate le funzionalità di Accesso facilitato di numerosi controlli utilizzati frequentemente, inclusi i controlli HyperLink, GridView, Image e Label. Tutti i controlli HyperLink consentono di passare alla stessa pagina Web, che tuttavia è vuota.

Nella procedura riportata di seguito verrà creato un sito Web di file system e verrà aggiunta una pagina denominata Lecture.aspx.

Per creare un sito Web di file system

Aprire Visual Web Developer.
Scegliere Nuovo sito Web dal menu File.

Verrà visualizzata la finestra di dialogo Nuovo sito Web.
In Modelli Visual Studio installati, fare clic su Sito Web ASP.NET.
Nella casella Percorso, immettere il nome della cartella in cui salvare le pagine del sito Web.

Digitare, ad esempio, il nome di cartella C:\WebSites.
Nell'elenco Linguaggio scegliere il linguaggio di programmazione da utilizzare.
Scegliere OK.

In Visual Web Developer vengono create la cartella e una nuova pagina denominata Default.aspx.
In Esplora soluzioni, fare clic con il pulsante destro del mouse sul nome del sito Web, quindi scegliere Aggiungi nuovo elemento.
In Modelli Visual Studio installati fare clic su Web Form.
Digitare Lecture.aspx nella casella Nome, quindi scegliere OK.

Creazione di dati da visualizzare

Nella pagina che si sta creando vengono visualizzate informazioni sulle lezioni di un corso di algebra. Per questa procedura dettagliata, i dati del corso sono archiviati in un file XML.

Per creare un file di dati XML

In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella App_Data, quindi scegliere Aggiungi nuovo elemento.

Nota:

Accertarsi che il file XML venga aggiunto alla cartella App_Data.
Nella finestra di dialogo Aggiungi nuovo elemento scegliere File XML in Modelli Visual Studio installati.
Nella casella Nome digitare Syllabus.
Scegliere Aggiungi.

Nota:
Accertarsi che il file XML venga aggiunto alla cartella App_Data.

Copiare il codice XML nel file, sovrascrivendo il contenuto predefinito.

<?xml version="1.0" encoding="utf-8" ?>
<entries>
    <lecture 
       date="04/02/2005" 
       topic="Integers and Rational Numbers" />
    <lecture 
        date="04/03/2005"
        topic="Equations and Polynomials" />
    <lecture
        date="04/04/2005"
        topic="Roots and Irrational Numbers" />
</entries>

Salvare e chiudere il file XML.

Aggiunta di controlli al form

Quando si aggiungono controlli al form per questa applicazione è necessario tenere presente le indicazioni per la creazione di un'applicazione ad Accesso facilitato riportate di seguito.

Tutte le immagini che forniscono informazioni sull'utente devono avere il testo alternativo descrittivo.
Quando si ricorre alle tabelle, utilizzare l'attributo Title per assegnare i nomi alle colonne e alle righe della tabella. Verificare inoltre che le tabelle abbiano un senso compiuto se lette da sinistra verso destra e dall'alto verso il basso.
Utilizzare tag di intestazioni effettivi anziché testo formattato per supportare le opzioni di formattazione selezionate dell'utente.
Fornire indicazioni utili sul testo dei collegamenti. Se, ad esempio, il testo è "Fare clic qui per le note di Lecture 1", la parte di testo del collegamento "Note di Lecture 1" risulta più utile del testo "Fare clic qui".
Fornire un percorso di navigazione sensibile nella pagina seguendo il normale flusso del testo per la lingua specificata.
Utilizzare l'attributo Title per la maggior parte degli oggetti.

Per aggiungere controlli di Accesso facilitato alla pagina

Passare alla visualizzazione Progettazione.
In Proprietà, impostare le proprietà di DOCUMENT riportate di seguito.
- Impostare Title su "Algebra Class"
- Impostare BgColor su Background.
Digitare Algebra Review Class. nella parte superiore della pagina
Evidenziare il testo da formattare per selezionarlo, quindi scegliere Heading 1 nell'elenco più a sinistra della barra degli strumenti Formato.

Dalla Casella degli strumenti, nel gruppo Standard, aggiungere i controlli riportati di seguito e impostare le proprietà come indicato.

Nota:
Il layout della pagina non è importante.

Controllo	Proprietà	Valore
Image	AlternateText	Algebra equations.
	ImageUrl	URL a un'immagine.
	TabIndex	0
Panel	ID	Lectures
	TabIndex	0
HyperLink (da aggiungere al riquadro Lectures)	ID	Lecture1
	Text	Lecture 1 notes
	AccessKey	1
	href	~/Lecture.aspx
	TabIndex	1
HyperLink (da aggiungere al riquadro Lectures)	ID	Lecture2
	Text	Lecture 2 notes
	AccessKey	2
	href	~/Lecture.aspx
	TabIndex	2
HyperLink (da aggiungere al riquadro Lectures)	ID	Lecture3
	Text	Lecture 3 notes
	AccessKey	3
	href	~/Lecture.aspx
	TabIndex	3
Label	ID	TextbookLabel
	Text	Textbook:
	AssociatedControlID	TextbookLink
Hyperlink	ID	TextbookLink
	Text	Algebra Review, J. A. Smith
	href	~/Lecture.aspx
	TabIndex	4

Fare clic sul controllo Panel, quindi impostare la proprietà GroupingText su Lecture Notes.
Passare alla visualizzazione Origine.
Fare clic all'interno dell'elemento HTML, quindi in Proprietà, impostare lang su en per indicare che la pagina è in lingua inglese.

Il tag dovrebbe risultare analogo al seguente:
```
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
```

Aggiunta di un controllo GridView

Le informazioni sulle lezioni vengono visualizzate in un controllo GridView. Mediante il controllo GridView vengono recuperati i dati dal file XML creato nella sezione precedente.

Per aggiungere un controllo GridView e associarlo al file XML

Passare alla visualizzazione Progettazione.
Trascinare un controllo XmlDataSource nella pagina dal gruppo Dati della Casella degli strumenti.

La collocazione non è importante.

Il file XML viene letto mediante il controllo XmlDataSource e i dati sono resi disponibili ai controlli nella pagina.
Fare clic con il pulsante destro del mouse su XmlDataSource, fare clic su Mostra smart tag, quindi scegliere Configura origine dati nel menu XmlDataSource Tasks.

Verrà visualizzata la finestra di dialogo Configura origine dati.
Nella casella File di dati, immettere ~/App_Data/Syllabus.xml e scegliere OK.
Aggiungere un controllo GridView alla pagina dal gruppo Dati della Casella degli strumenti.
In Proprietà, impostare le proprietà come illustrate nella tabella riportata di seguito.

Proprietà

Impostazione

ID

SyllabusGrid

DataSourceId

XmlDataSource1

TabIndex

9

Proprietà	Impostazione
ID	SyllabusGrid
DataSourceId	XmlDataSource1
TabIndex	9

Aggiunta di titoli alle celle del controllo GridView

Un requisito per l'Accesso facilitato è che le colonne e le celle della tabella HTML presentino titoli. Il controllo GridView esegue il rendering di una tabella HTML in fase di esecuzione. È necessario pertanto accertarsi che le colonne su cui viene eseguito il rendering dal controllo includano i titoli. Per eseguire questa attività verrà scritto il codice che gestisce l'evento RowCreated. Nel gestore eventi, verranno aggiunti gli attributi Title alle celle delle tabelle create dal controllo GridView.

Per aggiungere titoli alle colonne del controllo GridView

In Esplora soluzioni, fare clic con il pulsante destro del mouse sul nome della pagina (Default.aspx) e scegliere Visualizza codice.

Aggiungere il codice riportato di seguito.

Protected Sub SyllabusGrid_RowCreated _
        (ByVal sender As Object, _
        ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _
        Handles SyllabusGrid.RowCreated
        Dim cells As TableCellCollection = e.Row.Cells
        If e.Row.RowType = DataControlRowType.Header Then
            cells(0).Attributes("title") = "Date"
            cells(1).Attributes("title") = "Topic"
        ElseIf e.Row.RowType = DataControlRowType.DataRow Then
            cells(0).Attributes("title") = _
                DataBinder.Eval(e.Row.DataItem, "date").ToString()
            cells(1).Attributes("title") = _
                DataBinder.Eval(e.Row.DataItem, "topic").ToString()
        End If
    End Sub

protected void SyllabusGrid_RowCreated
        (object sender, 
        System.Web.UI.WebControls.GridViewRowEventArgs e)
    {
        TableCellCollection cells = e.Row.Cells;
        if (e.Row.RowType == DataControlRowType.Header)
        {
            cells[0].Attributes["title"] = "Date";
            cells[1].Attributes["title"] = "Topic";
        }
        else if (e.Row.RowType == DataControlRowType.DataRow)
        {
            cells[0].Attributes["title"] = 
                DataBinder.Eval(e.Row.DataItem, "date").ToString();
            cells[1].Attributes["title"] = 
                DataBinder.Eval(e.Row.DataItem, "topic").ToString();
        }
    }

Nella visualizzazione Progettazione fare clic sul controllo GridView, quindi nella finestra Proprietà impostare l'evento RowCreated su "SyllabusGrid_RowCreated".

In questo modo si connette il gestore eventi all'evento in questione.

Test dell'applicazione

In Visual Web Developer è inclusa la convalida dell'Accesso facilitato, ovvero uno strumento mediante il quale è possibile esaminare la pagina Web e determinare se soddisfa i requisiti di Accesso facilitato. Lo strumento consente di esaminare il codice HTML della pagina in fase di progettazione. È inoltre possibile esaminare l'output della pagina che consente di verificare che il markup su cui è stato eseguito il rendering mediante i controlli ASP.NET soddisfi i requisiti di Accesso facilitato.

Per eseguire il test dell'applicazione per l'Accesso facilitato

Accertarsi che la pagina sia in visualizzazione Progettazione.
Scegliere Verifica accessibilità dal menu Strumenti.

Verrà visualizzata la finestra di dialogo Convalida accessibilità.

Nota:

Lo strumento di controllo dell'Accesso facilitato non è disponibile in Microsoft Visual Web Developer Express Edition.
Selezionare le caselle di controllo per gli standard di Accesso facilitato che si desidera cercare e scegliere Validate.

Visual Web Developer consente di esaminare la pagina e quindi di visualizzare un report di errori di convalida, se presente. Tenere presente che mediante il report di convalida dell'Accesso facilitato non è possibile determinare se la tabella di cui verrà eseguito il rendering con il controllo GridView soddisfi i requisiti di Accesso facilitato.
Premere CTRL+F5 per eseguire la pagina.
Eseguire il test dei tasti di scelta.

Per questa applicazione sono stati definiti i tasti di scelta ALT+1, ALT+2 e ALT+3 per i controlli HyperLink. I tasti di scelta consentono di spostarsi ai collegamenti. Premere INVIO per attivare il collegamento.
Disattivare la visualizzazione delle immagini per verificare che il testo alternativo renda utilizzabile la pagina. Per eseguire questa operazione, seguire la procedura seguente:
1. In Microsoft Internet Explorer 6.0 scegliere Opzioni Internet dal menu Strumenti.
2. Nella scheda Avanzate, sotto Elementi multimediali, disattivare le opzioni relative alle immagini.
Per visualizzare il testo alternativo, è necessario aggiornare la pagina.
Disattivare i segnali acustici per verificare che non venga persa alcuna istruzione importante. Per eseguire questa operazione, seguire la procedura seguente:
1. In Internet Explorer 6.0 scegliere Opzioni Internet dal menu Strumenti.
2. Nella scheda Avanzate, sotto Elementi multimediali, disattivare le opzioni relative all'audio.
Visualizzare l'applicazione in un browser che consenta di disattivare i fogli di stile, quindi disattivarli per accertarsi che la pagina sia ancora leggibile.
1. In Internet Explorer 6.0 scegliere Opzioni Internet dal menu Strumenti.
2. Nella scheda Generale scegliere Accesso facilitato per impostare le opzioni relative al foglio di stile.
Utilizzare l'opzione Contrasto elevato di Microsoft Windows per verificare se la pagina è ancora leggibile. Per eseguire il test dell'opzione Contrasto elevato:
1. In Windows, fare clic su Start, scegliere Panello di controllo, quindi Accesso facilitato.
2. Nella scheda Schermo selezionare la casella di controllo Usa Contrasto elevato.
3. Spostarsi tra gli elementi dell'interfaccia utente per verificare che vengano applicate le modifiche apportate ai caratteri e ai colori. Assicurarsi infine che non vengano visualizzati motivi o immagini dietro il testo.
Utilizzare la massima dimensione di carattere supportata, che è disponibile solo quando è selezionata l'opzione Contrasto elevato, e verificare che la pagina sia ancora leggibile. Per eseguire questa operazione, seguire la procedura seguente:
1. In Windows, fare clic su Start, scegliere Panello di controllo, quindi Schermo.
2. Nella scheda Aspetto scegliere Caratteri molto grandi nell'elenco Dimensioni caratteri.
Ridimensionare la finestra del browser e verificarne la leggibilità.
Utilizzare la tastiera per spostarsi nella pagina Web per verificare che l'ordine di spostamento sia sensibile, che il tasto TAB consenta di scorrere tutti i collegamenti e che la combinazione di tasti CTRL+TAB consenta di spostarsi tra i riquadri o le sezioni.
Selezionare tutto il testo e copiarlo negli Appunti per verificare che abbia senso compiuto.

Nota:
Lo strumento di controllo dell'Accesso facilitato non è disponibile in Microsoft Visual Web Developer Express Edition.

Vedere anche

Concetti

Supporto per l'accesso facilitato in ASP.NET

Controlli ASP.NET e accesso facilitato

Cenni preliminari sui pericoli di protezione a cui sono esposte le applicazioni Web

Altre risorse

Web Content Accessibility Guidelines 1.0 (W3C)

Condividi tramite