Fronteers — vakvereniging voor front-end developers

WCAG 2.0: regels voor tekstschaalbaarheid achterhaald?

Richtlijn 1.4 Onderscheidbaar: Maak het voor gebruikers gemakkelijker om content te horen en te zien, waaronder scheiding van voorgrond en achtergrond.

1.4.4 Herschalen van tekst: Behalve voor ondertitels voor doven en slechthorenden en afbeeldingen van tekst, kan tekst zonder hulptechnologie tot 200 procent schalen zonder verlies van content of functionaliteit. (Niveau AA)

Is het -nu browserzoom breed ondersteund wordt- nog wel nodig om daarvoor je layout in ems of procenten op te maken? (Zie Sufficient Techniques for 1.4.4 - Resize text.) IE6 is toch stervende?

En wat te denken van de tekstgrootte opties (Aa) die je nog op veel websites ziet, bijvoorbeeld op www.ns.nl ? Toch nog wel handig voor mensen die de browserzoom niet kennen, of beter schrappen en de bezoeker uitleggen hoe hij/zij zelf de tekst kan vergroten?

Reacties

1 Wilco Fiers op 16-03-2011 om 09:06 uur:
Achterhaald? Wat is er achterhaald aan tekst groter kunnen maken. De richtlijn stelt niet dat de tekst onafhankelijk van de rest van de site vergroot moet worden.

Aaa links zijn zelden voldoende om aan deze richtlijn te voldoen omdat ze tekst niet tot 200% vergroten, meestal gaan die niet verder dan 150%.

IE6 is ook niet zo'n probleem hier. Er zijn voldoende browsers beschikbaar die wel kunnen zoomen, waardoor het IE6 verhaal niet echt op gaat voor mensen die tekstvergroting nodig hebben. Alleen in gesloten omgevingen zoals op een intranet kan dat een probleem zijn.
2 Wilco Fiers op 16-03-2011 om 09:08 uur:
Serieus, kan ik een interne link maken met het website veldje hier boven? Wow. Ok, oeps.
3 Jules Ernst op 16-03-2011 om 12:05 uur:
Ik heb tegenwoordig vaak een leesbril nodig, en vindt het prettig als je standaard met een iets groter lettertype de website kan bekijken. Dat soms de hele site meeschaalt is vervelend, omdat je dan al snel met een scrollbar onder wordt opgezadeld. Naar mijn mening moet deze dan ook bij de gebruiker liggen. De meeste browser ondersteunen inmiddels wel de 2 keuzes, alleen lettergrootte aanpassen of de hele layout mee aanpassen.

Ik bedenk me nu dat als de website met adaptieve layout meeschaalt dat je dan je zomaar een andere site krijgt te zien. Eens nadenken of ik dat wenselijk vind. (Maar het is wel gaaf om een site zo te zien veranderen :-) )
4 Janita Top op 16-03-2011 om 13:00 uur:
En dan hoef je ook niet horizontaal te scrollen :-).
5 Vasilis op 16-03-2011 om 13:14 uur:
Als je pixels gebruikt maak je bepaalde functionaliteit die in sommige browsers zit kapot.
De vraag is altijd of je wel ems of procenten moet gebruiken. De vraag zou natuurlijk moeten zijn waarom je pixels zou gebruiken. Kan iemand daar antwoord op geven?
6 Mathias op 16-03-2011 om 13:34 uur:
Vasilis: Pixels zijn natuurlijk veel makkelijker in gebruik. 14px is 14px, maar 1em of 100% kan verschillende dingen betekenen afhankelijk van de context.
7 Janita Top op 16-03-2011 om 13:42 uur:
@vasilis bedoel je voor de tekst of ook voor alle tekst-containers? Dat laatste is namelijk lastiger uit te voeren.
8 Wilco Fiers op 16-03-2011 om 14:09 uur:
100% width is heel wat anders dan een width van 1em. Ik ben zelf slechtziend, en persoonlijk ben ik erg blij met sites die goed schalen. Dat is een kunst op zich hoor. Iets wat wel heel goed is om te doen dat is om je content gedeelte een min-width van 100% te geven. Dan hoef je nooit horizontaal te scrollen bij het lezen van content.
9 Vasilis op 16-03-2011 om 14:19 uur:
@Mathias: de grootte van 14px is ook weer afhankelijk van het device waarmee je kijkt, zo eenduidig is dat nu ook weer niet.

@Janita Top: Sowieso voor tekst en wat mij betreft ook voor layout. Ik snap nooit zo goed wat daar precies lastig aan is.
10 Janita Top op 17-03-2011 om 09:15 uur:
Wanneer je ingewikkelde designs hebt met veel lagen over elkaar heen, is het moeilijk om alles relatief te maken zodat het niet uit elkaar valt als je zoomt.
Het lijkt me het belangrijkst dat de tekst zelf goed schaalt en nergens onder/overheen valt. Dan vind ik het prima als de containers daarmee zelf niet meeschalen. Bovendien heb je dan ook niet het probleem dat de site te breed wordt en onderdelen buiten beeld vallen.
En als je toch wilt dat niet alleen de tekst maar het hele design meeschaalt, kun je de 'gewone' browserzoom gebruiken.

@wilco: welke methode heeft jouw voorkeur?
11 Mathias op 17-03-2011 om 09:15 uur:
@Vasilis: Sure. Ik antwoord alleen maar op de vraag die je stelde :)
12 Wilco Fiers op 17-03-2011 om 13:17 uur:
@Janita: Liquid layouts zijn (voor mij) verreweg het beste. Eén van de meest belangrijke dingen om nog te doen naast zorgen dat tekst niet over elkaar gaat staan of afgesneden worden, dat is ervoor zorgen dat je niet horizontaal hoeft te scrollen om de content te kunnen lezen. Navigatie maakt niets uit, maar tekst alleen kunnen lezen met horizontaal scrollen is erg vervelend. Ik merk ook zelf vaak dat ik veel verder inzoom dan ik echt nodig heb, puur vanwege leesgemak, dus zelfs 400% komt wel voor bij mensen die op zich geen zoom software nodig hebben.
13 Egor Kloos op 17-03-2011 om 20:22 uur:
Het is mijn mening dat je voor fonts altijd met een relatieve maatvoering moet werken. Dus nooit in pixels. Je weet maar nooit wanneer iemand zijn browser voorkeuren heeft ingesteld voor een groter font. Helaas werken veel sites nog met px voor fonts. Ook zie dat 'ontwikkelaars' in de valkuil trappen door overal een font-size in te stellen. De 'trail & error' methode geeft ons maar slechte kwaliteit een povere duurzaamheid.

Het is van belang dat front-enders goed met patronen kunnen omgaan en uitstekend met de cascade kunnen werken. Veel problemen met toegankelijkheid en duurzaamheid ontstaan door een gebrek aan structuur en kwaliteit van de HTML en CSS.

Tekstschaalbaarheid is voor groot deel een kwaliteitsprobleem en dus moeten we er nog op blijven letten.
14 Mark Lindhout op 20-03-2011 om 15:01 uur:
Ik ben het wel met Egor eens betreft de relatieve maatvoering.

Goede tekstgroottes moeten allemaal relatief van een hoog niveau in de cascade zijn. Zelf zet ik 't altijd op <body>. Bij voorkeur in procenten. Dan is een CSS reset wel een absolute vereiste, omdat niet alle browsers dezelfde grootte verstaan onder 100%.

En Wilco, een box-model percentage zoals width: 100%; is iets heel anders als een percentage zoals dat voor font-size wordt gebruikt. (Het zou wel onhandig zijn om één letter te hebben die zo groot is als het hele venster :P) Maar het absolute voordeel van percentages is dat het net zo werkt als vroeger de <font size="+1"> waarmee je binnen de context van het stuk tekst relatief groter of kleiner kon kiezen. Altijd handig voor styling van bijvoorbeeld all-caps stukjes. Ik gebruik dat bijvoorbeeld bij <abbr>'s. Dan zet ik ze op all-caps en vervolgend maak ik de letters iets als 75% van de basisgrootte, waarmee je een typografisch heel mooie afkorting krijgt.
15 Mallory op 20-03-2011 om 18:48 uur:
IE6 is misschien toch dood (maar niet bij onze klanten!), maar IE7, 8 en 9 doen ook niet mee met tekst-vergroting met px-tekst. Echt niet.

(bij tekst-vergroting bedoel ik niet zoom)

Mijn containers zijn ook meestal in em-maten gezeten.
16 Monique op 23-03-2011 om 16:19 uur:
Ik vind het ook altijd wel een "issue".

Het is idd zo dat mensen via de browser kunnen schalen, maar juist die mensen die dit nodig hebben, daarvan vraag ik mij af of ze zoveel van browsers weten dat ze weten dat ze de schaalgrootte kunnen instellen...?

En dan commercieel gezien. Uiteindelijk wil een klant graag een website die er uitziet zoals hij hem bedoeld heeft. En als dan alles meeschaalt en gedeeltes naast het beeldscherm verdwijnen...?

Is het een optie om de layout van sfeer, menu's e.d. vast te zetten en alleen de tekstgrootte van de content schaalbaar te maken? Die eersten hebben over het algemeen toch al een wat grotere lettergrootte.
17 Janita Top op 23-03-2011 om 20:48 uur:
Als het niet lukt / niet wenselijk is om alle onderdelen vloeiend te maken dan kun je inderdaad alleen de teksten laten meeschalen door ze in em of procenten te zetten, en de containers in pixels. Daardoor wordt de tekst wel groter als je de tekstgrootte aanpast via de browseroptie of de Aa knoppen, maar blijft je totale layout overeind. Ik raad dan wel aan ALLE tekst relatief te maken, dus ook de menu-items. Die lijken misschien al wel groot, maar dat is vast geen 400% zoals hierboven werd aangegeven...

Wat betreft het uitleggen van de browseropties, bijvoorbeeld de BBC doet dit ook, zie http://bbc.in/gUWzoh (duurt wel even voor je op deze pagina bent aangekomen trouwens....). Dat duurt dan even wat langer, maar vervolgens ben je als bezoeker voor alle sites meteen klaar, i.p.v. alleen voor die ene site.
Plaats een reactie