Tilbage til Semantik og struktur

Webtilgængelighed

Overskrifter i komponenter

Bevar sidens indholdshierarki, når kort og sektioner bygges som genbrugelige komponenter.

Se undervisningsslides

Relevante links

TL;DR

  1. Overskrifter beskriver indholdets hierarki, ikke skriftstørrelsen.
  2. En komponents lokale markup kan se rigtig ud, mens den samlede side får et forkert hierarki.
  3. Lad forælderen eller en fælles context bestemme niveauet, og kontrollér den renderede side.

Overskrifter er navigation

En skærmlæserbruger kan springe mellem overskrifter eller få en liste over dem uden at læse siden fra toppen. Derfor skal overskriftstekst og niveau give et forståeligt overblik.

Et naturligt hierarki på produktsiden kunne være:

h1 Find dine næste sneakers
  h2 Før du vælger
  h2 Populære lige nu
    h3 Nova Runner
    h3 City Low

Gå ét niveau ned, når du starter en undersektion. Det er normalt at gå fra h3 tilbage til h2, når næste hovedsektion begynder. En section ændrer ikke automatisk et barns overskriftsniveau.

Komponenten kender ikke altid sin kontekst

Hvis ProductCard altid renderer en h2, passer det måske direkte under sidens h1, men ikke under en sektions h2. Kortets overskrift er dér en underoverskrift og bør være h3.

Det samme problem kan opstå, når en komponent flyttes til en sidebar eller et dialogvindue. Inspicér derfor resultatet dér, hvor komponenten bruges.

Lad konteksten bestemme niveauet

En enkel løsning i React er et eksplicit heading-element som prop:

function ProductCard({ headingAs: Heading = "h2", title }) {
  return (
    <article>
      <Heading className="product-title">{title}</Heading>
    </article>
  );
}


function PopularProducts() {
  return (
    <section>
      <h2>Populære lige nu</h2>
      <ProductCard headingAs="h3" title="Nova Runner" />
    </section>
  );
}

I TypeScript kan headingAs begrænses til "h2" | "h3" | "h4" | "h5" | "h6". Stylingen følger klassen, så et nyt niveau ikke kræver et nyt design.

Slides viser også context som en måde at dele niveauet gennem flere komponentlag. Det reducerer gentagne props, men context skal repræsentere indholdets hierarki — ikke blot tælle alle wrappere. Nye heading-features i slides er perspektivering, ikke nødvendige for at løse øvelsen.

Prøv selv: Inspicér overskrifterne på en artikel fra BBC Travel som i slides. Kan du forstå opdelingen alene ud fra overskriftslisten?

Se mere