fix: update readme and arias

2026-01-16 11:26:39 +01:00
parent 4e650899c8
commit 7367127b50
9 changed files with 178 additions and 36 deletions
--- a/README.md
+++ b/README.md
@@ -28,6 +28,131 @@ We hebben gekozen voor een **Web Components-architectuur** om de volgende redene

 ---

+## 🎯 UX Onderbouwing
+
+### Paginastructuur
+
+De pagina's zijn opgebouwd volgens een bewuste hiërarchie die de gebruiker begeleidt van oriëntatie naar actie:
+
+```
+┌─────────────────────────────────┐
+│  Header (sticky)                │  ← Altijd toegankelijk
+│  ├── Logo + Menu + Acties       │
+│  ├── Categorie navigatie        │
+│  └── Zoekbalk                   │
+├─────────────────────────────────┤
+│  Hoofdinhoud                    │  ← Scrollbare content
+│  ├── Promotieblok (push-box)    │
+│  ├── Boekensecties              │
+│  ├── Categorieën                │
+│  └── Nieuwsbrief                │
+├─────────────────────────────────┤
+│  Footer                         │  ← Service informatie
+│  └── Accordion navigatie        │
+└─────────────────────────────────┘
+```
+
+### Ontwerpkeuzes per element
+
+#### 🔍 Zoekbalk (prominent in header)
+
+**Waarom:** De zoekfunctie staat bovenaan omdat:
+- **Directe toegang** — Terugkerende klanten weten vaak al wat ze zoeken
+- **Tijdsbesparing** — Sneller dan door categorieën navigeren
+- **Spraakherkenning** — Extra toegankelijkheid voor gebruikers met beperkingen of onderweg
+- **Verwachting** — Gebruikers verwachten een zoekfunctie bij een webshop
+
+#### 📱 Mobile Drawer (slide-in navigatie)
+
+**Waarom een drawer in plaats van dropdown:**
+- **Meer ruimte** — Volledige schermhoogte voor uitgebreide navigatie
+- **Touch-vriendelijk** — Grote klikgebieden, swipe om te sluiten
+- **Focus** — Backdrop voorkomt interactie met achterliggende content
+- **Overzicht** — Alle categorieën en imprints in één overzicht
+- **Authenticatie** — Plek voor inlog/registratie knoppen
+
+#### 📚 Boekkaarten (horizontale layout)
+
+**Waarom horizontale kaarten:**
+- **Scanbaarheid** — Cover links trekt de aandacht, tekst rechts geeft context
+- **Efficiënt** — Meer informatie zichtbaar per kaart dan bij verticale layout
+- **Touch targets** — Grote klikbare gebieden voor mobiel gebruik
+- **Consistentie** — Herkenbare structuur door hele site
+
+**Informatiehiërarchie:**
+1. **Titel** (vetgedrukt, onderstreept) — Primair identificatie
+2. **Beschrijving** — Context over de inhoud
+3. **Auteur** (paars, onderstreept) — Secundair, maar klikbaar
+4. **Prijs** (vetgedrukt) — Koopbeslissing informatie
+5. **Winkelwagen knop** — Directe actie
+
+#### 📦 Push Boxes (promotieblokken)
+
+**Waarom push boxes:**
+- **Visuele onderbreking** — Doorbreekt de lijst met boeken
+- **Merkidentiteit** — Ruimte voor imprint logos (Asoka)
+- **Call-to-action** — Stuurt naar belangrijke pagina's
+- **Flexibiliteit** — Twee varianten (default/paars) voor verschillende contexten
+
+**Plaatsing:**
+- **Bovenaan homepage** — Introductie van het merk/imprint
+- **Onder boekdetails** — Klantenservice toegang na productinfo
+- **Strategisch** — Voorkomt "scroll fatigue" bij lange pagina's
+
+#### 🏷️ Categoriekaarten (grid layout)
+
+**Waarom visuele categorieën:**
+- **Herkenning** — Iconen zijn sneller te verwerken dan tekst
+- **Uitnodigend** — Visuele elementen nodigen uit tot verkennen
+- **Oriëntatie** — Helpt nieuwe bezoekers het aanbod te begrijpen
+- **Twee kolommen** — Optimaal voor mobiele weergave
+
+#### 📑 Tabbladen (boekdetailpagina)
+
+**Waarom tabs voor Beschrijving/Inzage/Recensies:**
+- **Ruimtebesparing** — Voorkomt zeer lange pagina's
+- **Gebruikerskeuze** — Laat gebruiker kiezen wat relevant is
+- **Focus** — Toont één type informatie tegelijk
+- **Verwachting** — Bekend patroon van andere webshops
+
+#### 📰 Nieuwsbrief sectie
+
+**Waarom onderaan (maar boven footer):**
+- **Niet opdringerig** — Staat niet in de weg van productinhoud
+- **Logische plek** — Na het bekijken van content, uitnodiging om verbonden te blijven
+- **Visueel onderscheid** — Border maakt het herkenbaar als apart element
+
+#### 🦶 Footer met accordions
+
+**Waarom accordions:**
+- **Ruimtebesparing** — Veel links zonder lange scrolllijsten
+- **Georganiseerd** — Duidelijke categorisering van footer content
+- **Touch-vriendelijk** — Grote tap targets voor mobiel
+- **Verwachting** — Standaard patroon voor mobiele footers
+
+### Visuele hiërarchie
+
+De kleurkeuzes ondersteunen de gebruikerservaring:
+
+| Element | Kleur | Reden |
+|---------|-------|-------|
+| Primaire acties | Paars (#951D51) | Opvallend, merkidentiteit |
+| Links | Paars + onderstreept | Herkenbaar als klikbaar |
+| Titels | Zwart + vetgedrukt | Maximaal contrast, hiërarchie |
+| Secundaire tekst | Grijs | Ondersteunend, niet afleidend |
+| Achtergronden | Lichtgrijs varianten | Subtiel onderscheid tussen secties |
+
+### Scroll-gedrag header
+
+**Smart header die inklapt bij scrollen:**
+- **Naar beneden** — Header klapt deels in, meer ruimte voor content
+- **Naar boven** — Header verschijnt weer, navigatie altijd bereikbaar
+- **Drempel van 100px** — Voorkomt "flikkeren" bij kleine scrollbewegingen
+
+Dit patroon maximaliseert schermruimte terwijl navigatie toegankelijk blijft.
+
+---
+
 ## 🚀 Project starten

 ### Vereisten
@@ -255,6 +380,7 @@ Dit project is gebouwd met toegankelijkheid als prioriteit en volgt de WCAG 2.1
 - Verborgen link die verschijnt bij keyboard focus
 - Stelt gebruikers in staat direct naar de hoofdinhoud te navigeren
 - Slaat herhalende navigatie-elementen over
+- Geplaatst binnen de header landmark voor correcte WCAG compliance

 #### Semantische HTML
 - Correcte gebruik van `<header>`, `<nav>`, `<main>`, `<footer>`, `<section>`, `<article>`
@@ -289,6 +415,7 @@ Dit project is gebouwd met toegankelijkheid als prioriteit en volgt de WCAG 2.1
 #### Taal
 - `lang="nl"` attribuut op HTML element
 - Correcte taalinstelling voor screenreaders
+- Alle ARIA labels zijn in het Nederlands

 ### Focus Stijlen

@@ -306,14 +433,24 @@ element:focus {

 ## 📱 Responsive Design

-Het ontwerp is mobile-first gebouwd met een maximale breedte van **430px** voor de mobiele container. Op grotere schermen wordt de mobiele weergave gecentreerd weergegeven met een schaduw.
+> **Let op:** De huidige implementatie toont een gefixeerde mobiele container (430px) puur ter demonstratie voor deze pitch. Bij de daadwerkelijke ontwikkeling wordt de website volledig responsive gebouwd voor alle schermformaten.

-### Breakpoints
+### Pitch weergave

 | Breakpoint | Gedrag |
 |------------|--------|
 | < 431px | Volledige breedte, mobiele ervaring |
-| ≥ 431px | Gecentreerde container met afgeronde hoeken en schaduw |
+| ≥ 431px | Gecentreerde container met afgeronde hoeken en schaduw (pitch preview) |
+
+### Geplande responsive implementatie
+
+Bij de definitieve ontwikkeling worden de volgende breakpoints toegevoegd:
+
+| Breakpoint | Apparaat | Aanpassingen |
+|------------|----------|--------------|
+| < 640px | Mobiel | Huidige ontwerp, enkele kolom |
+| 640px - 1024px | Tablet | Twee-koloms grid voor boeken, aangepaste navigatie |
+| > 1024px | Desktop | Volledige sidebar navigatie, drie-koloms grid, uitgebreide header |

 ---

@@ -353,7 +490,3 @@ Front-end Developer
 ## 📄 Licentie

 Dit project is gemaakt als onderdeel van een pitch voor Milinda Uitgevers en mag uitsluitend worden gebruikt indien de opdracht wordt gegund.
-
---
-
-*Gemaakt met ❤️ voor boeken en boeddhisme*