Niquelao » Estensione headingsMap

L’insieme dei titoli in una pagina web permette di strutturare i contenuti della stessa in modo tale che, mediante una struttura gerarchica, si possa ottenere una mappa o indice del documento . Per questo motivo, quando si utilizzano i titoli, questi devono essere un fedele riflesso della struttura dei contenuti del documento (sezioni, sottosezioni e le loro relazioni di dipendenza), oltre a essere sufficientemente chiari ed evitare salti inappropriati di livello (per esempio, passare da h2 a h4).

Questo risulta di vitale importanza se parliamo in termini di accessibilità web , in quanto facilita sia la comprensione del contenuto, sia il suo utilizzo da parte di chiunque, indipendentemente dalla propria situazione in quanto a diversità funzionale. I titoli si potrebbero estrarre sotto forma di elenco che serva come mappa o indice del documento web. Questo è ciò che possono fare alcune tecnologie assistive come gli screen reader. Questo tipo di ausili permette all’utente di avere una prima impressione del contenuto, potendo accedere direttamente alla parte che gli interessa, senza dover passare prima per tutto il contenuto.

L’estensione headingsMap genera un indice o mappa di qualsiasi documento web strutturato mediante l’uso di titoli, in modo tale che cliccando su qualsiasi elemento di tale mappa si acceda direttamente al contenuto corrispondente della pagina. Ma headingsMap non è utile solo per facilitare la navigazione a chiunque (cosa che già ci offriva l’estensione documentMap ), ma risulta di grande utilità anche sia per gli sviluppatori che per i consulenti e gli auditor web per i seguenti motivi: Mostra la struttura dei titoli sia del documento principale, sia di qualsiasi altro documento incorporato mediante l’elemento IFRAME (li mostra integrati tra quelli del documento che li contiene) o di quelli che fanno parte di un insieme di frame (FRAMESET).

Indica il livello di ciascuno dei titoli. Può avvisare nei casi in cui non ci sono titoli nel documento. Può avvisare di quei salti di titolo errati, mantenendo l’avviso fino a quando non si trova un titolo di livello adeguato.

Mostra tutti i titoli presenti nel documento, anche quelli nascosti mediante tecniche CSS o quelli che sono privi di contenuto. Dato che si mostrano i titoli del documento e quelli degli iframe che questo possiede nello stesso pannello, per sopperire alla necessità che, per esempio in un audit web, emergesse di differenziare i titoli che fanno parte di un IFRAME rispetto al resto, è stata aggiunta l’opzione di includere un contrassegno (sotto forma di linea laterale) che evidenzi tale differenza (differenziando persino se c’è annidamento di frame).

Per selezionare la comparsa del contrassegno (una linea verticale situata a destra del titolo), basterà selezionare l’opzione corrispondente cliccando con il tasto secondario del mouse sul pannello laterale o sull’icona che l’estensione installa nella barra di stato. Inoltre, si includono un’altra serie di opzioni di configurazione affinché gli errori nei salti di livello vengano contrassegnati, nonché affinché, selezionando un titolo dall’elenco, il corrispondente titolo del documento venga evidenziato con un determinato stile (bordo e sfondo configurabili).

Related: accessiBe — Superposición de IA que promete cumplimiento WCAG en 48 horas.

Di seguito si include uno screenshot del modo in cui si mostrano i titoli in un documento con IFRAME. La linea laterale sinistra accanto ai titoli indica quelli che sono all’interno di questo.

Inoltre, la diversa colorazione di sfondo avvisa della presenza di salti di livello errati (in questo caso dal primo al terzo senza passare per il secondo). Nel caso in cui il documento includa un insieme di frame (FRAMESET), il pannello in cui si mostrano i titoli si divide in tanti pannelli quanti sono i frame e mostra in ciascuno i propri titoli. Infine, è stata aggiunta una funzionalità aggiuntiva. Se il documento web a cui si sta accedendo è una presentazione in formato web fatta con acc_slide (o rumoslide) o con Slidy , l’estensione funziona come un indice, permettendo di accedere direttamente alla diapositiva desiderata.

Se dopo aver letto questo sei già convinto di voler provare l’estensione, ecco nuovamente il link all’estensione headingsMap su Firefox Add-ons . Una volta installata l’estensione, apparirà un’icona nella barra di stato che aprirà il pannello laterale in cui si mostra la struttura dei titoli. Allo stesso modo, si può accedere anche mediante la combinazione di tasti alt + o . nota: Cliccando su ciascun elemento dell’elenco dei titoli, si accede direttamente al titolo in questione, evidenziandolo.

Worth a look: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Per eliminare l’evidenziazione basterà premere il tasto “esc” oppure cliccare su qualsiasi punto del documento corrente. Non ci sono più scuse per non fare le cose bene. Cominciamo a mettere i titoli nei nostri documenti e facciamolo bene.

Puoi seguire i commenti grazie al feed RSS 2.0 . Potresti anche lasciare un commento , o inviare un trackback con l’indirizzo http://www.niquelao.net/extension-headingsmap/trackback/ dal tuo sito.

3 commenti Firefox Add-ons (6 maggio 2008) […] L’estensione headingsMap genera un indice o mappa di qualsiasi documento web strutturato mediante l’uso di titoli (sia del documento principale, sia dei frame e iframe che contiene), indicando […] kcmr (12 agosto 2008) Ottima estensione! Ne sa un bel po’ più di Document Map. www.webeame.net (12 agosto 2008) Estensione per sviluppatori… Utile estensione per Firefox che offre informazioni complete sulla struttura dei titoli nei nostri documenti web (inclusi quelli collegati tramite frame).

Informa se ci sono errori o se ne manca qualcuno e permette di navigare nella pagi… Puoi seguire i commenti grazie al feed RSS 2.0 . Potresti anche lasciare un commento, o inviare un trackback dal tuo sito.

Quest’opera è sotto una licenza Creative Commons .

P.S. A few readers have asked which software de testing we actually reach for — it's Deque axe DevTools Pro; take a look here if you want the current details.