Broodkruimels op je website: 8 tips

Wat is een broodkruimelpad?

Een broodkruimel geeft het volledige hiërarchische pad weer, vanaf de homepage tot de pagina die de gebruiker bekijkt.

Waarvoor is een broodkruimel op je website goed?

Broodkruimels zijn een handige aanvulling op je website navigatie. Het helpt de gebruiker om zich te oriënteren op je site: zo weet hij meteen waar hij zit. Bovendien laat de broodkruimelnavigatie toe dat de bezoeker snel naar een hoger niveau kan springen. En ze helpen om beter te scoren in Google.

Als je broodkruimels wil maken voor je website, volg dan deze 8 richtlijnen.

1. Tussen paginatitel en topbalk

Een broodkruimel staat boven de paginatitel, maar onder een eventuele topnavigatie of de grafische balk bovenaan op je site. Zet het broodkruimelpad zeker niet boven je website menu. De kans is groot dat een surfer ze dan niet ziet staan. Of, erger nog, de broodkruimel als de primaire navigatie beschouwt.

2. Begin de broodkruimel met ‘Home’

Vroeger begonnen broodkruimels vaak met ‘Je bent hier:’. Tijdens gebruikerstesten merken we dat dat niet meer nodig is. Zelfs mensen die nog nooit van een broodkruimel gehoord hebben, begrijpen waarvoor hij dient. Of negeren hem. Elke surfer weet wat ‘Home’ betekent. Het is, ook in het Nederlands, de beste term om de homepage aan te duiden.

3. Lijn de broodkruimel links uit

We lezen nu eenmaal van links naar rechts.

Bijkomend voordeel: zo staat het eerste deel van je breadcrumb (‘Home’) in het linker bovengedeelte van de website, waar mensen een link ‘Home’ verwachten. Met andere woorden: als je een goede broodkruimel hebt, is een item ‘Home’ in je hoofdnavigatie geen absolute noodzaak.

4. Groter-dan-teken

Gebruik een groter-dan-teken (>) of iets gelijkaardig om de verschillende elementen van je broodkruimelpad van elkaar te scheiden. Het groter-dan-teken is het meest geschikt om het verschil in hiërarchie tussen de verschillende elementen aan te duiden. Uiteraard mag je dit ook grafisch uitwerken, zoals in onderstaand voorbeeld van Apple. Het belangrijkste is dat het teken of symbool hiërarchie uitstraalt. Een verticale scheiding (|) scheiding mag ook. Een pijltje evenzeer. Een liggend streepje (-) , backslash () en andere scheidingstekens zijn niet ideaal.

Of je een teken in html gebruikt dan wel een grafisch element dat je oproept via je style sheet, maakt voor de usability weinig uit. Voor blinden is volgens Anysurfer het groter-dan-teken een uitstekende oplossing en ook Google houdt van het groter-dan-teken.

5. Kleinere tekengrootte

Gebruik voor de broodkruimel op je website een iets kleinere tekengrootte dan voor de rest van de tekst. Door die kleinere tekengrootte wordt meteen duidelijk dat het een secundair element is.

6. Aanklikbaarheid

Elk onderdeel van de broodkruimel moet aanklikbaar zijn, behalve de pagina waarop de bezoeker zich bevindt. Uiteraard moet je ook in de broodkruimel de regels van de aanklikbaarheid respecteren (onderlijnd en in kleur).

7. Geen broodkruimelpad op de homepage

Zet geen broodkruimelnavigatie op de homepage. Andere elementen (kleuraanduiding in navigatie, content, lay-out, etc.) moeten aangeven dat een pagina de homepage van een website is. Broodkruimels zet je dus op alle pagina’s van je website, behalve op de homepage.

8. Broodkruimel optimaliseren voor blinden en screenreaders

Voor blinden wordt een broodkruimel best wel aangekondigd. De klassieke melding ‘Je bent hier’ is dan het beste. Je mag deze uiteraard verborgen maken voor iedereen behalve screenreaders.

De mensen van Anysurfer (het Belgische label voor toegankelijkheid) lieten weten dat het groter-dan-teken als scheidingselement wel degelijk het beste is.

Tot slot nog dit: zet in je html zeker geen | omdat dit symbool door een screenreader wordt gelezen als PIPE.

Lees hier nog meer tips over het waarom en hoe van een kruimelpad op je website.