Lezione 10Il processo di progettazione: come fare spazio all'accessibilità del web?

Nozione 71

Strutturare correttamente l'HTML

competenza target

Imparare a rispettare i requisiti HTML nel momento in cui li integrate nel vostro progetto.

HTML5?

L'HTML è il linguaggio usato per strutturare e presentare il contenuto su una pagina web. Ha alcune caratteristiche essenziali per rendere i siti web più accessibili, essendo più semantico. La maggior parte dei browser ora supportano HTML5, la versione più recente di HTML, realizzata nel 2008.

Se non avete familiarità con il linguaggio HTML, potete usare queste illustrazioni per aiutarvi nella lettura:

L'HTML utilizza dei tag che danno significato alla struttura della pagina, indicando quali tipi di elementi costiuiscono un blocco. L'uso di un HTML semantico non implica il mancato rispetto delle linee guida per l'accessibilità, come i tag ARIA, ma costituisce un altro strumento per creare siti web accessibili. I landmark, punti di riferimento nella pagina web, permetteranno allo screen reader di saltare alcune sezioni e accedere a specifiche zone della pagina web.

#Struttura? Landmark!

Esistono diversi tipi di elementi di blocco in HTML5. Permettono di strutturare il layout delle pagine web. Ad esempio, <header> è equivalente a un elemento <div>, ma con indicazioni specifiche: generalmente ha il ruolo di banner e contiene spesso un altro landmark, <nav>, che sta per navigazione.
Il landmark <main> è unico in una pagina web, al suo interno è presente il contenuto. È facilmente identificabile da uno screen reader.
Esiste anche il landmark <footer>, al fondo della pagina.
Possiamo segnalare che un elemento è indipendente dagli altri dello stesso tipo usando il tag <article>, così è più semplice notare il suo contenuto all'interno del landmark <main>.

Progettare tenendo a mente i landmark

Quando progettate una pagina web, potete suddividere il layout in diverse aree: menù, sidebar, contenuto principale, ecc. Potete usare queste suddivisioni visive per identificare i vostri landmark HTML5. Sarete in grado di dare alla pagina web una struttura e di renderla più accessibile.

I landmark non devono limitare il design del sito, anzi hanno il compito di fornire indicazioni su quale tipo di informazione può essere trovata in una sezione specifica della vostra pagina.