Caratteristiche di accessibilità aggiuntive di Dreamweaver MX e MX 2004

Traduzione da http://webaim.org/techniques/dreamweaver/

Questa lezione descrive le nuove caratteristiche di accessibilità di Dreamweaver MX e MX 2004.  Non copre tutte le caratteristiche di accessibilità disponibili di Dreamweaver,  ma mette a fuoco le nuove opzioni.  Per le informazioni sulle versioni precedenti di Dreamweaver,  consultare i tutoriali precedenti in http://webaim.org/techniques/dreamweaver/dreamweaver4.

 

Introduzione

Dreamweaver MX e MX 2004 ,  sviluppato da Macromedia, è oggi una delle applicazioni di sviluppo per il web più popolari e potenti. Macromedia ha notevolmente migliorato le caratteristiche di accessibilità di Dreamweaver MX 2004 rispetto alle versioni precedenti.

Nuove opzioni di accessibilità (se abilitate)

MX e MX 2004 ora prevedono che gli sviluppatori siano aiutati con specifiche richieste, quando inseriscono elementi web che possono avere bisogno di attributi per l’accessibilità. Purtroppo per default le opzioni di accessibilità di Dreamweaver sono disabilitate. Per abilitarle selezionare il menu Edit… >Preferences… >Accessibility e selezionare le caselle Form objects, Frames, Media e Images. Una volta selezionate, Dreamweaver visualizzerà un prompt per richiedere gli attributi di accessibilità ogni volta che uno degli elementi indicati viene inserito in un documento.

Resoconto di accessibilità

Dreamweaver può ora convalidare seguendo i più comuni standard di accessibilità e dare un feedback per quanto riguarda l’accessibilità del contenuto delle pagine web. Ai resoconti si accede selezionando Site…>Reports.

Riferimenti sull’accessibilità

Fra gli altri eccellenti materiali di riferimento inclusi in Dreamweaver, si trova ora una guida di riferimento sull’accessibilità. I testi sono stati forniti da UsableNet (http://www.usablenet.com/). Purtroppo, il tipo di contenuto è piuttosto tecnico e non è molto utilizzabile a meno che non si abbia già una certa familiarità con l’HTML e le tecniche di accessibilità in generale.

Interfaccia-autore accessibile

Macromedia ha migliorato l’accessibilità dell’interfaccia dell’editor, per permettere anche agli utenti che usano screen-reader di creare pagien per il web. La maggior parte dei dialoghi, dei menu ed altri elementi dell’interfaccia ora sono accessibili ai lettori di schermo (screen-reader).

HTML conforme agli standard

Dreamweaver ora produce codice HTML maggiormente conforme agli standard. Anche se ci sono ancora alcune limitazioni, il codice è molto più pulito e aderente alle specifiche di HTML e XHTML del W3C (http://www.w3.org/MarkUp/). Il sistema grafico per realizzare codice include molti elementi di accessibilità (ad esempio il testo alternativo per le immagini) ed è più compatibile con le tecnologie emergenti e le tecnologie assistive.

Creazione di contenuto accessibile

Riguardo alla visualizzazione delle finestre di dialogo per l’accessibilità:

  1. Le preferenze di accessibilità devono essere abilitate;
  2. Occorre lavorare in modalità “Design”. Se si lavora con la visualizzazione del codice (modalità “Code”), o se la finestra del codice ha il focus del cursore quando si inseriscono gli elementi, i prompt per l’accessibilità non vengono visualizzati.

Testo alternativo per le immagini

Con le opzioni di accessibilità abilitate nelle preferenze, Dreamweaver chiede all’utente di specificare il testo alternativo ogni volta che un’immagine è inserita in un documento.

Nella casella “Alternate text” scrivere un testo appropriato equivalente al significato o alla funzione dell’immagine. Se l’immagine è complessa si può specificare anche una URL o un collegamento che porti ad una pagina web con una “descrizione lunga” (attributo “longdesc” del tag “img”). Se il campo “Long description” viene lasciato vuoto, allora l’attributo “longdesc” non verrà aggiunto all’immagine. IN alternativa, se l’immagine non apporta nè contenuto nè funzionalità alla pagina, si può scegliere il valore <empty> nella casella del testo alternativo e si otterrà nel codice il tag “alt” vuoto (alt =””).

Una volta che l’immagine è stata aggiunta al documento, il testo alternativo può essere aggiunto o modificato successivamente usando il pannello delle proprietà.

Come nel prompt dell’accessibilità, nel Pannello delle proprietà si può selezionare <empty> dal menu a discesa dell’Alt per lasciare vuoto il testo alternativo dell’immagine.

“Longdesc” invece non può essere aggiunto all’immagine usando il Pannello delle proprietà. Per aggiungere l’attributo longdesc ad un’immagine, occorre re-inserire l’immagine e completare la descrizione nelle opzioni di accessibilità oppure aggiungere l’attributo longdesc intervenendo sul codice (passando nella modalità della vista Codice).

Dreamweaver inoltre fornisce un’opzione per il testo alternativo degli hotspots delle mappe immagine realizzate lato client.

Vedere i tutoriali sulle immagini alla pagina http://webaim.org/techniques/images/ per maggiori dettagli su come renderle accessibili.

Etichette nei moduli

Con le opzioni di accessibilità abilitate nelle preferenze, Dreamweaver richiederà di inserire le appropriate etichette quando si creano moduli e form nelle pagine.

Semplicemente, per ogni campo inserito basta scrivere la rispettiva etichetta nella Finestra di dialogo che compare. Si può selezionare lo stile dell’etichetta: inclusa (wrap), attaccata (attach) tramite l’attributo “for”, o nessuna etichetta. I risultati migliori si ottengono selezionando l’etichetta “attaccata  usanto l’attributo for”. Ciò permette che l’etichetta sia posizionata meglio all’interno della pagina e risulti più compatibile con gli attuali screen reader. Si può anche scegliere di posizionare l’etichetta della forma prima o dopo la rispettiva casella. La finestra di dialogo per inserire gli attributi di accessibilità inoltre fornisce le opzioni per specificare il tasto di scelta rapida e l’indice di tabulazione, opzioni utili ma non indispensabili per l’accessibilità ed inoltre poco conosciuti.

Per aggiungere le etichette agli elementi di un form già esistente all’interno di una pagina Web, ci sono tre metodi che possono essere usati:

  1. Cancellare e reinserire gli elementi, agigungendo l’etichetta adatta per mezzo della finestra di dialogo.
  2. Aggiungere le informazioni ed i tag appropriati, direttamente nel codice.
  3. Selezionare sia l’etichetta che l’elemento del form, e selezionare Form… >Label… Affinchè questo metodo funzioni, l’etichetta e la casella devono essere adiacenti. Quando si usa questa soluzione, Dreamweaver racchiude l’etichetta e la casella con i “label tag”, limitando la possibilità di spostare l’etichetta e inoltre non è supportato da tutti gli screen reader.

Dreamweaver erroneamente fornisce la finestra di dialogo dell’etichetta anche quando si inserisce nel form un pulsante (submit o reset) o un’immagine (type=image). Nessuno di questi elementi dovrebbe avere etichetta. Uno screen reader leggerà l’attributo “value” del pulsante e l’attributo alt dell’immagine; entrambi si inseriscono usando il pannello delle proprietà.

Vedere le istruzioni sulla creazione di Form in http://webaim.org/techniques/forms/  per maggiori dettagli su come renderli accessibili.

Accessibilità delle tabelle di dati

Ci sono tre principii fondamentali per rendere le tabelle di dati accessibili anche a chi usa screen-reader:

  1. Intestazioni (headers) definite nella tabella
  2. Assegnare un significato (scope) alle intestazioni di riga e/o colonna
  3. Per tabelle complesse, assegnare gli attributi “headers” e “ID” alle intestazioni e alle celle.

L’interfaccia visiva di Dreamweaver supporta l’opzione 1 (intestazioni), parzialmente supporta l’opzione 2 (che assegna significato ) e non supporta l’opzione 3. Vedere le Tabelle d’istruzione in http://webaim.org/techniques/tables/ per approfondire queste tecniche.

Dreamweaver supporta due modi per indicare le intestazioni della tabella. In primo luogo, se la tabella già esiste, si possono identificare le intestazioni della tabella selezionando una cella (o una riga o una colonna) e poi selezionare o deselezionare l’opzione Header (intestazione) nel Pannello delle proprietà.

In secondo luogo, se le opzioni di accessibilità sono abilitate nelle preferenze, viene presentata una finestra di dialogo nel momento in cui la tabella viene inserita. Si può allora scegliere se la tabella non ha intestazioni (None), se desideriamo mettere le intestazioni di riga (Left), le intestazioni di colonna (superiori), o intestazioni di colonna e di riga (both).

Dreamweaver indicherà le caselle segnate come intestazioni utilizzando il tag <th>.

IMPORTANTE: Se la tabella che si sta inserendo non è una tabella di dati, non selezionare alcuna delle opzioni di accessibilità, poichè le tabelle generiche non hanno bisogno di queste caratteristiche supplementari di accessibilità.

Quando si usa la finestra di dialogo di accessibilità, per selezionare le intestazioni della tabella, Dreamweaver inserirà appropriatamente l’attributo“scope”, per esempio scope=col o scope=row.

Se abbiamo specificato che la tabella ha intestazioni di riga e di colonna, selezionando “both”, allora Dreamweaver indicherà la cella in alto a sinistra come intestazione di colonna. In alcuni casi, questa cella può invece essere un’intestazione di riga oppure non essere affatto un’intestazione. Accertiamoci di aver rimosso o cambiato l’attributo per questa cella agendo nella modalità di visualizzazione del codice, per armonizzare correttamente la disposizione della tabella di dati.

L’unico modo per assegnare l’attributo“scope” alle tabelle che già esistono in un documento è quello di aggiungerlo manualmente nel codice. Per le tabelle complesse che hanno intestazioni che separano righo o colonne, e per i quali lo scope non è sufficiente, è necessario aggiungere le intestazioni e l’identificativo nel codice. L’interfaccia visiva non supporta l’aggiunta di headers id.

La finestra di dialogo di accessibilità per le tabelle, inoltre permette l’aggiunta di Titolo (caption) e Sommario (summary), ciascuno dei quali fornisce informazioni supplementari sul contenuto della tabella. Nella maggior parte dei casi questi devono essere specificati.

Titoli dei frame

Se l’opzione di accessibilità per le pagine è regolata all’interno delle preferenze, Dreamweaver richiederà i titoli della struttura di frame (frameset) quando un nuovo documento di tipo frameset è generato.

Il titolo dovrebbe essere una descrizione sommaria del contenuto del frame o della sua funzionalità. Queste informazioni saranno lette da uno screen-reader per identificare il frame. Il dialogo sugli attributi di accessibilità della della struttura a frame sarà visualizzato soltanto quando viene generato un nuovo documento con frameset (File… >New… >Framesets…) ma non verrà più visualizzato se si modifica un documento esistente all’interno di un frameset (Modify… >Framesets… >Split frame…).

Si può anche modificare il contenuto della parte “noframes” selezionando Modify… >Framesets… >Edit Noframes Content.

Consultare le istruzioni in http://webaim.org/techniques/frames/ per maggiori particolari su come rendere accessibili i frameset.

Risorse supplementari

Copyright (c) 1998-2004 WebAIM. All rights reserved.

Terms of use: All documents on this Web site may be reproduced and distributed in print or electronic format only if offered at no cost to recipients and as long as full credit is given to WebAIM, including a link to the WebAIM Web site, and as long as this Terms of Use notice remains intact.