Webrichtlijn 25 & 26: Lijsten
Op het Fronteers blog schreef ik in 2008 en 2009 korte artikelen over de Webrichtlijnen, die toen door de Nederlandse overheid in het leven zijn geroepen. De reacties zijn bij Fronteers niet meer zichtbaar, dus ik heb ze op mijn eigen site in augustus 2026 weer gepubliceerd.
Gebruik ol (ordered list) en ul (unordered list) elementen voor het aangeven van lijsten. (R-pd.3.13) Gebruik het dl (definition list), het dt (definition term) en dd (definition data) element voor het aangeven van een lijst met definities. (R-pd.3.14)
De webrichtlijnen raden voor (uitgebreide) inhoudsopgaven het gebruik van het <ul> element aan. Zijn we het daar mee eens?
Gebruik jij voor menuutjes wel eens een <ol> element? Wanneer?
En zijn er situaties waarbij een ongeordende lijst toch nummering kan hebben? Met andere woorden: is geordend hetzelfde als genummerd?
Gebruik jij definitielijsten ook wel eens voor iets anders dan een lijst met begrippen en definities? Is het gebruik bij de bronnen en hier in de reacties volgens jou goed gebruik van <dl>?
Comments
Ik moet zeggen dat ik voor een menu nog nooit een <ol> heb gebruikt. Het doel van een menu is juist dat de volgorde (voor de bezoeker) niet uit maakt. Anders hadden we wel enkel volgende/vorige knoppen op een site.
Een probleem met alle lijsten is dat je op een gegeven moment alles wel terug kunt brengen naar een lijst: Een artikel is eigelijk een lange, geordende lijst van alinea's, een blogarchief is eigelijk een grote definitielijst met titels en de daarbij horende verklarende tekst, et cetera. Het mag volgens mij duidelijk zijn dat dat natuurlijk niet de bedoeling is.
Bij de bronnen wordt er naar mijn idee goed gebruikt van gemaakt, maar ik vind mijn bericht geen definitie van mijn naam en de tijd waarop ik het geplaatst heb.
Vanaf wanneer vinden jullie iets een lijst, overigens? vanaf 1 item al, of pas echt vanaf meer? Om een recent Naar Voren artikel te quoten: als ik een boodschappenlijstje met 1 artikel heb, dan noem ik het nog steeds een lijstje.
Vergeet ik nog te vragen wat men vindt van een
<dl>in dit formulier...Persoonlijk ben ik niet zo'n liefhebber van OL. Je zou het moeten gebruiken voor lijsten waarin de volgorde gebruikt is... volgens de specificaties. Maar dit is gewoon één voorbeeld waar in de praktijk weinig van terecht komt. Automatische nummers via browsers zijn gewoon te onhandig. Je kunt ze alleen sturen met CSS, wat niet logisch is want het soort nummering, waar nummering b egint, of het subnummering gebruikt, of het alfabetisch is, etc, dat heeft niks meer met opmaken van content te maken, dat is gewoon content.
Zelf kies ik er altijd voor om UL te gebruiken wanneer de standaard nummering niet is wat ik wil. Met volgorde vooraan in de LI aangegeven. Dat kun je met CSS dan ook nog wel even positioneren.
DL van de andere kant ben ik wel een liefhebber van. Alles wat een beetje key->value(s) aan elkaar hangt gat bij mij meestal wel in een DL, inclusief formulieren. Dat zie je trouwens ook steeds meer. Ik zag dat Zend_Form, een nieuw component van Zend Framework dat ook standaard gebruikt.
Wilco en Krijn, ik was toch echt onder de indruk dat het "for" attribuut bij labels al expliciet key->value aangaf :)
Voor styling is het natuurlijk wel gemakkelijker, maar daarvoor zitten we hier niet :p Of doen jullie dit om formulieren er zonder CSS nog netjes uit te laten zien?
Ik moet zeggen dat ik DL's wel vind kunnen voor formulieren. Natuurlijk heb je al een label bij een input, maar een label is de ene keer de key de andere keer een van de mogelijke values, bv. bij radiobuttons. Daar komt bij dat je in het geval van bv. een bevestigingspagina vrijwel dezelfde structuur kunt gebruiken, en dat is niet alleen handig, maar ook vrij logisch.
Ik vind het soms nog wel moeilijk om te beslissen of iets nu een UL of een DL moet zijn, of überhaupt een lijst.
Zo snap ik het gebruik van DL hier bij de reacties wel al zou ik zelf misschien eerder voor een OL hebben gekozen aangezien de volgorde van de reacties wel van belang is, althans, wanneer mensen op elkaar reageren.
Wat ik overigens wel een gemis vind bij de DL is dat de groepering van DT's en DD's alleen impliciet gebeurd. Een expliciete groepering met een DI element) of hoe je ook zou willen noemen) zou een mooie aanvulling zijn wat mij betreft. Het zou ook de mogelijkheid bieden om de volgorde van key en value om te draaien. Visueel kan dat natuurlijk al met CSS, maar misschien wil je dat voor screenreaders ook wel.
Voor inhoudsopgaven lijken mij OL's meer voor de hand liggen dan UL's, a; zal dat bij een roman wellicht nadrukkelijker zijn dan bij een naslagwerk, tenzij het een alfabetisch geordende encyclopedie is natuurlijk ;-)
Kilian: met styling en scripting moet je (volgens mij) ook rekening houden. Wat dat betreft vind ik een extra container wel prettig. Sinds een artikel van een blauwe man ben ik daar vrij zeker van. De
<dl>'etjes op deze site vind ik niet flexibel genoeg in ieder geval, maar ik geef m'n crappy CMS gewoon de schuld ;)En dan nog de vraag bij lijstjes: is geordend hetzelfde als genummerd?
Ik gebruik de laatste jaren eigenlijk bijna altijd een DL voor formulieren natuurlijk in combinatie met fieldsets, legends en labels. Waarbij ik input[type=radio or checkbox]+label in een UL plaats. Maar ik kan me ook voorstellen als je set radiobuttons hebt zoals je die vaak bij een enquete tegen komt "geeft uw waardering tussen 1 en 10" dat je dan kiest voor een OL. Probleem is vaak bij een CMS dat je moet kiezen voor een van de twee.
Het grote voordeel van deze soms over gestructureerde formulieren is dat je met CSS heel eenvoudig bijna alles kunt voorzien van opmaak. Zelf het kleine probleem van de border om een radiobutton in IE is eenvoudig op te lossen: form li input { border: 0; }
Nee, geordend en genummerd zijn twee verschillende dingen volgens mij. Voorbeeld: algemene voorwaarden waarvan de artikelen genummerd zijn. Het gaat hier niet zozeer om de rangorde (artikel 5 en 7 kunnen best omgedraaid worden) maar de nummers identificeren de artikelen, zodat er makkelijk aan gerefereerd kan worden. Ik gebruik hiervoor een DL: <dt>artikelnummer</dt><dd>tekst</dd>.
Weet iemand een online voorbeeld waar een
<ul>/<dl>toch nummering heeft? Ik las gisteren op het WHATWG blog ook nog een mogelijke toepassing, maar ik heb ze eerlijk gezegd nog nooit gezien. Misschien gaat het wel te ver :)@Krijn Een collega van mij liet laatst een site zien waar hij een <ul> had gebruikt en via <dfn> nummers had toegevoegd. Ik kan helaas de site nu even niet vinden. Hij gebruikte de <ul> als hoofdnavigatie trouwens.
Toegegeven, voor styling is een <dl> in een form lekker te gebruiken. Semantisch gezien is het absoluut not done.
Ik ben bekend met de kromme redenaties die dit kunnen verdedigen, maar een straatnaam kan nooit een definition <dd> zijn van de term <dt> straat.
Wat dat betreft kent <dl> eigenlijk maar een heel beperkt gebruik, waar de waarde bijna uitsluitend in accessibility ligt.
Late reactie, maar ik ontdek deze site dan ook pas laat I guess.
Om terug te komen op de
definition list, zelf gebruik ik deze ook voor reacties, met als achterliggende gedachte dat je op deze manier een relatie legt met een bericht en de persoon (+tijdstip) die het bericht geplaatst heeft, zoals een definitie een relatie heeft zijn term (en dus andersom).Sta ik alleen in deze mening/visie, of zou de
dl-element inderdaad zo beperkt gebruikt moeten worden als dat de elementnaam doet vermoeden?