Sitemap opmaak

[RenateRoke]

De sitemap is voor mij een beetje een hoofdpijnpagina. Hoe gaan jullie om met de volgende situaties?

Optie 1 die we tegenkomen: Een overzichtspagina met (soms alleen visuele) koppen, met daaronder per kop een opsomming van onderliggende pagina's. De 'koppen' zien er duidelijk anders uit dan de rest van de tekst en zouden dus als h opgemaakt moeten worden. Echter, niet alle pagina's hébben onderliggende content, dus sommige koppen zouden dan zonder onderliggende content zijn.

Optie 2 die we tegenkomen: Visueel exáct hetzelfde als bovenstaand. Echter, zonder CSS is de hele pagina eigenlijk één lange lijst, waarbij de onderliggende pagina's genest zijn als opsomming binnen de hoofdlijst. Er is dus een duidelijke paginastructuur voor screenreaders, máár, waar ik gewoon naar een item kan scrollen omdat ik die herken als kop (want de 'kop' is zonder bulletpoint en dikgedrukt), moet een screenreader door de hele lijst heen navigeren om bij dezelfde 'kop' uit te komen want er zijn geen koppen.

Optie 3 die we tegenkomen: Hetzelfde als bovenstaande, met als verschil dat het ook visueel één lange lijst is zonder koppen, met geneste opsommingen.

Wat keuren jullie af en wat adviseren jullie?

[Aircl0wn]

Ik wil het graag even proberen te visualiseren dus eerst een stukje pseudo-code Hopelijk begrijp ik je beschrijvingen goed, laat het vooral ff weten. Ik heb een streepje (-) en indents gebruikt om lijsten aan te duiden.|

Versie 1 Headings (zonder links?) , links, geen lijst

[H1] Sitemap

[H2] Heading
Link
Link

[H2] Heading

[H2] Heading
Link
Link

Versie 2

[H1] Sitemap
- Link (dikgedrukt)
    - Link
    - Link
- Link (dikgedrukt)
- Link (dikgedrukt)
    - Link
    - Link

Versie 3

[H1] Sitemap
- Link
    - Link
    - Link
- Link
- Link
    - Link
    - Link

[RenateRoke]

Yes, alleen versie 2 ziét er dus zo uit als versie 1, dus alsof het allemaal losse kopjes met één opsomming eronder is. De kopjes zijn visueel ook géén onderdeel van de opsomming (maar in de code wel)

[Veyfeyken]

Valt eender onder best practices? Ik zie geen echte failures in de 3 versies van Ronny. Misschien in versie 1 omdat er geen lijsten zijn gebruikt?

[gjccopinga]

Versie 2 en 3 zou ik wel goed keuren. Door de nesting zijn de relaties wel duidelijk en wordt wel structuur aangegeven. Versie 1 ligt er een beetje aan. Als er (visuele) bullets voor de links staan moet wel een lijst worden gebruikt. Als er geen bullets staan niet perse, maar zou ik wel aanraden.

[Veyfeyken]

Het zijn 3 cases dus kan er geen consensus bereikt worden. @RenateRoke, Je maakt best een apart issue aan voor elke case?

[rianrietveld]

Ik zou dit onder de noemer Best practice willen plaatsen en geen afkeuring van WCAG willen geven. In alles drie de cases zijn de links aanwezig, in optie 1 zouden de links in een unordered list kunnen maar lijkt mij geen halszaak. De info is er.

[rvantonisse]

Document Object model (DOM) en visuele gedeelte bij elkaar plus mijn mening:

---

TLDR Alleen optie 3 voldoende

• optie 1 onvoldoende, koppen 1.3.1 en 2.4.6
• optie 2 onvoldoende, opgebroken lijst als 1 lijst in code (1.3.1), naast koppen issue optie 1
• optie 3 voldoende, "what you see is what you get" 👍 Dit is ook meer gangbaar als "Sitemap" ter consumptie voor scripts.

Los van wat een Sitemap hoort in te houden, is het aan bouwers en UX hoe je een overzicht van je website wilt tonen. Vormgeven van een Sitemap is wat mij betreft dan ook meer een UX topic. Hoe de visuele onderdelen van een sitemap (of overzicht) zich uiten in de code / informatieoverdracht, raakt meer aan toegankelijkheid. e.g. Koppen, 1 lijst of meer lijsten.

De beschrijving voor dit issue kan wat mij betreft aangepast worden naar: "Toetsen van grote lijsten met koppen" of iets anders in die richting met koppeling naar 1.3.1 en 2.4.6.

---

Uitwerking opties

Optie 1

Visueel opgebroken lijsten met koppen. **Onvoldoende** 2.4.6 Kop "Onderwerp 2" (geen content) en 1.3.1 geen koppen in code _Klik voor details_

### DOM ``` [H1] Sitemap [DIV class h2] Onderwerp 1 [UL>LI>A] Onderwerp 1.a [UL>LI>A] Onderwerp 1.b [DIV class h2] Onderwerp 2 [DIV class h2] Onderwerp 3 [UL>LI>A] Onderwerp 3.a [UL>LI>A] Onderwerp 3.b ``` ### Visueel op scherm > # Sitemap > > ## Onderwerp 1 > - [Onderwerp 1.a](#) > - [Onderwerp 1.b](#) > > ## Onderwerp 2 > > ## Onderwerp 3 > - [Onderwerp 3.a](#) > - [Onderwerp 3.b](#)

Optie 2

Visueel opgebroken lijst en koppen, in code 1 geneste lijst. **Onvoldoende**: Visueel meer lijsten, in code 1 lijst. (1.3.1), plus koppen issue optie 1. _Klik voor details_

### DOM ``` [H1] Sitemap [UL>LI class h2] Onderwerp 1 [UL>LI>A] Onderwerp 1.a [UL>LI>A] Onderwerp 1.b [UL>LI class h2] Onderwerp 2 [UL>LI class h2] Onderwerp 3 [UL>LI>A] Onderwerp 3.a [UL>LI>A] Onderwerp 3.b ``` ### Visueel > # Sitemap > > ## Onderwerp 1 > - [Onderwerp 1.a](#) > - [Onderwerp 1.b](#) > > ## Onderwerp 2 > > ## Onderwerp 3 > - [Onderwerp 3.a](#) > - [Onderwerp 3.b](#)

Optie 3

Visueel geneste lijst zonder koppen. **Voldoende**: Voor screenreader gemak kan je er een kop van maken, maar dat is niet verplicht ("what you code is not required to see") _Klik voor details_

### DOM ``` [H1] Sitemap [UL>LI] Onderwerp 1 [UL>LI>A] Onderwerp 1.a [UL>LI>A] Onderwerp 1.b [UL>LI] Onderwerp 2 [UL>LI] Onderwerp 3 [UL>LI>A] Onderwerp 3.a [UL>LI>A] Onderwerp 3.b ``` ### Visueel > # Sitemap > > - Onderwerp 1 > - [Onderwerp 1.a](#) > - [Onderwerp 1.b](#) > - Onderwerp 2 > - Onderwerp 3 > - [Onderwerp 3.a](#) > - [Onderwerp 3.b](#)