Zephyrnet-logotyp

Sammanfattning av Chatter för senaste dokumentöversikt

Datum:

Det är inte varje dag som HTML-rubriker är ämnet de jour, men min mapp med sparade länkar samlar artiklar om nyligen slogs samman borttagning av dokumentkonturalgoritmen i WHATWG Living Standard.

Först och främst bör du veta att algoritmen aldrig riktigt existerade. Visst, det stod i specen. Och visst, det fanns en varning om att använda den i specen. Men ingen webbläsare har någonsin implementerat det, som Bruce Lawson påminde oss. Vi har levt i en platt dokumentstruktur hela tiden.

Detta är mycket gamla nyheter. Adrian Roselli har skrivit om myten om dokumentöversikten Sedan 2013. Men det är hans inlägg från 2016 med titeln "Det finns ingen dokumentöversiktsalgoritm" som uttömmande förklarar det och har uppdaterats regelbundet med extra nuggs av sammanhang om samtalen och kampen som fick oss hit. Detta är verkligen sagans bästa tidslinje. Amelia Bellamy-Royds har också grävde i rötterna till dilemmat tidigare här på CSS-Tricks.

Mina tankar går omedelbart till allt arbete som har lagts ner på att skapa en dokumentöversiktsalgoritm som stöder sektionering. Att ta bort det från specifikationen är helt klart rätt uppmaning, men det tar inte ifrån de herkuliska ansträngningarna som gick in i den även om den nu är begravd i någon versionshistorik. Jag tänker också på alla välmenande människor som har skrivit om algoritmen felaktigt över tid (inklusive på just den här sidan!) med förväntningen att den var precis runt hörnet. Det finns nästan sju år av mental och teknisk skuld som vi har samlat på oss från vad som verkar vara brist på handling.

När han tittar förbi "nyheten" att algoritmen officiellt inte finns längre, beklagar Bruce att det inte finns någon generisk <h> element eller liknande som kan sektioneras för att få fram rätt rubriknivå. Jag håller med. Att ha en <h1> element i huvudsak existerar som en exponerad <title> är begränsande, särskilt eftersom sidor så sällan är strukturerade kring en enda artikel med en enda topprubrik. Jag kommer ofta på mig själv med att rycka till varje gång jag gör någon form av kortkomponent där jag använder <h3> kan vara tekniskt korrekt, men känns ur funktion. Och det är innan vi ens pratar om stylingövervägandena där en lägre rubriknivå nu måste se ut som en distinkt högre rubriknivå.

På tal om ledningsnivå, Steve Faulkner (som skrev PR som plockade algoritmen från specen) har en super praktisk översikt över hur du använder <hgroup> elementet att hantera rubrikmönster som involverar underrubriker, undertexter, alternativa titlar, snd taglines. Jag är säker på att du har sett uppmärkning så här i naturen:

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

Det passar inte med en platt dokumentkontur som styrs av rubriknivåer. Var och en av dessa rubriker representerar en sektion som bildar en informationshierarki:

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

Vad vi istället vill ha är en grupp av rubriker. Cue the <hgroup> element:

När kapslad inom en <hgroup> element, den <p> elementets innehåll representerar en underrubrik, alternativ titel eller tagline som inte ingår i dokumentets disposition.

Så vi får den här strukturen:

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

<hgroup> is role=generic för tillfället, men Steve pekar på ett förslag som skulle kunna mappa det till role=group. Om det händer kommer tillgänglighetsträdet att tillåta hjälptekniker att tilldela dessa stycken en mer semantisk betydelse som de undertexter och slagord som de är. Låter lätt men Steve noterar utmaningar som är i vägen. Han visar också hur den här typen av mönster kan implementeras idag med ARIA-attribut.

Så länge vi håller på att avrunda saker publicerade Matthias Ott några tips om skapa en strukturerad disposition med rubriker. Kolla in slutet för en bra lista med verktyg för att kontrollera dina rubrikkonturer.

plats_img

Senaste intelligens

plats_img