Opsummering af seneste dokumentoversigtschatter

Det er ikke hverdag, at HTML-overskrifter er emnet de jour, men min mappe med gemte links samler artikler om for nylig fusioneret fjernelse af dokumentoversigtsalgoritmen i WHATWG Living Standard.

Først og fremmest skal du vide, at algoritmen aldrig rigtig har eksisteret. Selvfølgelig stod det i specifikationerne. Og selvfølgelig var der en advarsel om at bruge det i specifikationerne. Men ingen browser har nogensinde implementeret det, som Bruce Lawson mindede os om det. Vi har levet i en flad dokumentstruktur hele tiden.

Dette er meget gamle nyheder. Adrian Roselli har skrevet om myten om dokumentoversigten siden 2013. Men det er hans indlæg fra 2016 med titlen "Der er ingen dokumentoversigtsalgoritme" der udtømmende præciserer det og er løbende blevet opdateret med ekstra klumper af kontekst om de samtaler og kampe, der fik os hertil. Dette er virkelig sagaens bedste tidslinje. Amelia Bellamy-Royds har også dykkede ned i dilemmaets rødder tidligere her på CSS-Tricks.

Mit sind går med det samme til alt det arbejde, der er gået i at lave en dokumentoversigtsalgoritme, der understøtter sektionering. Fjernelse af det fra specifikationen er helt sikkert den rigtige opfordring, men det tager ikke væk fra den herkuliske indsats, der gik ind i det, selvom det nu er begravet i en eller anden versionshistorie. Jeg tænker også på alle de velmenende mennesker, der har skrevet om algoritmen fejlagtigt gennem tiden (også på netop denne side!) med forventning om, at den var lige om hjørnet. Der er næsten syv års mental og teknisk gæld, som vi har oparbejdet på grund af, hvad der ser ud til at være mangel på handling.

Når han ser forbi "nyheden" om, at algoritmen officielt ikke er mere, beklager Bruce, at der ikke er nogen generisk <h> element eller lignende, der kan sektioneres for at frembringe det korrekte overskriftsniveau. Jeg er enig. At have en <h1> element i det væsentlige eksisterer som en udsat <title> er begrænsende, især da sider så sjældent er struktureret omkring en enkelt artikel med en enkelt overskrift på øverste niveau. Jeg synes ofte, at jeg trækker mig, hver gang jeg laver en slags kortkomponent, hvor jeg bruger det <h3> kan være teknisk korrekt, men føles ude af drift. Og det er før vi overhovedet taler om stylingovervejelserne, hvor et lavere overskriftsniveau nu skal ligne et tydeligt højere overskriftsniveau.

Når vi taler om ledelse på overskriftsniveau, har Steve Faulkner (som forfattede PR'en, der hentede algoritmen fra specifikationerne) en super praktisk overblik over brugen af <hgroup> element at håndtere overskriftsmønstre, der involverer underoverskrifter, undertekster, alternative titler, snd taglines. Jeg er sikker på, at du har set markup som denne i naturen:

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

Det hænger ikke sammen med en flad dokumentkontur, der er drevet af overskriftsniveauer. Hver af disse overskrifter repræsenterer et afsnit, der danner et hierarki af information:

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

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

Når indlejret inden for en <hgroup> element, den <p> elementets indhold repræsenterer en underoverskrift, alternativ titel eller tagline, som ikke er inkluderet i dokumentoversigten.

Så vi får denne struktur:

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

<hgroup> is role=generic i øjeblikket, men Steve peger på et forslag der kunne kortlægge det til role=group. Hvis det sker, vil tilgængelighedstræet give hjælpeteknologi mulighed for at tildele disse afsnit mere semantisk betydning som de undertekster og tagline-stykker, de er. Det lyder nemt, men Steve bemærker udfordringer, der er i vejen. Han demonstrerer også, hvordan denne slags mønster kunne implementeres i dag med ARIA-attributter.

Så længe vi runder tingene op, udgav Matthias Ott et par tips om skabe en struktureret disposition med overskrifter. Tjek slutningen for en fantastisk liste over værktøjer til at tjekke dine overskrifter.