Oppsummering av Nylig dokumentoversikt Chatter

Kilde node: 1586057

Det er ikke hver dag HTML-overskrifter er temaet de jour, men mappen min med lagrede lenker samler artikler om nylig slått sammen fjerning av dokumentoversiktsalgoritmen i WHATWG Living Standard.

For det første bør du vite at algoritmen egentlig aldri har eksistert. Jada, det var i spesifikasjonen. Og visst, det var en advarsel om å bruke den i spesifikasjonen. Men ingen nettleser har noen gang implementert det, som Bruce Lawson minnet oss på det. Vi har levd i en flat dokumentstruktur hele tiden.

Dette er veldig gamle nyheter. Adrian Roselli har skrevet om dokumentoversiktsmyten siden 2013. Men det er hans innlegg fra 2016 med tittelen "Det er ingen dokumentoversiktsalgoritme" som utfyllende staver det ut og har blitt oppdatert jevnlig med ekstra nuggs av kontekst om samtalene og kampene som førte oss hit. Dette er virkelig sagaens beste tidslinje. Amelia Bellamy-Royds har også dykket ned i røttene til dilemmaet tidligere her på CSS-Tricks.

Tankene mine går umiddelbart til alt arbeidet som er lagt ned i å lage en dokumentoversiktsalgoritme som støtter seksjonering. Å fjerne den fra spesifikasjonen er den riktige oppfordringen, men det tar ikke unna den herkuliske innsatsen som gikk inn i den, selv om den nå er begravd i en eller annen versjonshistorie. Jeg tenker også på alle de velmenende folkene som har skrevet om algoritmen feilaktig over tid (inkludert på akkurat denne siden!) med forventning om at den var rett rundt hjørnet. Det er nesten syv år med mental og teknisk gjeld som vi har påløpt fra det som ser ut til å være mangel på handling.

Når han ser forbi "nyheten" om at algoritmen offisielt ikke er mer, beklager Bruce at det ikke er noen generisk <h> element eller lignende som kan seksjoneres for å produsere riktig overskriftsnivå. Jeg er enig. Å ha en <h1> element i hovedsak eksisterer som en eksponert <title> er begrensende, spesielt siden sider så sjelden er strukturert rundt en enkelt artikkel med en enkelt overskrift på toppnivå. Jeg opplever ofte at jeg kryper hver gang jeg lager en slags kortkomponent der jeg bruker <h3> kan være teknisk korrekt, men føles ute av drift. Og det er før vi i det hele tatt snakker om stylinghensynene der et lavere overskriftsnivå nå må se ut som et tydelig høyere overskriftsnivå.

Når vi snakker om ledelse på overskriftsnivå, har Steve Faulkner (som forfattet PR-en som plukket algoritmen fra spesifikasjonen) en super praktisk oversikt over bruk av <hgroup> element å håndtere overskriftsmønstre som involverer underoverskrifter, undertekster, alternative titler, snd taglines. Jeg er sikker på at du har sett markup som dette i naturen:

<h1>Disappointingly Average</h1>
<h2>The Autobiography of Geoff Graham</h2>
<h3>by Geoff Graham</h3>

Det stemmer ikke med en flat dokumentkontur som er drevet av overskriftsnivåer. Hver av disse overskriftene representerer en seksjon som danner et hierarki av informasjon:

Disappointingly Average
└── The Autobiography of Geoff Graham
    └── by Geoff Graham

Det vi ønsker i stedet er en gruppe av overskrifter. Cue the <hgroup> element:

Når nestet innenfor en <hgroup> element, den <p> elementets innhold representerer en underoverskrift, alternativ tittel eller slagord som ikke er inkludert i dokumentoversikten.

Så vi får denne strukturen:

<hgroup>
  <h1>Disappointingly Average</h1>
  <p>The Autobiography of Geoff Graham</p>
  <p>by Geoff Graham</p>
</hgroup>

<hgroup> is role=generic for øyeblikket, men Steve peker på et forslag som kan kartlegge det til role=group. Hvis det skjer, vil tilgjengelighetstreet tillate hjelpeteknologi å gi mer semantisk betydning til disse avsnittene som undertittel og slagord som de er. Høres enkelt ut, men Steve bemerker utfordringer som er i veien. Han demonstrerer også hvordan denne typen mønster kan implementeres i dag med ARIA-attributter.

Så lenge vi runder opp, publiserte Matthias Ott noen tips om lage en strukturert disposisjon med overskrifter. Ta en titt på slutten for en flott liste over verktøy for å sjekke overskriftene dine.

Tidstempel:

Mer fra CSS triks