Advertisement
  1. Web Design
  2. Accessibility

L'importanza dei livelli del titolo per le tecnologie assistive

by
Read Time:8 minsLanguages:

Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)

La specifica HTML descrive sei elementi per l'intestazione: h1, h2, h3, h4, h5 e h6. Il numero in ciascuno di questi elementi di intestazione riflette la sua priorità, con h1 che è il più generale e h6 il più specifico.

Si tratta di una cosa importante da sapere! Il sondaggio tra i lettori di schermo del 2017 di WebAIM ci dice che la navigazione tra le intestazioni è il modo più importante con cui le persone che fanno affidamento sulle tecnologie assistive individuano le informazioni. Per questo motivo, è importante creare le intestazioni del vostro sito web correttamente.

A11y dal principio

Questo tutorial è parte di Accessibilità sul web: la guida completa di apprendimento, dove abbiamo raccolto una serie di tutorial, articoli, corsi e libri elettronici, che aiutano a capire l'accessibilità sul web fin dall'inizio.

Cognizione

Prima di andare al nocciolo di come funziona la tecnologia assistiva, c'è un motivo per il quale i nostri mezzi stampati usano cose come i capitoli, le sezioni e le sottosezioni, e le interruzioni di scena. Suddividere il contenuto in blocchi lo rende più facile da capire, digerire, conservare e fare riferimento.

Two pages from the Guardian newspaper demonstrating different chunks of contentTwo pages from the Guardian newspaper demonstrating different chunks of contentTwo pages from the Guardian newspaper demonstrating different chunks of content
Blocchi di contenuto, dal quotidiano The Guardian

Mentre il web non è la stampa, prende in prestito tutte le cose buone da essa — gli elementi di intestazione HTML sono analoghi a queste convenzioni della stampa. È una di quelle cose che ognuno prende per scontato, ma aiuta un sacco di persone. I problemi cognitivi sono diffusi e superano ogni altra forma di disabilità. Il contenuto raggruppato  in blocchi logici aiuta tutti, dalle persone che hanno una condizione biologica come la demenza alle persone che vivono invalidità situazionali quali la privazione di sonno o imparare un'abilità completamente nuova.

Navigare tra le intestazioni

Alcuni tipi di tecnologie assistive (tra cui, ma non solo, i lettori di schermo) consentono alle persone di passare da un'intestazione all'altra in una pagina. È l'equivalente di ciò che le persone che non usano tecnologie assistive fanno ogni giorno, svolazzando su di una pagina per afferrare il concetto generale di esso, fermandosi quando si trovano le informazioni che stanno cercando.

Generare elenchi delle intestazioni

Alcune tecnologie assistive possono prendere queste intestazioni e trasformarle in un elenco ordinato. Questo elenco può essere utilizzato per determinare rapidamente il significato generale della pagina.

An ordered list of headings generated by the JAWS screen reading software taken from a Wikipedia page titled List of French Deserts There are eight headings The order is as follows with their heading level listed after the headings title Wikipedia 1 List of French desserts 2 Contents 2 French Deserts 2 French pastries 2 See also 2 References 2 External links 2 Options to jump to the selected heading as well as sort and filter the headings are also present ScreenshotAn ordered list of headings generated by the JAWS screen reading software taken from a Wikipedia page titled List of French Deserts There are eight headings The order is as follows with their heading level listed after the headings title Wikipedia 1 List of French desserts 2 Contents 2 French Deserts 2 French pastries 2 See also 2 References 2 External links 2 Options to jump to the selected heading as well as sort and filter the headings are also present ScreenshotAn ordered list of headings generated by the JAWS screen reading software taken from a Wikipedia page titled List of French Deserts There are eight headings The order is as follows with their heading level listed after the headings title Wikipedia 1 List of French desserts 2 Contents 2 French Deserts 2 French pastries 2 See also 2 References 2 External links 2 Options to jump to the selected heading as well as sort and filter the headings are also present Screenshot
Elenco generato delle intestazioni sulla pagina di Wikipedia

Se non mantenete una sequenza logica — diciamo andando dal livello uno dell'intestazione al livello tre dell'intestazione senza dichiarare un livello due dell'intestazione in mezzo — può creare una potenziale confusione, sicuramente un'esperienza fastidiosa per la persona che si basa sulle intestazioni per navigare. Questa lacuna nella sequenza logica porrà l'onere sull'utente, costringendolo a utilizzare altri metodi, più tempo e uno sforzo intensivo per navigare, per determinare la logica della struttura complessiva della pagina (se presente) e se il contenuto di cui hanno bisogno è effettivamente presente nella pagina.

Intestazioni di primo livello

Un'altra cosa importante che possiamo fare è assicurarci che vi sia una sola intestazione di primo livello per pagina. Questa intestazione dovrebbe descrivere il punto principale del contenuto della pagina. Per esempio, una pagina sulla storia della pasticceria francese potrebbe avere un titolo di livello primo scritto così:

L'algoritmo della struttura del documento (inesistente)

Purtroppo, c'è un equivoco che potete utilizzare le intestazioni di primo livello per l'inizio di ogni elemento di sezione di contenuto in una pagina, confidando che il browser capisca il resto tramite l'algoritmo della struttura del documento. Questo algoritmo è fiction speculativa — al momento della pubblicazione di questo articolo deve ancora essere implementato da qualsiasi browser. Per questo motivo, dobbiamo onorare la Priorità delle Circoscrizioni e utilizzare gli altri elementi di intestazione.

Altre intestazioni

Le intestazioni dal livello due a sei dovrebbero seguire l'intestazione di livello uno ed essere create in un ordine sequenziale che descrive i punti principali del contenuto della pagina.

Per esempio, questa è la struttura dei titoli per questo articolo:

  1. L'importanza dei livelli delle intestazioni per le tecnologie assistive
    1. Cognizione
    2. Navigazione tramite intestazione
      1. Generazione degli elenchi delle intestazioni
      2. Intestazioni di primo livello
        1. L'algoritmo della struttura del documento (inesistente)
      3. Altre intestazioni
      4. Sovra-descrizione
      5. Altri servizi
    3. Stile
      1. Semantica
      2. Aspetti pratici
        1. Stili di utilità
        2. Reset
      3. Denominazione
    4. Conclusione: prendete un momento

Leggendo questa lista, siete in grado di determinare rapidamente di cosa tratta questo articolo. Molto carino, eh?

L'altra cosa da sottolineare è che le intestazioni — proprio come i formati gerarchici di JSON — possono essere nidificati all'interno di altre intestazioni, purché progrediscano logicamente. All'interno di un'intestazione di secondo livello è possibile utilizzare più intestazioni di terzo livello. Ognuna di queste sottointestazioni può, a loro volta, essere nidificata in sottointestazioni di quarto livello.

Quando avete finito con un argomento potete chiudere le intestazioni nidificate. Questo è l'unico posto dove "saltare" i livelli di titolo è accettabile — avete finito di discutere un concetto specifico e tornate a un argomento più generale.

  1. h1 La storia della pasticceria francese
    1. h2 Momenti importanti
      1. h3 Il 16° secolo
        1. h4 Pasta sfoglia
        2. h4 Wafer
      2. h3 Il 17° secolo
        1. h4 Pasticceria a sfoglia
        2. h4 Panna montata
          1. h5 Lo chef del Principe di Condé
      3. h3 Il 18° secolo
        1. h4 I macaron
      4. h3 Il 19° secolo
      5. h3 Il 20° secolo
    2. h2 Le persone importanti
      1. h3 ...

Questo esempio dimostra come è valido avere un'intestazione di quinto livello (Lo chef del Principe di Condé) seguita da un'intestazione di terzo livello (Il 18° secolo), a condizione che le intestazioni genitore siano in ordine sequenziale. Avere un'intestazione di terzo livello preceduta da un'intestazione di quinto livello, sarebbe stato invalido.

Sovra-descrizione

Utilizzare troppe intestazioni può creare un'esperienza travolgente per una persona che si basa su un lettore di schermo per navigare. Questo potrebbe sembrare un po' contro-intuitivo all'inizio, considerando che ho appena detto quanto siano importanti le intestazioni come ausilio alla navigazione.

Pensate in questo modo: così come troppe opzioni di navigazione visive su di una pagina possono influenzare negativamente il focus e l'attenzione di una persona, troppe intestazioni creano "rumore" che distrae e offusca il punto principale che si sta cercando di trasmettere.

Non c'è nessuna regola fissa su quante intestazioni sono troppe. Tutto dipende da qual è il contenuto, e quanto di esso è presente. Per esempio, una ricetta può aver solo bisogno del nome del piatto, degli ingredienti e delle istruzioni, mentre un documento accademico può richiedere una ripartizione molto più variegata.

Altri servizi

Una buona struttura delle intestazioni beneficia più delle sole persone che usano le tecnologie assistive. Poiché le intestazioni hanno un significato semantico, altri servizi possono agganciare questa descrizione programmatica del contenuto e ricontestualizzarla in vari facili modi. Per esempio, ecco cosa fa il motore di ricerca Bing con le pagine ben costruite:

A search result in Bing for the JAWS screen reader The result lists the title of the page its URL and a brief description Navigation options are also included in the result which correspond to the headings from the Wikipedia page it links to The options are Overview Contents History Features ScreenshotA search result in Bing for the JAWS screen reader The result lists the title of the page its URL and a brief description Navigation options are also included in the result which correspond to the headings from the Wikipedia page it links to The options are Overview Contents History Features ScreenshotA search result in Bing for the JAWS screen reader The result lists the title of the page its URL and a brief description Navigation options are also included in the result which correspond to the headings from the Wikipedia page it links to The options are Overview Contents History Features Screenshot
Risultato del motore di ricerca Bing

Proprio come i lettori di schermo, i servizi come Google Docs e Dropbox Paper genereranno automaticamente un elenco ordinato delle intestazioni in modo da poter rapidamente capire e navigare un documento. Molti elaboratori di testo possono generare anche rapidamente una tabella aggiornata in modo dinamico dei contenuti dalle intestazioni, un compito altrimenti noioso e che richiede tempo. E grazie alla interoperabilità di HTML, possiamo anche ricreare questo comportamento di navigare tra le intestazioni come un'estensione del browser!

Stile

Una cosa che sembra che tutti troppo spesso dimenticano è che le classi CSS possono essere applicate agli elementi intestazioni, proprio come qualsiasi altro elemento HTML dichiarato all'interno del body.

Semantica

La ragione per la quale sto menzionando questo è che gli elementi di intestazione sono comunemente usati a causa del loro aspetto ("Ooh! Mi piace il colore e il font dell'h3, lo utilizzerò."), e non quale priorità dei contenuti descrivono (Brioche è una sorta di Viennoiserie). È un problema diffuso.

In un mondo idealizzato di purezza accademica, onoreremmo l'onestà materiale degli elementi di intestazione ridimensionandoli e dando loro uno stile in base alla gerarchia che descrivono.

Tuttavia, questo è il mondo reale. I siti e le applicazioni web moderne sono cose complicate lavorate da molti tipi diversi di persone, che hanno tutti diversi livelli di esperienza, interesse, familiarità e capacità di progettazione e programmazione.

Aspetti pratici

Il mondo reale può chiamare per un quinto livello del titolo che ha bisogno di apparire come se fosse un'intestazione di secondo livello, o qualcosa di completamente nuovo. In queste situazioni è preferibile conservare la struttura logica sottostante della pagina e modificare gli elementi visivi dell'intestazione invece:

È un compromesso e un riconoscimento che il mondo reale è complicato. Questo approccio lo favorisce conservando la parte importante: una navigazione intuitiva ed efficiente per le tecnologie assistive.

Stili di utilità

Le metodologie come gli stili di utilità consentono un approccio ancora più flessibile per modificare gli elementi visivi di un'intestazione:

In questo esempio, dichiaro una serie di piccole modifiche per regolare la presentazione dell'intestazione fino a ottenere l'aspetto visivo desiderato. Incontrerete generalmente gli stili di utilità sui più grandi siti web e applicazioni web state-driven, dove le classi a bassa specificità aiutano a garantire la coerenza.

Reset

Per contribuire a rafforzarle utilizzando correttamente intestazioni ordinate e nidificate, può anche valere la pena utilizzare uno stile del titolo reimpostato per mantenere tutti i titoli senza una classe dichiarata che sembri allo stesso modo.

Questo è un piccolo design difensivo che incoraggia a pensare a come la struttura di un documento è formata rispetto a come appare. È destinato a essere dichiarato dopo un reset CSS importato, quindi potete ignorare gli avvisi di reset.

Denominazione

Il secondo problema più difficile in informatica è nominare le cose. Il primo è ammettere che non sapete qualcosa. Io non presumere di sapere il modo migliore di denominare le classi di stile delle intestazioni per il vostro sito web o la vostra applicazione web. Tuttavia, se state utilizzando un approccio di non-utilità basato sugli stili, non consiglierei di chiamarli .h1, .h2, .h3, ecc.

Il problema con questo approccio è che le persone che non hanno familiarità con il codebase potrebbero interpretare questi nomi di classe come istruzioni che dettano di dover far corrispondere il nome della classe con il livello dell'intestazione. Questo rafforzerà il "come appare" sopra al problema di "che cosa descrive".

Ho anche incontrato situazioni dove rinforza che è accettabile usare HTML invece degli elementi di intestazione per le intestazioni d'autore ("Ah, posso far apparire questo div come un h5!"). Non va bene!

Conclusione: prendete un momento

Il sondaggio tra i lettori di schermo del 2017 di WebAIM ci dice anche che le intestazioni mancanti o improprie sono una delle dieci questioni più problematiche vissute da persone che si affidano alla tecnologia assistiva per navigare sul web.

Si tratta di un problema di accessibilità diffusa con una soluzione semplice. Prendetevi un po' di tempo per rivedere il vostro sito web o le pagine dell'applicazione web per vedere se la struttura dell'intestazione descrive la pagina con precisione, e che questa descrizione segua un ordine logico — potrebbe essere facile come spostare alcuni numeri!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.