Back to the original French page Read this page in Italian by Google Translation Read this page in Portuguese by Google Translation Read this page in English by Google Translation Read this page in German by Google Translation Read this page in Spanish by Google Translation Read this page in Arabic by Google Translation Read this page in Hebrew by Google Translation

Dare una struttura semantica per le pagine web

Vai al Inizio dei contenuti senza utilizzare la barra di consultazione e condivisione Come utilizzare la barra di consultazione e condivisione Ascolta il contenuto principale di questa pagina
Stampa Stampa il contenuto principale di questa pagina Inviare Invia il contenuto principale di questa pagina Quota Condividi questa pagina su TwitThis Condividi questa pagina su Facebook Pubblica l'articolo su Wikio Condividi questa pagina su Google Condividi questa pagina su LinkedIn Condividi questa pagina su Digg Condividi questa pagina su del.icio.us Condividi questa pagina su Netvibes

Attenzione: La versione originale di questo documento è Creazione struttura semantica . La traduzione francese è stata fatta da Ideose come parte di un accordo tra WebAIM e Ideose .

Nota: Vedere la pagina dei documenti in materia di accessibilità web per un elenco di tutti i documenti tradotti. Altre risorse sull'accessibilità web sono elencati anche nel portale digitale accessibile .

La natura di HTML

Gli autori di HTML erano scienziati che cercavano un modo per condividere documenti sulla fisica delle particelle. Indossavano poco interesse per la forma visiva del documento esatto visualizzata sullo schermo di un computer. In realtà, HTML è stato originariamente progettato per soddisfare una separazione tra la struttura dei contenuti e layout grafico. L'intenzione era di creare una pagine World Wide Web che possono essere visualizzati in ogni sistema esistente e del browser, inclusi browser che "leggono" le pagine web di testo per gli utenti con disabilità visive - e che potrebbe essere interpretato da motori di ricerca e analisi.

Gli inventori del Web non realizzare il suo potenziale per la visualizzazione grafica. In questo modo, il codice HTML non è stato progettato con tali considerazioni. Erano così ansiosi di rendere i documenti utilizzati dalle macchine che produce macchine per i documenti solo (o fisici delle particelle) vorrebbe leggere. Concentrandosi esclusivamente sulla logica strutturale dei documenti, hanno ignorato la necessità di logica visiva della grafica e tipografia. Questa mancanza iniziale di Web esame visivo è causa di stress per i web designer quando si desidera ottenere un layout grafico specifico per le proprie pagine web. Questa esigenza per la formattazione è la ragione per cui le aziende di software hanno cominciato a ignorare le norme di navigazione HTML e autorizzate funzionalità aggiuntive nei loro browser.

Ad esempio, la maggior parte dei progettisti evitare l'uso di tag HTML standard per i titoli di paragrafo ( <h1> , <h2> , ecc.) perché mancano di finezza visiva: nella maggior parte dei browser Web, questi tag mostrano titoli assolutamente troppo grandi ( <h1> , <h2> ) o ridicolmente piccolo ( <h4> , <h5> , <h6> ). Ma questi tag HTML non sono stati creati con la preoccupazione della loro resa visiva. Il loro unico obiettivo è quello di designare la héarchique livello di un titolo in modo che i lettori umani e motori di ricerca può facilmente leggere un documento e determinare la sua struttura di informazioni. E 'solo involontariamente che gli sviluppatori del browser hanno dato diverse dimensioni e livelli di grasso in ogni tag del titolo del paragrafo, anche se queste dimensioni tendono ad essere limitate nel codice HTML.

Utilizzare intestazioni di paragrafo per strutturare il contenuto

Nonostante la natura del Web e dei grandi cambiamenti di utilizzazione, un modo per strutturare un documento in un mezzo visivo), è importante che il contenuto Web è progettato con una buona struttura. Una migliore integrazione con i fogli di stile (CSS) nelle versioni più recenti dei browser Web, gli sviluppatori possono modificare l'aspetto di elementi strutturali per soddisfare le loro scelte progettuali e la visualizzazione.

Esempio

Guardate la struttura del contenuto di una delle tue pagine web utilizzando il validatore W3C . . Inserisci l'URL della pagina Web nella casella di testo, selezionare Mostra Outline, e quindi scegliere Convalida questa pagina. Per ora, ignorare gli errori HTML che vengono visualizzati e scorrere la pagina per vedere la mappa visualizzata sulla pagina web. Vedrete una breve panoramica della struttura del contenuto della pagina web, come definito dai tag ( <h1> - <h6> ). Se il risultato non sembra un vero e proprio piano, è probabile che i tag non sono usati correttamente (o non c'è faro di titoli di paragrafo).

Gli utenti di screen reader e altre tecnologie assistive sono in grado di consultare le pagine Web che utilizzano la struttura. Ciò significa che l'utente può leggere o accedere direttamente al di alto livello (elementi <h1> ) e quelli del secondo livello ( <h2> ), poi a quelle del terzo livello ( <h3> ) e così via. La visualizzazione o l'ascolto di questo piano dà loro una buona idea del contenuto e la struttura della pagina.

Le pagine dovrebbero essere strutturati gerarchicamente, il primo livello di sicurezza ( <h1> ) è la più grande (di solito la pagina del titolo o documento), poi il secondo livello di sicurezza ( <h2> , titoli di solito dal vivo capitoli), poi i titoli di terzo livello ( <h3> , sub paragrafi dei capitoli) e così via. Tecnicamente, come un livello inferiore, devono seguire un livello di sicurezza superiore. Il diagramma seguente mostra la struttura dei titoli in titoli che deve contenere una pagina web. In realtà, rappresenta la gerarchia del contenuto principale di questa pagina con diversi livelli di intestazione punto dal più alto al più basso. È possibile fare clic su ogni titolo per accedere alla sezione corrispondente in questa pagina.

Utilizzare correttamente intestazioni di paragrafo

Non utilizzare la formattazione del testo, come la dimensione del carattere o grassetto per dare l'aspetto visivo alle voci paragrafo - utilizzare i tag standard di titolazione ( <h1> - <h6> ) in tutti i contenuti. Tecnologie assistive e browser sono basate letteralmente nel codice della pagina per determinare la sua struttura. Elementi che sono in grassetto o visualizzato in un carattere più grande, non vengono interpretati come elementi strutturali.

Inoltre, non utilizzare i tag per la titolazione solo creare effetti visivi. Ad esempio, se si vuole evidenziare o sottolineare un elemento di contenuto che non è un titolo (come fatto con la frase precedente), non usare i tag per fare titolazione. Invece, utilizzare i tag per la dimensione dello stile del font, grassetto o il corsivo. Se si vuole sottolineare qualcosa, è necessario utilizzare il tag strong (enfasi) al posto di b e tag em (in corsivo) al posto di i . Tags b ed i 2 che contengono le informazioni solo visivo, mentre il strong e em fornire informazioni semantiche. Visivamente, il risultato è lo stesso, ma gli sviluppatori dovrebbero utilizzare gli elementi HTML appropriati. et sélectionnez l'option Utiliser « strong » et « em » à la place de « b » et « i » . In Dreamweaver, è possibile selezionare Modifica> Preferenze> Generale e selezionate Usa "forte" e "em" invece di "b" e "i".

Utilizzare correttamente le liste

Elenchi HTML - ul , ol e dl - anche servire a trasmettere una struttura gerarchica del contenuto. Ciascuna di queste liste hanno anche norme relative al loro uso. La puntato (lista non ordinata) dovrebbe essere utilizzato quando non vi è alcuna sequenza o ordine di importanza tra gli elementi della lista. La lista ordinata suggerisce alcuni elementi progressione o la sequenza nella lista. L'elenco delle definizione dovrebbe essere utilizzato in modo esplicito per la presentazione di alcune definizioni della struttura. Come titolazione con i tag, le liste di tag deve essere utilizzato in modo corretto secondo la loro natura. Il ordinati e non ordinati elenchi dovrebbero sempre includere le voci dell'elenco. Le liste di definizioni devono essere sempre le descrizioni di definizioni. Liste vuote non sono validi in HTML. Gli elenchi non dovrebbe mai essere usata per altri motivi o per il layout. Liste nidificate devono essere correttamente codificate.

WebAIM è un'iniziativa di:
Centro per persone con disabilità (CPD) Utah State University

Copyright 1999-2009 WebAIM

Inizio pagina