Share
La specifica HTML descrive sei elementi di intestazione: h1, h2, h3, h4, h5, e h6. Il numero in ciascuno di questi elementi di titolo riflette la sua priorità, con h1 essendo il più generale e h6 essendo il più specifico.
Questa è una cosa importante da sapere! Il sondaggio di Screen Reader di WebAIM 2017 ci dice che la navigazione attraverso le intestazioni è il modo più importante in cui le persone che fanno affidamento sulla tecnologia assistiva trovano le informazioni. Per questo motivo, è importante creare correttamente le intestazioni del tuo sito web.
Questo tutorial fa parte dell'accessibilità Web: la Guida completa all'apprendimento, in cui abbiamo raccolto una serie di tutorial, articoli, corsi e ebook, per aiutarti a capire l'accessibilità web dall'inizio.
Prima di entrare nel nocciolo duro di come funziona la tecnologia assistiva, c'è un motivo per cui i nostri supporti cartacei utilizzano elementi come capitoli, sezioni e sottosezioni e interruzioni di scena. Dividere il contenuto in blocchi rende più facile capire, digerire, conservare e fare riferimento.
Pezzi di contenuto, dal quotidiano The GuardianMentre il web non è stampato, prende in prestito tutte le cose buone da esso: gli elementi di intestazione HTML sono analoghi a queste convenzioni di stampa. È una di quelle cose che tutti danno per scontato, ma aiuta un sacco di persone. Le preoccupazioni cognitive sono diffuse e superano ogni altra forma di disabilità. Raggruppare il contenuto in blocchi logici aiuta tutti, da persone che hanno una condizione biologica come la demenza a persone con disabilità situazionale come la privazione del sonno o l'apprendimento di un'abilità completamente nuova.
Alcuni tipi di tecnologia assistiva (inclusi, ma non limitati a, lettori di schermo) consentono alle persone di passare da una voce all'altra su una pagina. È l'equivalente di ciò che le persone che non usano la tecnologia assistiva fanno ogni giorno, girando intorno a una pagina per ottenere il senso generale di esso, fermandosi quando trovano le informazioni che stanno cercando.
Alcune tecnologie assistive possono prendere queste intestazioni e trasformarle in una lista ordinata. Questo elenco può essere utilizzato per determinare rapidamente il significato generale della pagina.
Elenco dei titoli generato sulla pagina di WikipediaSe non si mantiene una sequenza logica, ad esempio se si passa dal livello 1 a quello 3 senza dichiarare un livello di intestazione tra due, è possibile creare un'esperienza potenzialmente confusa e decisamente fastidiosa per la persona che si affida alle intestazioni per navigare. Questa lacuna nella sequenza logica imporrà all'utente, costringendoli a utilizzare altri metodi, più dispendiosi in termini di tempo e sforzo, per determinare la logica della struttura complessiva della pagina (se presente) e se il contenuto di cui hanno bisogno è effettivamente presente sulla pagina.
Un'altra cosa importante che possiamo fare è assicurarci che ci sia solo uno titolo di primo livello per pagina. Questa intestazione dovrebbe descrivere il punto principale del contenuto della pagina. Ad esempio, una pagina sulla storia della pasticceria francese potrebbe avere un titolo di primo livello scritto in questo modo:
La storia della pasticceria francese
...
Sfortunatamente, esiste un equivoco sul fatto che sia possibile utilizzare i titoli di primo livello all'inizio di ogni elemento di sezione del contenuto in una pagina, confidando nel browser per capire il resto tramite l'Algoritmo della struttura del documento. Questo algoritmo è una finzione speculativa, al momento della pubblicazione di questo articolo deve ancora essere implementata da qualunque browser. Per questo motivo, dobbiamo onorare la priorità dei collegi elettorali e utilizzare gli altri elementi di intestazione.
I titoli dal livello due al sesto dovrebbero seguire l'intestazione di primo livello e essere creati in ordine sequenziale che descriva i principali punti di discussione del contenuto della pagina.
Ad esempio, questa è la struttura di intestazione per questo articolo:
Leggendo questa lista puoi determinare rapidamente in cosa consiste questo articolo. Abbastanza pulito, eh?
L'altra cosa che vale la pena sottolineare è che le intestazioni, analogamente ai formati gerarchici come JSON, possono essere annidate all'interno di altre intestazioni, purché procedano logicamente. All'interno di un'intestazione di secondo livello è possibile utilizzare più titoli di terzo livello. Ciascuna di queste sottovoci può, a sua volta, avere sottotitoli di quarto livello nidificati.
Quando hai finito con un argomento puoi chiudere le intestazioni annidate. Questo è l'unico posto in cui i livelli di intestazione "saltando" sono accettabili: hai finito di discutere un concetto specifico e tornare a un argomento più generale.
Accentsconagua
h1 La storia della pasticceria franceseh2 Momenti importantih3 Il 16 ° secoloh4 Sfogliah4 Oubliesh3 Il 17 ° secoloh4 Pasticceria sfogliatah4 Panna montatah5 Lo chef del Principe di Condéh3 Il 18 ° secoloh4 macaronsh3 Il 19 ° secoloh3 Il 20 ° secoloh2 Persone importantih3... Questo esempio dimostra come sia valido avere un titolo di quinto livello (lo chef del Principe di Condé) seguito da un titolo di terzo livello (Il XVIII secolo), a condizione che le intestazioni dei genitori siano in ordine sequenziale. Se un'intestazione di terzo livello avesse preceduto l'intestazione di quinto livello, sarebbe stata invalida.
L'utilizzo di troppi titoli può creare un'esperienza travolgente per una persona che fa affidamento su uno screen reader per navigare. All'inizio questo potrebbe sembrare un po 'contro-intuitivo, considerando che ti ho appena detto quanto siano importanti i titoli come aiuto alla navigazione.
Pensala in questo modo: tanto quanto troppe opzioni di navigazione visiva su una pagina possono influenzare negativamente la concentrazione e l'attenzione di una persona, troppi titoli creano "rumore" che distrae e offusca il punto principale che stai cercando di trasmettere.
Non esiste una regola fissa per quanti titoli sono troppi. Dipende interamente da cosa è il contenuto e da quanto è presente. Ad esempio, una ricetta può richiedere solo il nome del piatto, i suoi ingredienti e le istruzioni, mentre un documento accademico può richiedere una ripartizione molto più sfumata.
Una buona struttura di intestazione va ben oltre le persone che usano la tecnologia assistiva. Poiché i titoli hanno un significato semantico, altri servizi possono collegarsi a questa descrizione programmatica del contenuto e ricontestualizzarlo in vari modi di facile utilizzo. Ad esempio, ecco cosa fa il motore di ricerca Bing con pagine ben strutturate:
Risultato del motore di ricerca BingProprio come i lettori di schermo, servizi come Google Docs e Dropbox Paper generano automaticamente un elenco ordinato di titoli per consentirti di comprendere e navigare rapidamente un documento. Molti elaboratori di testi possono anche generare rapidamente un sommario dei contenuti aggiornato dinamicamente, un'attività altrimenti noiosa e dispendiosa in termini di tempo. E grazie all'interoperabilità dell'HTML, possiamo persino ricreare questo comportamento di navigare per voce come un'estensione del browser!
Una cosa che spesso dimentichiamo è che le classi CSS possono essere applicate agli elementi di intestazione, proprio come qualsiasi altro elemento HTML dichiarato all'interno corpo.
La ragione per cui sto citando questo è che gli elementi di intestazione sono comunemente usati a causa di come loro Guarda("Ooh! Mi piace il colore e il carattere del h3, Lo userò. "), E non quale priorità del contenuto loro descrivere (Brioche è una specie di Viennoiserie). È un problema diffuso.
In un mondo idealizzato di purezza accademica, onoreremo l'onestà materiale degli elementi di intestazione dimensionandoli e modellandoli secondo la gerarchia che descrivono.
Tuttavia, questo è il mondo reale. I moderni siti Web e le app Web sono cose complicate su cui lavorano molti tipi diversi di persone, che hanno tutti diversi livelli di esperienza, interesse, familiarità e capacità durante la progettazione e la codifica.
Il mondo reale potrebbe richiedere un titolo di quinto livello che deve sembrare un titolo di secondo livello o qualcosa di completamente nuovo. In queste situazioni è meglio preservare la struttura logica della pagina sottostante e modificare invece la grafica dell'intestazione:
Assistenza esperta a un prezzo ragionevole
È un compromesso e un riconoscimento che il mondo reale è complicato. Questo approccio favorisce il mantenimento della parte importante: la navigazione intuitiva ed efficiente per la tecnologia assistiva.
Metodologie come gli stili di utilità consentono un approccio ancora più flessibile per modificare le immagini di una testata:
Termini e condizioni
Per questo esempio, sto dichiarando una serie di piccole modifiche per regolare la presentazione dell'intestazione finché non ottengo l'aspetto visivo desiderato. Generalmente si incontrano stili di utilità su siti Web e applicazioni Web più grandi basati sullo stato, in cui la bassa specificità delle classi contribuisce a garantire la coerenza.
Per aiutare a rinforzare l'uso di intestazioni ordinate e nidificate, potrebbe valere la pena di usare un reset stile intestazione per mantenere tutte le intestazioni senza che una classe dichiarata su di esse abbia lo stesso aspetto.
h1, h2, h3, h4, h5, h6 color: inherit; dimensione carattere: 1em; line-height: inherit; margine: 0; padding: 0; vertical-align: baseline;
Questo è un design poco difensivo che aiuta a incoraggiare a pensare a come è la struttura di un documento sagomato su come sembra. È destinato a essere dichiarato dopo un reset CSS importato, quindi può sovrascrivere le opinioni di reset.
Il secondo problema più difficile in informatica è dare un nome alle cose. Il primo è ammettere che non sai qualcosa. Non presumo di conoscere il modo migliore per nominare le classi di styling di intestazione per il tuo sito Web o la tua app web. Tuttavia, se stai usando un approccio basato su stili non di utilità, ti consiglierei non nominandoli .h1, .h2, .h3, eccetera.
Il problema con questo approccio è che le persone che non hanno familiarità con il codebase potrebbero interpretare questi nomi di classi come istruzioni che impongono di abbinare il nome della classe al livello di intestazione. Ciò rafforzerà il "come appare" rispetto al problema "ciò che descrive".
Ho anche riscontrato situazioni in cui si rafforza il fatto che è accettabile utilizzare l'HTML diverso dagli elementi di intestazione per le intestazioni degli autori ("Ah, posso farlo div sembra un h5!“). Non buono!
Il sondaggio di Screen Reader di WebAIM 2017 ci dice anche che le intestazioni mancanti o improprie sono uno dei dieci problemi più problematici vissuti da persone che si affidano alla tecnologia assistiva per navigare nel web.
Questo è un problema di accessibilità diffuso con una soluzione semplice. Prenditi un po 'di tempo per esaminare le pagine del tuo sito web o della tua app web per vedere se la struttura della tua intestazione descrive la pagina con precisione e che questa descrizione segue un ordine logico: potrebbe essere facile come spostare alcuni numeri intorno!
