Afbeelding of h1 gebruiken voor je logo?

17 juni 2011 Inzichten /

Iedereen die met frontend development bezig is, heeft de discussie al eens gevoerd: gebruik je nu best een afbeelding of een h1 voor je logo?

Wij proberen hier het evenwicht te vinden tussen gebruiksvriendelijkheid, zoekmachine optimalisatie en toegankelijkheid. Beide manieren zijn toegestaan, maar wij vinden de tweede manier iets netter en semantisch gezien ook iets correcter.

In de meeste van onze homepagina's krijgt het logo een h1 met een hyperlink met daarin de titel van de website. Op deze pagina is er in de meeste gevallen geen andere titel die van groter belang is dan de naam van de website, vandaar deze keuze. Op de binnenpagina's hanteren we een p-tag met een hyperlink voor het logo, want deze is van minder belang t.o.v. de inhoud op die pagina. Stel, je surft naar een blogpost, dan krijgt de titel van de blogpost een groter gewicht dan de titel van de website en wordt die dus de h1.

Met HTML5 wordt het nog een stukje anders. Door het gebruik van de nieuwe section en article elementen, kunnen er op één pagina meerdere h1's gebruikt worden. Elke section of article kan namelijk als een volledig afzonderlijk element beschouwd worden op de website en die kunnen dus elk hun eigen h1 hebben.

In de praktijk passen we dit voorlopig minder toe om twee verschillende redenen. We willen hiermee de klassieke structuur van headings behouden en anderszijds zijn we soms gebonden aan de layout. Daarmee bedoel ik dat we elke titel een standaard font-size meegeven via CSS. Wanneer we dus overal een h1 zouden gebruiken (waar toegelaten uiteraard), zullen we overal grote titels zien opduiken op de website. Elke titel in de verschillende onderdelen van de website gaan definiëren en aanpassen is dan te omslachtig. De inhoud van de website is vaak onvoorspelbaar, omdat deze beheerd wordt door de klant en spelen we dus liever op veilig.

Wat het gebruik van een fysieke afbeelding betreft als logo, vind ik dit semantisch minder correct. Het is inderdaad een decoratieve afbeelding en het mag dus een img in HTML zijn, maar het is geen titel. Je kunt dan wel het alt-attribuut invullen, maar als deze naar de homepagina wijst via de hyperlink, zou je eigenlijk "home" als alt-attribuut moeten invullen. In dat geval heb je dus een visueel logo, maar is er geen titel die leesbaar is voor zoekmachines noch voor screen readers.

Toch zijn beide manieren correct, en hier zijn al enorme discussies over gevoerd. Wij kiezen hier voor de image replacement manier via CSS en proberen zo op elk vlak goed te scoren. Hoe pakken jullie dit aan?

Lees meer

Nieuwsbrief

Doe zoals meer dan 1700 marketing en design experts en ontvang maandelijks onze nieuwsbrief vol inzichten, tips en verrassende nieuwigheden.