Uitleg tekst met schaduw zonder gebruik van plaatjes of dubbele tekst (text-shadow)

Korte omschrijving

Tekst met schaduw zonder gebruik te maken van plaatjes of extra tekst. Alleen de css-eigenschap text-shadow wordt gebruikt. Hiermee is nog veel meer mogelijk dan alleen een gewone schaduw.

Omdat Internet Explorer 7 en 8 text-shadow niet kennen, worden voor die browsers 'filters' gebruikt. Waarmee helaas veel minder mogelijk is.

Alles op deze site kan vrij worden gebruikt. Je gebruikt het wel op eigen risico: als er ergens fouten in zitten, ben ik daar niet verantwoordelijk voor en ook niet voor eventueel daardoor aangerichte schade in welke vorm dan ook. Een link naar http://www.css-voorbeelden.nl is niet verplicht, maar wordt wel gewaardeerd.

Opmerkingen

• Internet Explorer 7 en 8 gebruiken een niet-standaardmethode van Microsoft, die ronduit belabberd is vergeleken met de standaardmethode. Zie verder bij Bekende problemen.

• Firefox ondersteunt text-shadow vanaf versie 3.1. Safari ondersteunt het al langer, maar meervoudige schaduwen pas vanaf versie 4. Omdat voor deze browsers in de regel bewuster is gekozen dan voor Internet Explorer, zullen ze veel beter worden geüpdatet dan Internet Explorer, dus dit lijkt me geen echt groot probleem. Google Chrome ondersteunt het al vanaf het begin, en Opera ondersteunt het al heel lang.

  
  De laatste kolom in het oudere Firefox 3.0, dat wel css maar nog geen text-shadow kent. Let vooral op de tekst in het voorlaatste vak...

  Toch is dit voorlopig niet helemaal onbelangrijk, want in het voorlaatste voorbeeld is een witte tekst op een witte achtergrondkleur gebruikt. Omdat de tekst met css wit wordt gekleurd, is er niets aan de hand als css uit staat, want dan worden achtergrond en tekst niet gekleurd. Meestal zul je dan gewone zwarte tekst op een witte achtergrond zien.

  Als css echter aan staat, heb je witte tekst op een witte achtergrond. Elke browser die css kent, maakt de tekst dus onzichtbaar. Maar alleen nieuwere browsers die text-shadow kennen, geven de schaduw weer. Browsers die wel css kennen, maar nog geen text-shadow, laten geen schaduw zien en maken de tekst dus compleet onzichtbaar.

  Voorlopig is tekst die alleen met behulp van een schaduw zichtbaar wordt gemaakt, dus alleen te gebruiken voor tekst die echt volledig 'extra' is, die probleemloos volledig kan wegvallen.

• Omdat deze schaduw alleen werkt als css aanstaat, moet je het niet gebruiken als enige manier dingen als belangrijk te markeren. Zonder css valt die markering immers volledig weg, en ook spraakbrowsers en dergelijke hebben er niets aan. Verder heeft dit geen invloed op de toegankelijkheid voor spraakbrowsers en dergelijke, want zonder css staat er gewone, normale tekst.

• De schaduwen vallen in elke fatsoenlijke browser óver andere elementen heen, ze kunnen dus buiten het element waar de tekst in staat komen te staan. Dat wil zeggen: alleen als ze ver genoeg van de tekst af staan, natuurlijk. Buren van tekst met schaduw kunnen dus moeilijk zichtbaar of zelfs onzichtbaar worden.

  
  Internet Explorer kapt overhangende schaduw af.

  
  Alle andere browsers laten overhangende schaduw gewoon zien.

  Bij Internet Explorer 7 en 8 wordt de schaduw afgekapt aan de rand van het element, waar de tekst in staat. Je moet dus zorgen voor voldoende ruimte in Internet Explorer 7 en 8. Ik heb dat in de voorbeelden niet altijd gedaan, zodat het probleem zichtbaar wordt.

  Op de hierbij staande afbeeldingen heeft de paragraaf waar de tekst met schaduw in staat een zwarte border. Hierdoor is te zien wat er met schaduw gebeurt, die buiten de paragraaf komt.

• Bij inzoomen (vergroten) worden de afbeeldingen in de eerste en tweede kolom snel heel korrelig. In de derde kolom, waarin daadwerkelijk text-shadow wordt gebruikt, gebeurt dat niet en blijft alles er netjes uitzien. Laat je dus niet misleiden door deze verstoringen: ze hebben niets met text-shadow te maken.
• In de html staat een aantal keren de code ▀ Deze wordt gebruikt om in het onderste voorbeeld de vierkante blokjes weer te geven. Dit is een zogenaamde utf-8-code, waar je meer over kunt lezen in utf-8-codes en entiteiten.
• In een eerdere versie is ook getest op Internet Explorer 6. Daar test ik niet meer op. En omdat de code is gewijzigd, is deze browser uit dit voorbeeld verwijderd. Misschien werkt alles nog net als in Internet Explorer 7, misschien ook niet.

Links in deze uitleg, vooral links naar andere sites, kunnen verouderd zijn. Op de pagina met links vind je steeds de meest recente links.

Alles op deze site is gemaakt op een systeem met Linux. Daarbij is vooral gebruik gemaakt van Quanta Plus, GIMP en Firefox met extensies. De pdf-bestanden zijn gemaakt met OpenOffice.

Iets gevonden waar je wat aan hebt? Mooi. Als je je waardering wilt uiten, maak dan een donatie over aan War Child Nederland, een organisatie die kinderen uit oorlogsgebieden helpt hun trauma's te verwerken. Of - nog beter - wordt donateur:

Achterliggend idee

Als je tot voor kort tekst met schaduw wilde gebruiken, moest je allerlei kunstgrepen toepassen. Je kon bijvoorbeeld 'n afbeelding gebruiken, die je iets naast de tekst zette. Maar dan moest je bij elke wijziging van de tekst 'n nieuwe afbeelding maken. Of je kon de tekst herhalen en dan over elkaar heen projecteren, maar daar werden gebruikers van bijvoorbeeld spraakbrowsers niet dol van blijdschap van, want die hoorden alles twee keer.

Op internet kun je een ongelooflijke hoeveelheid oplossingen vinden, ook met Flash, JavaScript, noem maar op. Alleen het aantal verschillende oplossingen geeft eigenlijk al aan dat geen enkele oplossing echt goed werkte. Zeker als je de lettergrootte gaat verandert of zoomt, werkt vrijwel geen enkele oplossing meer goed.

Schaduw bij tekst met behulp van css heeft een eigenaardige geschiedenis. Microsoft heeft het al in Internet Explorer 5.5 ingebouwd, maar niet volgens de standaard (die toen trouwens nog niet bestond voor text-shadow). Het is al opgenomen in css 2.0, maar in 2.1 weer verwijderd, omdat geen enkele browser het had geïmplementeerd. Dit was kennelijk de aanleiding om het toch in te bouwen, want inmiddels ondersteunen - behalve Internet Explorer - alle browsers het via standaard-css. Het is dus in css 3 weer opgenomen.

Het beleid van w3c, de club die de standaard bijhoudt voor css, met betrekking tot text-shadow doet denken aan het beleid van de PvdA met betrekking tot het onderzoek naar de mogelijke Nederlandse deelname aan de oorlog in Irak. Als iemand het me uit kan leggen: graag.

Firefox, Safari, Google Chrome en Opera ondersteunen allemaal text-shadow, zoals het volgens de standaard hoort te werken. In deze browsers kun je meerdere schaduwen opgeven in meerdere kleuren, die eventueel ook nog vervagen. De 'schaduwen' hoeven er dan ook helemaal niet als 'n schaduw uit te zien.

Internet Explorer had al langere tijd z'n eigen manier van schaduw aan 'n tekst toevoegen: 'n filter met de naam dropshadow. Dit heeft veel minder mogelijkheden dan text-shadow, maar 'n simpele gewone schaduw is er goed mee te maken, zeker in combinatie met het filter blur, ook alleen in Internet Explorer te gebruiken.

Omdat Internet Explorer 7 en 8 text-shadow niet kennen, wordt dit gewoon genegeerd door deze browsers. Internet Explorer 9 gaat text-shadow ondersteunen, wat het leven 'n heel stuk simpeler en aangenamer maakt. Ook het in het laatste voorbeeld gebruikte rgba() gaat door Internet Explorer 9 ondersteund worden.

Los van een gewone schaduw biedt text-shadow nieuwe mogelijkheden. Het is geen enkel probleem om meerdere schaduwen op te geven. Dat is bij meervoudige en chaotische schaduw gedaan. De eerst opgegeven schaduw ligt bovenop, is dus altijd zichtbaar, de laatst opgegeven ligt onderop.

Met de eerste waarde geef je de verplaatsing in horizontale richting aan. Positief is naar rechts, negatief naar links.

De tweede waarde geeft de verplaatsing in verticale richting aan. Positief is naar onder, negatief naar boven.

Een eventuele derde waarde geeft de lengte aan, waarover de schaduw vervaagt.

Tenslotte wordt een kleur opgegeven. Als je geen kleur opgeeft, gebruiken Opera en Firefox de tekstkleur, maar Google Chrome en Safari laten dan helemaal geen schaduw zien.

Dit voorbeeld valt in twee delen uiteen: een voor alle échte browsers, en een voor Internet Explorer 7 en 8, die door Microsoft abusievelijk ook browser worden genoemd. Vanwege de verschillen tussen deze twee groepen zijn twee afbeeldingen van elk effect gemaakt.

In de eerste kolom staan de afbeeldingen, zoals ze volgens de standaard horen te zijn.

In de tweede kolom staat, wat Internet Explorer 7 en 8 laten zien.

In de derde kolom tenslotte staat wat de browser, waarmee je 't voorbeeld bekijkt, er live van bakt. De derde kolom is dus de kolom, waar het om draait: hierin wordt de schaduw daadwerkelijk aangemaakt door de browser zelf.

Omdat Internet Explorer 7 en 8 totaal andere css nodig hebben dan andere browsers, moet je alle css twee keer maken. Bovendien zit er ook nog verschil tussen Internet Explorer 7 en Internet Explorer 8.

Bij Internet Explorer 7 moet hasLayout aanstaan. 'n Beknopte uitleg daarover staat in de uitleg bij Filters werken in... Bij Internet Explorer 8 bestaat dat hele hasLayout gelukkig niet meer, wat 'n volstrekt overbodig onding was dat.

Bij beide moeten dropshadow en blur in een blok-element staan, anders werken ze niet. Maar tekst is geen blok-element. Om te laten zien hoe je dit kunt oplossen, heb ik daarom in de voorbeelden de tekst in een span, een inline-element, gezet. Die span kun je namelijk in een blok-element veranderen. (Er zijn nog andere redenen om de tekst in een span te zetten, die worden bij de Beschrijving van de code vermeld.)

Omdat dropshadow en blur maar heel beperkte mogelijkheden hebben, ziet het er in Internet Explorer 7 en 8 vaak wat anders uit, en soms totaal anders. Sommige dingen zijn helemaal niet na te maken. Gewone simpele schaduwen zien er wel ongeveer hetzelfde uit als in echte browsers.

(Tip: als je je relatie met 'n sitebouwer moeiteloos wilt beëindigen, fluister dan in zijn of haar oor: "Lief Internet Explorertje van me.")

Beschrijving van code en css

	div#header-buiten
	{
	    position: absolute;
	    right: 16px;
	    width: 100%;
	    height: 120px;
	    background: yellow;
	}

	div#header-binnen
	{
	    margin-left: 16px;
	    height: 120px;
	    text-align: center;
	}

De code aanpassen aan je eigen ontwerp

• Als je dit voorbeeld gaat aanpassen voor je eigen site, houdt het dan in eerste instantie zo eenvoudig mogelijk. Ga vooral geen details invullen.

• Gebruik vooral geen FrontPage, Publisher of Word (alle drie van Microsoft). Deze programma's maken niet-standaard code die alleen goed te bekijken is in Internet Explorer. In alle andere browsers zie je grotendeels bagger, áls je al iets ziet.

  Publisher en Word zijn niet bedoeld om websites mee te maken. FrontPage is zwaar verouderd en wordt niet meer onderhouden door Microsoft. Als je beslist 'n duur product (299 dollar) van Microsoft wilt gebruiken, neem dan Microsoft Expression Web 2. Andere uitvoeringen zijn nog veel duurder.

  Je kunt natuurlijk ook het gratis programma Kompozer, de opvolger van nvu, gebruiken. Dit programma is te downloaden vanaf www.kompozer.net/download. Meer links over Kompozer vind je op de pagina met links onder Gereedschap → wysiwyg-editor.

  Maar het allerbeste is om gewoon zelf html, css, enz. te leren, omdat zelfs het allerbeste programma het nog steeds zwaar verliest van 'n op de juiste manier met de hand gemaakte pagina.

• Het beste kun je 'n site maken in Firefox. Als je 'n site maakt in Firefox, Opera, Safari of Google Chrome, is er 'n hele grote kans dat hij in alle browsers werkt. Als je in Internet Explorer begint, is dat niet zo. Dat heeft te maken met historische oorzaken (als je geïnteresseerd bent: zoek maar naar 'boxmodel' en 'probleem' of zo op internet, of naar 'quirks mode'). Ik geef de voorkeur aan Firefox, omdat er zoveel extensies (uitbreidingen) voor bestaan. De twee belangrijkste voor 't maken van sites zijn Web Developer en Firebug, maar er bestaan nog tientallen andere.

• Het allereerste dat je moet invoeren, is het doctype, vóór welke andere code dan ook. Een lay-out met een missend of onvolledig doctype ziet er totaal anders uit dan een lay-out met een geldig doctype. Wát er anders is, verschilt ook nog 'ns tussen de diverse browsers. Als je klaar bent en dan nog 'ns 'n doctype gaat invoeren, weet je vrijwel zeker dat je van voren af aan kunt beginnen met de lay-out.

  Geldige doctypes vind je op www.w3.org/QA/2002/04/valid-dtd-list.html.

  Gebruik het volledige doctype, inclusief de url, anders werkt het niet goed.

• Gebruik een 'strict' doctype of het doctype voor html 5. Deze zijn bedoeld voor nieuwe sites. Het transitional doctype is bedoeld voor al bestaande sites, niet voor nieuwe. Het transitional doctype staat talloze tags toe, die in html 5 zijn verboden. Deze tags worden al zo'n tien jaar afgeraden. Het transitional doctype is echt alleen bedoeld om de puinhoop van vroeger, toen niet volgens standaarden werd gewerkt, enigszins te herstellen.

  Het strict doctype staat verouderde tags niet toe. Daardoor kan met 'n strict doctype, of het nu html of xhtml is, probleemloos worden overgestapt naar html 5. Met een transitional doctype en het gebruik van afgekeurde tags kun je niet overstappen naar html 5. Je moet dan eerst alle verouderde tags verwijderen, wat echt ontzettend veel werk kan zijn.

• Als tweede voer je de charset in. Het beste kun je utf-8 nemen. Als je later van charset verandert, loop je 'n grote kans, dat je alle aparte tekens als letters met accenten weer opnieuw moet gaan invoeren.
• Test vanaf het allereerste begin in zoveel mogelijk verschillende browsers in 'n aantal resoluties (schermgroottes). Onder het kopje Getest in kun je in deze uitleg vinden waar ikzelf op test. Ook van Internet Explorer kun je meerdere versies naast elkaar draaien. Je kunt daarvoor zoeken op internet en op de pagina met links staan onder de kopjes Gereedschap → Meerdere versies van Internet Explorer draaien en Gereedschap → Weergave testen 'n aantal links die daar ook bij kunnen helpen.
• Voor alle voorbeelden geldt: breng veranderingen stapsgewijs aan. Als je bijvoorbeeld foto's wilt laten weergeven, begin dan alleen met het veranderen van de namen van de foto's, zodat je eigen foto's worden weergegeven. Maakt niet uit als de maten niet kloppen en de teksten fout zijn. Als dat werkt, ga dan bijvoorbeeld de maten aanpassen. Dan de teksten. En controleer steeds, of alles nog goed werkt.

• Als het om een lay-out of iets dergelijks gaat: zorg eerst dat header, kolommen, footer, menu, en dergelijke staan en bewegen zoals je wilt, en ga dan pas details binnen die blokken invullen. In eerste instantie gebruik je dus bijvoorbeeld 'n leeg blok voor waar uiteindelijk het menu komt te staan.

  Als je begint met allerlei details, is er 'n heel grote kans dat die de werking van de blokken gaan verstoren. Bouw eerst het huis, en ga dan pas de kamers inrichten. Als de blokken eenmaal werken zoals je wilt, zul je het gelijk merken als 'n toegevoegd detail als tekst of 'n afbeelding iets gaat storen. Daarvoor moet je natuurlijk wel regelmatig controleren in verschillende browsers, of alles nog wel goed werkt.

  Je kunt de blokken tijdens het aanpassen opvullen met bijvoorbeeld <br>1<br>2<br>3 enz., tot ze de juiste hoogte hebben. Het is handig om aan het einde even iets toe te voegen als 'laatste', zodat je zeker weet dat er niet drie regels onderaan naar 't virtuele walhalla zijn verhuisd.

  Om de breedte te vullen kun je het best 'n kort woord als 'huis' duizend keer of zo herhalen. Ook hier is het handig om aan 't einde (en hier ook aan 't begin) 'n herkenningsteken te maken, zodat je zeker weet dat je de hele tekst ziet.

• Zolang je in grotere dingen zoals 'n lay-out aan 't wijzigen bent, zou ik je aanraden de verschillende delen een achtergrondkleur te geven. Je ziet dan goed waar 'n deel precies staat.
• Als je instellingen verandert in de style, doe er dan maar 1, hooguit 2 tegelijk. Als je er 17 tegelijk verandert, moet je niet verbaasd zijn, als je niet weet wat er is gebeurd. En als je 't niet meer terug kunt draaien.
• Marges, padding en border worden bij de hoogte en breedte van de inhoud opgeteld (gaat volkomen tegen je gevoel in, maar 't is niet anders). Hier worden vaak fouten mee gemaakt. Als je bijvoorbeeld in een lay-out 'n border toevoegt aan een van de 'hoofdvakken' (header, footer, kolommen), dan wordt deze er dus bij opgeteld. Bij 'n border van 2 px rondom de linkerkolom wordt deze dus plotseling 4 px breder (2 aan beide kanten), en 4 px hoger. Zoiets kan je hele lay-out verstoren, omdat iets net te breed of te hoog wordt. Je moet dan elders iets 4 px kleiner maken. Dat zal vaak zo zijn: als je één maat verandert, zul je vaak ook 'n andere moeten aanpassen.
• In plaats van px kun je ook andere maten gebruiken, met name em. Voordeel van em is dat het door de gebruiker kan worden vergroot en verkleind, ook in Internet Explorer (andere browsers hebben meer mogelijkheden op dit gebied). Nadeel is dat het de lay-out sneller kan verstoren dan bijvoorbeeld px. Dit moet je gewoon van geval tot geval bekijken.

• Valideren, valideren, valideren en dan voor 't slapen gaan nog 'ns valideren.

  Valiwie???

  Valideren is het controleren van je (x)html en css op 'n hele serie fouten. Computers zijn daar vaak veel beter in dan mensen. Als je 300 keer <h2> hebt gebruikt en 299 keer </h2> vindt 'n computer die ene missende </h2> zonder enig probleem. Jij ook wel, maar daarna ben je misschien wel aan vakantie toe.

  Je kunt je css en (x)html zowel valideren als 't online staat, als wanneer 't nog in je computer staat. Web Developer ('n Firefox-extensie) heeft zelfs 'n mogelijkheid om de html voortdurend, bij elke wijziging, opnieuw te valideren. (Die mogelijkheid is er ook bij css, maar daar wordt altijd aangegeven dat 't valid is, wat je er ook aan onzin in zet. Maar als je in de balk op css klikt ga je naar de echte validator, en die controleert wel goed.)

  (x)html kun je valideren op: validator.w3.org

  css kun je valideren op: jigsaw.w3.org/css-validator

  Valideren kan helpen om gekmakende fouten te vinden. Valid code garandeert ook dat de weergave in verschillende browsers (vrijwel) hetzelfde is. En valid code is over twintig jaar ook nog te bekijken.

Toegankelijkheid en zoekmachines

Toegankelijkheid (accessibility in het Engels) is belangrijk voor bijvoorbeeld blinden die een spraakbrowser gebruiken, of voor motorisch gehandicapte mensen die moeite hebben met het bedienen van een muis. Een spider van een zoekmachine (dat is het programmaatje wat de site indexeert voor de zoekmachine) is te vergelijken met een blinde. Als je je site goed toegankelijk maakt voor gehandicapten, is dat dus gelijk goed voor een hogere plaats in een zoekmachine. Dus als je 't niet uit sociale motieven wilt doen, kun je 't uit egoïstische motieven doen.

(Op die plaats in de zoekmachine heb je maar beperkt invloed. De toegankelijkheid van je site is maar één van de factoren, maar zeker niet onbelangrijk.)

Als je bij het maken van je site al rekening houdt met toegankelijkheid, is dat nauwelijks extra werk. 't Is ongeveer te vergelijken met inbraakbescherming: doe dat bij 'n nieuw huis en 't is nauwelijks extra werk, doe 't bij 'n bestaand huis en 't is al snel 'n enorme klus.

Enkele tips die helpen bij toegankelijkheid:

• Gebruik altijd een alt-beschrijving bij een afbeelding. De alt-tekst is wat wordt gebruikt, als afbeeldingen niet kunnen worden gezien (dat geldt dus ook voor zoekmachines). Als je iets wilt laten zien als je over de afbeelding hovert, gebruik daar dan het title-attribuut voor, niet de alt-beschrijving.
• Gebruik bij een link een title, waarin je omschrijft waar de link naar toe leidt.

• Accesskeys (sneltoetsen) kun je beter niet gebruiken. Deze gaven te veel problemen, omdat ze vaak dubbelop zijn met sneltoetsen voor de browser of andere al gebruikte sneltoetsen. Bovendien is voor de gebruiker meestal niet duidelijk, welke toetsen het zijn.

  In de komende html 5 waren ze eerst niet toegestaan, maar inmiddels lijkt het erop dat ze toch worden toegestaan, maar op 'n andere manier dan in html 4.01. Ik ga ze zelf pas weer gebruiken, als duidelijk is hoe ze gaan werken, en als ze beter zijn uitgedacht dan in html 4.01 het geval was, want bij een goede toepassing is het op zich een heel goed idee.

• Met behulp van de tab-toets (of op 'n soortgelijke manier) kun je in de meeste browsers door de links lopen. Elke tab brengt je één link verder, shift-tab één link terug. Met behulp van tabindex kun je de volgorde aangeven waarin de tab-toets werkt. Zonder tabindex wordt de volgorde van de code aangehouden, maar soms is een andere volgorde logischer.

• Vaak kunnen bepaalde delen van de code, zoals de header en links, met 'n simpele ingreep als position: op een lagere plaats worden neergezet in de code. 'n Blinde wordt er niet vrolijk van als elke pagina begint met het voorlezen van dezelfde zestien links. En 'n zoekmachine hecht meer waarde aan hoger staande tekst dan aan lager staande, dus je kunt beter inhoud dan header of links bovenaan hebben staan.

  Ik doe dat in de voorbeelden vaak niet, omdat het van geval tot geval bekeken moet worden. En voor veel mensen zullen de voorbeelden zo al ingewikkeld genoeg zijn.

  Een andere mogelijkheid is een zogenaamde skip-link: een link die je buiten het scherm parkeert met behulp van css, zodat hij normaal genomen niet te zien is. Zo'n link is wel zichtbaar te maken in speciale programma's zoals spraakbrowsers. Die link staat boven het menu en linkt naar de inhoud van de pagina, zodat mensen met één klik het hele menu kunnen passeren.

• Van oorsprong was html een taal om wetenschappelijke documenten weer te geven, pas later is hij gebruikt voor lay-out. Maar daar is hij dus eigenlijk nooit voor bedoeld geweest. Het gebruiken van html voor lay-out leidt tot enorme problemen voor gehandicapten en tot een lage plaats in zoekmachines.

  De html hoort alleen inhoud te bevatten, lay-out doe je met behulp van css. Die css moet in een extern stylesheet staan of, als hij alleen voor één bepaalde pagina van toepassing is, in de head van die pagina. Zoekmachines zijn ook niet dol op een oerwoud van inline-stijlen (dat zijn stijlen in de tag zelf: <div style="...">.)

• Breng een logische structuur aan in je document. Gebruik een <h1> voor de belangrijkste kop, een <h2> voor een subkop, enz. Spraakbrowsers en dergelijke kunnen van kopregel naar kopregel springen. En een zoekmachine gaat ervan uit dat <h1> belangrijke tekst bevat.

  Dit geldt voor al dit soort structuurbepalende tags.

  Als een <h1> te grote letters geeft, maak daar dan met behulp van je css 'n kleinere letter van, maar blijf die <h1> gewoon gebruiken. Op dezelfde manier kun je al dit soort dingen oplossen.

• Een table is fantastisch, maar alleen als die wordt gebruikt om een echte tabel weer te geven, niet als hij voor opmaak wordt misbruikt. In het verleden is dat op grote schaal gebeurd bij gebrek aan andere mogelijkheden. Een tabel is, als je niet heel erg goed oplet, volstrekt ontoegankelijk voor gehandicapten en zoekmachines. Het lezen van een tabel is ongeveer te vergelijken met het lezen van een krant van links naar rechts: niet per kolom, maar per regel. Dat gaat dus alleen maar goed bij een echte tabel zoals een spreadsheet. In alle andere gevallen garandeert 'n tabel 'n lagere plaats in een zoekmachine.

• Frames zijn een volstrekt verouderde techniek, die heel veel nadelen met zich meebrengt. Deze zijn hier netjes op een rijtje gezet: Webrichtlijnen. iframes hebben voor een deel dezelfde nadelen.

  Als je 'n stuk code vaak wilt gebruiken, zoals 'n menu dat op elke pagina hetzelfde is, include dat dan met PHP of SSI. Dan ziet iedereen (ook 'n zoekmachines dus!) alles als één pagina in plaats van als los zand aan elkaar hangende teksten.

• Geef de taal van het document aan, en bij woorden en dergelijke die afwijken van die taal de afwijkende taal met behulp van lang="..". Ik doe dat op mijn eigen site maar af en toe, omdat de tekst (en vooral de code) een mengsel is van Engels, Nederlands en eigengemaakte namen. Dit soort teksten is gewoon niet goed in te delen in een taal.
• Gebruik de tag <abbr> bij afkortingen. Doe dat de eerste keer op een pagina samen met de title-eigenschap: <abbr title="en dergelijke">e.d.</abbr>. Daarna kun je op dezelfde pagina volstaan met <abbr>e.d.</abbr>. Doe je dit niet, dan is er 'n grote kans dat 'n spraakbrowser e.d. uit gaat spreken als Ed, en 'n zoekmachine kan er ook geen chocola van maken.

• De spider van 'n zoekmachine, spraakbrowsers, en dergelijke kunnen geen plaatjes 'lezen'. Het is soms verbazingwekkend om te zien hoe veel, of eigenlijk: hoe weinig tekst er overblijft op een pagina als de plaatjes worden weggehaald. Het zelfde geldt voor die fantastisch mooie flash-pagina's, als daarbij geen voorzieningen voor dit soort programma's zijn aangebracht.

  Op Linux kun je met Lynx kijken hoe je pagina eruitziet zonder plaatjes en dergelijke, als echt alleen de tekst overblijft.

  In Windows kun je in Firefox de extensie Yellowpipe Lynx Viewer Tool installeren, waarmee je Lynx kunt imiteren: Yellowpipe Lynx Viewer Tool

  In Windows kun je ook het gratis programma WebbIE installeren. WebbIE laat de pagina zien, zoals een spraakbrowser en dergelijke hem zien. WebbIE is te downloaden vanaf www.webbie.org.uk. Nog een soortgelijk gratis programma is WebFormator.

  De Firefox-extensie Web Developer heeft de mogelijkheid om 'n pagina te bekijken zonder css en/of afbeeldingen.

  Tenslotte kun je je pagina nog online laten controleren op 'n behoorlijk aantal sites. Ik noem er hier enkele. Helaas zijn ze bijna allemaal Engelstalig.

  colorfilter.wickline.org Laat zien hoe een kleurenblinde de site ziet.

  contentquality.com Test op toegankelijkheid. Heel overzichtelijk.

  wave.webaim.org Deze laat grafisch zien hoe de toegankelijkheid is. Heel erg duidelijk, maar bij grotere pagina's wordt 't al snel erg chaotisch.

  Omdat ze de uitleg van de icoontjes heel goed hebben weten te verstoppen, geef ik de link daarvan ook maar gelijk: wave.webaim.org/icons

  www.webrichtlijnen.nl/toetsen De enige Nederlandstalige site. Test op toegankelijkheid.

Getest in

Laatst gecontroleerd op 8 november 2010.

Dit voorbeeld is getest in Firefox, Opera, Safari, Google Chrome, Internet Explorer 7 en 8 in de resoluties 800x600, 1024x768 en 1280x1024. Steeds met de laatste versie van die browsers, omdat ik geen zin heb om rekening te houden met mensen die met zwaar verouderde browsers surfen. Dat is trouwens vragen om ellende, want updates van browsers hebben heel vaak met beveiligingsproblemen te maken. In de resoluties 1024x768 en 1280x1024 is ook in- en uitzoomen en een kleinere en grotere letter getest. Eventuele problemen staan bij Bekende problemen.

Naast deze 'gewone' browsers is alles ook getest in Lynx, WebbIE, Jaws en Fangs Screen Reader Emulator. Lynx is een browser die alleen tekst laat zien en geen css gebruikt. WebbIE is een browser die gericht is op mensen met een handicap. Jaws is een screenreader, zoals die door blinden wordt gebruikt. Fangs Screen Reader Emulator is een extensie bij Firefox, die een screenreader simuleert.

Als het voorbeeld in deze drie programma's toegankelijk is, zou het in principe toegankelijk moeten zijn in alle aangepaste browsers en dergelijke. En dus ook voor zoekmachines, want een zoekmachine is redelijk vergelijkbaar met een blinde. Eventuele opmerkingen over de toegankelijkheid van dit voorbeeld staan bij Opmerkingen.

Nieuwe browsers test ik pas als ze uit het bèta-stadium zijn, omdat er anders 'n redelijke kans is dat ik 'n bug zit te omzeilen die voor de uiteindelijke versie nog gerepareerd wordt. Dit voorbeeld is alleen getest in de hierboven met name genoemde browsers. Vragen over niet-geteste browsers kan ik niet beantwoorden, en het melden van fouten in niet-geteste browsers heeft ook geen enkel nut. (Melden van fouten, problemen, enz. in wel geteste browsers: graag!)

Wijzigingen

18 september 2009:

Nieuw opgenomen.

8 november 2010

• Inmiddels is er geen verschil in weergave meer tussen aan de ene kant Opera en aan de andere kant Firefox, Safari en Google Chrome. Dit is aangepast in de tekst.
• Doorzichtige schaduw toegevoegd (helemaal onderaan).
• Bij de vorige versie stond nog code voor Internet Explorer 6. Omdat de code is veranderd en ik niet meer op deze browser test, heb ik nu alle aanpassingen voor en verwijzingen naar deze browser verwijderd. Mogelijk werkt het hetzelfde als in Internet Explorer 7, mogelijk ook niet.
• Vanwege alle veranderingen is de tekst volledig herschreven.

Bekende problemen

Oudere browsers

Browsers die wel css gebruiken, maar text-shadow nog niet kennen, kunnen in bepaalde omstandigheden tekst helemaal onzichtbaar maken. Zie verder bij Firefox ondersteunt...

Valideren

Er zit een bug in de validator voor css 3, waardoor je bij een combinatie van text-shadow en rgba() een foutmelding krijgt over een ongeldige waarde. Dit werkt gewoon, het is alleen de validator die protesteert. Dit is allemaal nog vrij nieuw, en ik neem aan dat deze bug wel snel zal verdwijnen.

Printen

De meer ingewikkelde 'schaduwen' gaan redelijk de mist in bij printen. Als de pagina printbaar moet zijn, zou ik dus 'n stylesheet voor de printer maken, waarin hooguit de 'gewone' schaduwen aan blijven staan.

Safari en Google Chrome

Als geen kleur wordt opgegeven, wordt in Firefox en Opera de tekstkleur gebruikt. In Google Chrome en Safari wordt echter helemaal geen schaduw weergegeven, als je geen kleur opgeeft.

Internet Explorer 7 en 8

• Internet Explorer kent text-shadow niet. Deze browsers gebruiken iets dat door Microsoft zelf is bedacht en veel minder mogelijkheden heeft. Ik heb geprobeerd de andere browsers zo goed mogelijk te imiteren, maar soms is dat gewoon onmogelijk:

  
  Weergave in Internet Explorer 7 en 8.

  
  Weergave in alle andere browsers.

  
  Weergave in Internet Explorer 7 en 8.

  
  Weergave in alle andere browsers.

  
  Weergave in Internet Explorer 7 en 8.

  
  Weergave in alle andere browsers.

  
  Weergave in Internet Explorer 7 en 8.

  
  Weergave in alle andere browsers.

  Als je gebruik zou maken van extra paragrafen en extra spans en zo, dan zou je misschien nog wat van dit soort dingen kunnen imiteren. Maar dat betekent, dat de tekst er twee keer of zelfs nog vaker in komt te staan, en dat is rampzalig voor de toegankelijkheid voor spraakbrowsers en dergelijke.

  Omdat alleen maar de schaduw wegvalt, lijkt het me beter dat niet te doen.

• De schaduwen komen niet buiten het element waar de tekst in staat. Alle schaduw daarbuiten wordt gewoon afgekapt. Zie verder bij De schaduwen vallen...
• De tekst die schaduw krijgt móét in een blok-element staan. Omdat tekst van zichzelf een inline-element is, kan het daarom nodig zijn de tekst in een span te zetten en deze in een blok-element te veranderen. Dat is in dit voorbeeld ook gedaan.
• Bij Internet Explorer 7 moet bij dat blok-element ook nog hasLayout aanstaan. 'n Beknopte uitleg daarvan staat in de beschrijving van de code bij Filters werken in...
• Als de tekst in een blok-element staat met een border of zo, krijgt ook die border schaduw. In tegenstelling tot text-shadow, dat alleen echte tekst schaduw geeft, geeft Dropshadow aan álles in het element een schaduw.
• Als je dit filter op een <p> gebruikt en een kleur opgeeft, wordt die kleur genegeerd. Als je de tekst in een span zet binnen de <p>, wordt de kleur wel gebruikt. Welkom in de wondere wereld van Internet Explorer.
• Een schaduw in combinatie met doorzichtigheid is onmogelijk.

• In theorie zou het mogelijk moeten zijn meerdere filters te gebruiken bij Internet Explorer 7 en 8. Dat zou dan meerdere schaduwen moeten opleveren, waardoor je de chaotische schaduw zou kunnen imiteren. Tja, je kunt daar veel van zeggen, maar niet dat het resultaat níét chaotisch is:

  

  Het lijkt erop dat de tweede schaduw twee keer wordt weergegeven, de derde drie keer, enz.