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

Een goede broodkruimel maakt Home in de navigatie optioneel.

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. Tijdens het maken van dit artikel kreeg ik zeer uiteenlopende signalen over hoe een broodkruimel geschikt maken voor blinden.

• Als lijst (), die je dan met wat CSS-gegoochel in de browser kan weergeven zoals je wil (tip van Johan Ronsse)
• In HTML5 kan je de broodkruimel ook identificeren als een


  -element. Daarbinnen kan je dan de links gewoon aanduiden als -euhm- links (tip van Toon Van de Putte)

• Bij webbureau Marlon kiezen ze voor een ietwat vergelijkbare methode. Op hun blog vind je de html- en css-code voor hun ideale broodkruimel.

Voor blinden is het groter-dan-teken wel degelijk het beste als symbool in een broodkruimel.

Deze methoden zijn niet superslecht, maar de mensen van Anysurfer (het Belgische label voor toegankelijkheid) lieten snel weten dat het groter-dan-teken als scheidingselement wel degelijk het beste is.

Ze maakten zelfs een pagina waar je kan horen hoe de uitleessoftware van blinden zo’n broodkruimel voorleest.

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