Rss

Intestazioni HTML e la loro gerarchia

I titoli, voce gerarchia, e contorni di documenti

Recentemente i miei colleghi e io abbiamo discusso intestazioni HTML e voce gerarchia. Questo potrebbe non sembrare qualcosa è necessario spendere un sacco di tempo a discutere, ma ci sono alcune situazioni in cui sembra molto difficile trovare una soluzione senza compromessi.

L’importanza delle voci

In primo luogo una piccola deviazione sulla funzione e l’importanza delle voci in HTML. Se si conosce già il motivo per cui titoli sono importanti, sentitevi liberi di passare alla sezione successiva.

intestazioni HTML, creati con gli elementi H1-H6, sono molto utili e devono essere utilizzati per tutto ciò che sembra visivamente o si comporta come un titolo. Questo è in parte perché è la scelta giusta semanticamente, in parte perché può aiutare il posizionamento nei motori di ricerca. Ma la ragione più importante è che l’utilizzo di titoli reali migliora l’accessibilità.

utenti di screen reader, per esempio, possono utilizzare le scorciatoie da tastiera per passare da voce a voce in un documento. Per vedere in azione, controlla importanza di HTML intestazioni per l’accesso facilitato, un video che mostra come un utente di screen reader si sposta un documento saltando da una rubrica all’altra. Allo stesso modo, alcuni browser consentono agli utenti di tastiera solo per usare le scorciatoie per saltare da voce a voce, accelerando la navigazione attraverso un documento.

Quindi ci sono molte ragioni per usare intestazioni, e di utilizzare in modo corretto.

Requisiti per una buona struttura del documento

L’esito delle discussioni che abbiamo avuto presso l’ufficio è un certo numero di requisiti o dichiarazioni, alcuni basati su ciò che “si sente bene”, gli altri sulla base di linee guida di accessibilità e le migliori prassi generale. Che cosa si riduce a sono le seguenti regole generali:

Ogni documento deve avere una struttura intestazione logico che inizia a livello 1 e non saltare nessuno livelli
Tutto ciò che appare visivamente come un titolo deve essere contrassegnato come un vero e proprio titolo
Il titolo del contenuto principale del documento dovrebbe essere un titolo di livello 1
Ci dovrebbe essere un solo livello 1 titolo in ciascun documento
La domanda non sono stato in grado di trovare una risposta chiara a questo è: che cosa fate quando rubrica principale del documento non è il primo testo che deve essere marcata con l’intestazione? Inserire una H1 “fittizi” voce nella parte superiore del documento? Lasciare avviare il documento con un titolo h2 e rinunciare alla creazione di una struttura del documento perfetto? Qualcos’altro?

guida Intestazione

Alla ricerca di una guida, ho guardato quello che WCAG 2.0 ha da dire, e ha fornito i seguenti tra i documenti che descrivono le tecniche per le WCAG 2.0.

Per facilitare la navigazione e la comprensione della struttura complessiva del documento, gli autori dovrebbero usare voci che sono correttamente nidificati (ad esempio, h1 seguito da h2, h2 seguito da h2 o h3, h3 seguita da h3 o h4, etc.).

G141: Organizzare una pagina utilizzando intestazioni
In questo esempio, il contenuto principale della pagina è nella colonna centrale di una pagina 3 colonne. Il titolo del contenuto principale corrisponda al titolo della pagina, ed è contrassegnato come h1, anche se non è la prima cosa sulla pagina. Il contenuto nella prima e nella terza colonna è meno importante, e contrassegnato con h2.

H42: Usando H1-H6 di individuare intestazioni
Aggiornamento: Roberto Scano ha sottolineato che queste tecniche si riferiscono a diverse WCAG 2.0 criteri di successo con diversi livelli di conformità.

H42: Usando H1-H6 per identificare intestazioni è una tecnica sufficiente per il criterio di successo 1.3.1 (Informazioni e Relazioni), che è livello A, mentre G141: Organizzare una pagina utilizzando intestazioni è una tecnica sufficiente per il criterio di successo 2.4.10 (Sezione I titoli), che è livello AAA.

Quindi, secondo WCAG 2.0 è più importante per marcare intestazioni come intestazioni di avere una gerarchia titolo perfetto.

Le opzioni possibili

Sulla base di questo posso vedere due opzioni praticabili:

Rinunciare al primo titolo necessariamente essere un H1, e utilizzare intestazioni di livello inferiore prima il titolo del documento (come il secondo esempio WCAG 2.0 fa).
Assicurarsi che il logo dell’organizzazione è abbastanza presto nel codice per essere sempre in grado di servire come primo titolo e renderlo un H1. Utilizzare intestazioni di livello inferiore per le intestazioni che si frappongono tra il logo e il titolo del documento, che si rendono anche un titolo H1.
Sono appoggiato verso l’opzione 2, che potrebbe dare un sito con un layout a tre colonne il seguente markup di base e dirigendosi struttura:

Leave a Reply

Your email address will not be published. Required fields are marked *