Op dit moment zijn we bij Info.nl met een aantal projecten bezig waarbij webtoegankelijkheid (accessibility) een prominente rol speelt. Zelf zet ik een Photoshopontwerp om in HTML en CSS. (Het ontwerp is deze keer door een externe designer aangeleverd.) Het is haast onvermijdelijk dat je dan op een punt komt waarbij ontwerp en toegankelijkheid elkaar gaan bijten. Onlangs bereikte ik zo’n punt.

De styleguide die de ontwerper oplevert bij zijn design, zegt bijvoorbeeld dat “tekst A” 11 pixels groot moet zijn. Leuk denk ik dan, in IE6 op Windows waar niet gestoeid is met de tekstgrootte, moet “tekst A” er dus uitzien als 11 pixels. Een toegankelijke site moet echter schaalbaar zijn, dus in mijn CSS gebruik ik geen pixels, maar pas ik Richard Rutters techniek van textsizing toe (How to size text using ems).

Hetzelfde geldt voor de hoogte van invoervelden in een formulier. Deze mogen niet vastgezet worden op een bepaalde pixelhoogte, omdat je dan het risico loopt dat bij schalen de tekst onleesbaar wordt. De hoogte van de invoervelden definieer ik daarom ook in em. En dat is het openen van de doos van Pandora. In IE lijnt het invoerveld mooi uit met een plaatje ernaast, maar in Firefox is hij 1 pixel te hoog.

Er zijn belangrijkere dingen in de wereld dan 1 pixel hoogteverschil. Maar nee, daar hing de ontwerper aan de lijn. Hij had mijn mooie ‘feature’ betrapt in Safari: “Het invoerveld is 1 pixel te hoog!” Na enige uitleg begreep hij waarom het invoerveld niet precies zo hoog was als in zijn design. Toch vond hij het niet mooi.

Ik heb nu drie keuzes:

1. Ik zet de invoerveldhoogte vast in pixels.
2. Ik laat de boel zoals het nu is en stoot de designer tegen het hoofd.
3. Ik voeg aan mijn CSS-files en paar nare hacks toe die de hoogte van de invoerveld browserafhankelijk regelen.

Optie 1 valt af, want we willen toegankelijk zijn. Optie 2 valt ook af, want de designer moet mijn ontwerpen goedkeuren. Dus komt optie 3 in beeld: het hacken en tweaken van de CSS. Ik heb dit punt nu met lage prioriteit onderaan mij to-do-list gezet en hoop dat het daar vanzelf van afvalt. Het 1 pixel te hoge invoerveld beschouw ik maar als mijn handtekening op de site.

Dit bericht was geplaatst door Tom op Wednesday 19 October 2005 om 21:46 uur en is gearchiveerd onder toegankelijkheid, webstandaarden. Je kan de reacties hierop volgen via de RSS 2.0 feed. Je kan een bericht achterlaten, maar pingen en trackback is niet mogelijk.