Estructurar els continguts de la pàgina correctament
Ús dels titulars
L'ús d'encapçalats que precedeixen a diferents blocs d'informació són de gran ajuda per separar el contingut i facilitar la navegació als usuaris de determinades ajudes tècniques com els lectors de pantalla. L'estructuració de la pàgina i jerarquització dels continguts mitjançant els encapçalats permet saltar blocs d'informació seleccionant la secció desitjada per l'usuari d'un lector de pantalla.
S'ha de respectar la jerarquia d'encapçalats en l'ordre de la pàgina (Headers H1, H2, H3...) perquè la navegació per la pàgina sigui coherent. Per facilitar la navegació amb lectors de pantalla es recomana posar un únic H1 per pàgina.
Criteri de l'estàndard WCAG 2.1 relacionat:
1.3.1 - Informació i relacions
Recomanacions WEBAIM.org:
Eina de verificació:
Extensió de Chrome HeadingsMap
Com ho fem a l'editor del Genweb?
Aquests encapçalaments crearan les corresponents etiquetes HTML
<h1>Titular 1</h1>, <h2>Titular 2</h2>, etc.
A Genweb, els encapçalaments s'han d'afegir a partir de l'h2, ja que el sistema crea automàticament l'h1 a partir del nom de la pàgina i només n'hi pot haver un de sol.
Recorda que els headers no són per maquetar. A més, cal tenir en compte que les opcions de mida de l'editor es poden barallar entre si; per tant, si es vol canviar un format previ, caldria fer abans "Format - Eliminar format".
🛠️ Si t'atreveixes amb l'editor HTML: Per als usuaris més avançats, fent clic a la icona <> de l'editor Tiny, podeu utilitzar les classes de Bootstrap directament al codi:
<h2 class="h3">Aquest text és una capçalera h2 amb aspecte de h3</h2>
<!-- Això és un paràgraf normal, però amb la mida de text ampliada -->
<p class="fs-3">Aquest és un paràgraf normal amb mida modificada amb fs-3</p>
Aquest text és una capçalera h2 amb aspecte de h3
Aquest és un paràgraf normal amb mida modificada amb fs-3
Llistes
Quan existeixen elements dins el contingut d'una pàgina que poden ser agrupats com una llista, s'ha de fer amb les etiquetes correctes.
Com ho fem a l'editor del Genweb?
La primera opció ens crearà una llista no ordenada, amb la corresponent etiqueta <ul>, i la segona crea una llista ordenada amb l'etiqueta <ol>.
Comparteix: