Fronteers — vakvereniging voor front-end developers

Webrichtlijn 42 & 43: Achtergrondafbeeldingen

Decoratieve afbeeldingen dienen zoveel mogelijk door CSS geplaatst te worden. Informatieve afbeeldingen dienen door HTML geplaatst te worden. (R-pd.7.6) Het gebruik van CSS Image Replacement technieken die worden toegepast op essentiële informatie wordt afgeraden. (R-pd.7.7)

Reacties

1 Marc op 18-06-2008 om 11:29 uur:
Tja, wie kan hier nu tegen zijn? Misschien heb ik het mis, maar volgens mij is dit een richtlijn die logisch, duidelijk en goed te implementeren is.

De enige vraag is: Wat is de definitie van een informatieve afbeelding? Als je een quote uit de content in een mooi vormgegeven jpg zet, dan bevat de afbeelding informatie. De informatie zit echter ook in de tekst, dus de afbeelding voegt geen nieuwe informatie toe. Wat vinden jullie... <img> of css?
2 Wilco op 18-06-2008 om 11:58 uur:
Vooral die eerste is een richtlijn met een eigenaardige bijsmaak. Wat is bijvoorbeeld dan een decoratieve afbeelding? Neem het tag plaatje van de fronteers blog bijvoorbeeld. Deze zegt iets over de tekst die er op volgt; namelijk dat het tags zijn. Dus informatief, dus fout, toch?

Neem nou de Accessibility.nl homepage. De afbeeldingen die naast de korte berichtjes staan zijn in sommige gevallen wel en andere gevallen niet informatief. We zien hier zowel logo's als kleine niks zeggende fototjes. Betekend dat dan dat je de ene helft met CSS moet doen en de andere via HTML?

En schiet je daarbij niet het nut van CSS voorbij? Was dat niet ontwikkeld om vorm te geven aan een op zichzelf staand document? Wat de webrichtlijnen daarmee eigenlijk zeggen is dat een losstaand HTML document geen afbeeldingen mag hebben die niet op één of andere manier informatief is.

Je kunt het ook over de boeg van sfeer gooien. Dat bepaalde afbeeldingen informatie geven over de sfeer die de publisher wil uiten. Dat maakt het argument nog veel ingewikkelder. Neem ironmaiden.com als voorbeeld. Mocht de webbouwer ooit besluiten roze hartjes in de achtergrond te zetten dan zou dat aardig informatief zijn over wat de bezoeker van de nieuwe iron maiden site kan verwachten. Daar wordt het niet minder decoratief door.

Ook image replacement heeft zo z'n schaduwkanten. Een legitieme rede om image replacement toe te passen bijvoorbeeld zou kunnen zijn wanneer je media=screen achtergrondkleur zwart is, en je logo daarom wit zou je kunnen overwegen om een wit op zwart logo toe te voegen met HTML, en met image replacement hier je wit op zwart logo over te plaatsen. Deze zou met print dan weggelaten kunnen worden.

Denk ook even over het 'CSS' deel in die 7.7. Sneaky frontenders zullen dan best wel eens kunnen inzien dat je met Flash het zelfde resultaat kunt berijken. Of dat dan de moeite waard is dat is een tweede, maar aangezien sifr een geaccepteerde manier van image replacement is valt de vraag te stellen waarom die wel? Is het de schaalbaarheid? Niet echt want sIFR schaalt ook maar beperkt mee (bij refresh).
3 Wilco op 18-06-2008 om 12:02 uur:
Oeps, ik zit daar wit op zwart en zwart op wit door elkaar te halen...
4 Blaise Kal op 18-06-2008 om 13:33 uur:
"Het gebruik van CSS Image Replacement technieken die worden toegepast op essentiële informatie wordt afgeraden."

Vind ik een interessant punt. Ik doe dat namelijk wel als dat onvermijdelijk is, door bij een (hoofd)navigatie-item achtergrondafbeeldingen te gebruiken, de tekst te verbergen, en een title attribuut toe te voegen.

Als je dan afbeeldingen uit hebt staan zie je geen tekst en geen afbeeldingen, dus dat is lastig navigeren.

Daar bestaat een gebrekkige oplossing voor: de Gilder/Levin of Shea Method (http://www.mezzoblue.com/tests/revised-image-replacement/). Ik vind die erg vies qua markup, dus die gebruik ik alleen als de klant volledige toegankelijkheid eist.
5 Egor Kloos op 18-06-2008 om 13:58 uur:
Wat is nu precies 'essentiële informatie'? Kan een gebruiker de inhoud van een pagina naast de gebruikelijke scherm media goed herkennen en gebruiken (verwerken).

Wat heb ik (niet) nodig voor het afdrukken van een pagina? Wat heb ik (niet) nodig voor het toegankelijk houden van inhoud. enz.

Wat essentieël is moet je zelf bepalen en kunnen uitleggen/verdedigen.
6 BARTdG op 20-06-2008 om 09:07 uur:
Ik heb deze pagina even geopend in Lynx. Er ontbreekt dan helemaal geen informatie, dus zou ik zeggen dat deze pagina geen informatieve afbeeldingen bevat.

Mijn voorstel:
- Alle afbeeldingen die op verschillende pagina's pagina weer opduiken, zouden met css geplaatst moeten worden.
- Alle afbeeldingen die alleen op de huidige pagina staan, plaats je met html.

Voor CMS-gebruikers is dit overigens tamelijk logisch en meestal eenvoudig te realiseren.
7 Krijn op 01-07-2008 om 12:15 uur:
Nog een leuke vraag: bij <input type="image" alt="Zoek"> kun je zowel src="zoek.png" (informatief?) als src="1x1-blank.png" style="background: transparent url(zoek.png) no-repeat 0 0; (decoratief?) gebruiken. Dit maakt toch geen verschil?
8 Niek Kouwenberg op 01-07-2008 om 13:58 uur:
Natuurlijk maakt dat veel verschil:

1. Er is een src attribute, dus waarom zou je het op een andere manier doen.
2. Heel miniem, maar er moeten nu twee afbeeldingen geladen worden.
3. De button heeft bij 1x1-blank.png (geen GIF?) standaard een grootte van 1 bij 1 pixel, dus moet je width en height attributen toevoegen of dit met CSS doen.
4. Stel de bezoeker heeft geen (goede) CSS ondersteuning, maar kant wel afbeeldingen zien. Wordt een spelletje zoek de knop.
5. In je tweede voorstel gebruik je veel meer code dan in het eerste, ook daarin kun je geen voordeel bedenken.
9 Krijn op 01-07-2008 om 14:08 uur:
1. CSS sprites.
2. Jep, maar dat wordt door het gebruik van sprites weer teniet gedaan. Bij 2 verschillende knoppen met een hover state heb je alweer minder afbeeldingen (en dus HTTP requests) nodig (2 in plaats van 4).
3. Klopt. Maar dat is sowieso handig.
4. Dat is (volgens mij) het enige nadeel. Zal dit in praktijk vaak voorkomen? Als afbeeldingen uit staan, heb je altijd nog het alt attribuut.
5. CSS sprites voor :hover maken het toch wel een prettige techniek.

Ik zie het nadeel, maar de vraag is of dit een image replacement techniek voor 'essentiële informatie' is...
10 Niek Kouwenberg op 01-07-2008 om 14:23 uur:
Naar mijn inziens is de toegevoegde waarde van een button helemaal afhankelijk van de afbeelding. Een loep of een afbeelding met tekst erop is duidelijk, maar dan zou het niet uitmaken of je dit via HTML of CSS doet.

De mogelijkheid om hover effecten te gebruiken is wel een groot voordeel voor een background-image, maar ik zit er dan toch een beetje mee in de maag dat de src afbeelding helemaal niet gebruikersvriendelijk is.
11 Sander A op 06-10-2008 om 02:35 uur:
Vraagje aan Koen Willems die ongetwijfeld de laatste reacties via RSS binnenhengelt ;-)

De site van Stadskanaal is geheel volgens de webrichtlijnen van de overheid gebouwd. De icoontjes voor externe links worden echter als afbeelding in de content opgenomen en niet als achtergrondafbeelding van de link. Wat was het argument om voor deze oplossing te kiezen en is dit volgens de webrichtlijnen?
Je kunt natuurlijk stellen dat het een informatieve afbeelding is en dat deze daarom in de HTML thuishoort, maar feitelijk geeft de href van de link al aan dat het om een externe link gaat. De afbeelding zegt inhoudelijk niks over de link. En zou de afbeelding niet binnen de link moeten staan i.p.v. erna?

Ik weet dat je je flink in de webrichtlijnen verdiept hebt en ik ga er dus ook vanuit dat je wat kant-en-klare antwoorden uit de kast kunt trekken ;-) Alvast bedankt.
12 Koen Willems op 06-10-2008 om 23:16 uur:
Ik ben er inderdaad vanuit gegaan dat het niet een louter decoratieve afbeelding betreft. Er wordt immers iformatie gegeven.
Vandaar dat ik er tot nu toe voor gekozen heb de afbeeldinkjes in de HTML op te nemen.

Handig trouwens, die RSS hier. Was me verdorie nog niet eerder opgevallen :-)
13 Sander A op 07-10-2008 om 02:30 uur:
Maar is een bullet bij een listitem dan niet ook informatief ("hier begint een nieuw item")? Of de stippellijntjes tussen deze post en de jouwe?
14 Gerard Copinga op 16-06-2009 om 09:50 uur:
Koen,

volgens de webrichtlijn 7.6 zijn informatieve afbeeldingen, afbeeldingen die essentiele informatie overdragen. Vind jij dat de icoontjes essentiële informatie overdragen, of, zoals ik het vaak noem, meta informatie, of secundaire informatie. In het laatste geval zouden de icoontjes namelijk wel in CSS mogen staan.
15 Koen Willems op 18-07-2009 om 00:50 uur:
@Gerard:
Sorry, ofschoon ik de RSS aan het staan had ik je post gemist.

Reagerend op je vraag: dat icoontje bij externe hyperlinks vind ik inderdaad informatie. Daarbij ga ik er vanuit dat de gemiddelde bezoeker van de site niet gelijk in de gaten heeft dat de hyperlink naar een andere site voert.

Maar als je bijvoorbeeld kijkt naar de markup van een regeling op de Regelngenbank, dan zie je dat ik de icoontjes bij 'wetstechinische informatie', 'printvriendelijke versie' etc. wel als decoratief heb aangemerkt, omdat daar de betekenis van de links veel duidelijker uit de tekst blijkt.

Enne .. ik voeg er maar gelijk aan toe: het onderscheid is flinterdun.
Plaats een reactie