Dzień dobry!
Po lekturze artykułów z Waszego działu Webmastering, a także szeregu witryn internetowych i innych czasopism nasunęła mi się pewna, chyba istotna uwaga krytyczna. Chodzi o serwis CSS Zen Garden (http://www.csszengarden.com), często cytowany w ww. mediach i powszechnie uznawany za przykład wzorcowego wykorzystania stylów CSS. Otóż prawdziwie uniwersalne style CSS, a dokładniej strony WWW na nich oparte, powinny charakteryzować się możliwie najszerzej pojętą DOSTĘPNOŚCIĄ, a co za tym idzie – SKALOWALNOŚCIĄ. Co to znaczy?
Jak podaje Wikipedia: \”Dostępność (ang. accessibility) to nauka i zbiór standardów opisujących metody i wytyczne tworzenia serwisów WWW w sposób umożliwiający wygodny dostęp jak najszerszemu gronu odbiorców. Dostępne serwisy mogą być bez trudu wykorzystywane przez osoby niewidzące, niedowidzące, użytkowników mniej popularnych przeglądarek czy platform mobilnych. Standardy określające dostępność dla użytkowników niepełnosprawnych to WAI (wydany przez W3C – http://www.w3.org) (…).\”
O ile samo wprowadzenie stylów CSS sprawiło, że znacznie łatwiej teraz robić strony spełniające warunek dostępności, o tyle wielu webmasterów wciąż nie wykorzystuje możliwości tkwiących w CSS-ach. A trzeba pamiętać, że dzisiejsze style CSS to już nie to samo co kiedyś. Obecna wersja 2.1 ma naprawdę imponujące możliwości, które są obsługiwane praktycznie identycznie we wszystkich najnowszych przeglądarkach – FF2, IE7, Operze 9 i innych.
Wciąż duża liczba osób tworzących strony WWW myśli, że jeśli w pliku CSS zdefiniuje rozmiar czcionki w pikselach, to nie będzie się ona powiększać przy korzystaniu z opcji Rozmiar tekstu | Zwiększ (przykład z Firefoksa). Nic bardziej mylnego. Tak było, owszem, w starszych wersjach przeglądarek, ale teraz, gdy nastała epoka Firefoksa 2.0, IE7 oraz Opery 9, czcionki, których rozmiar jest wyrażony w pikselach TEŻ SIĘ ZWIĘKSZAJĄ. Dlaczego o tym piszę? Bo już samo myślenie w kategoriach \”dam czcionkę, która będzie miała z góry ustaloną wielkość bez względu na to co zrobi użytkownik\” jest sprzeczne z zasadą dostępności. Czcionki na stronach WWW powinny się skalować, a więc i układ graficzny (layout) stron powinien być tak zaprojektowany, aby po zwiększeniu bądź zmniejszeniu czcionki nic się nie \”rozjeżdżało\”.
Dobrze wykonany layout powinien \”przeżyć\” bez szwanku dla struktury (czytelności) przynajmniej 2 \”powiększenia\”, a lepiej, gdyby mógł ich przeżyć 4. Wówczas mamy absolutną pewność, że nawet osoby z dużym upośledzeniem zmysłu wzroku będą mogły odczytać zawarte na stronie treści. Webmasterzy widzący normalnie zwykle nie zauważają tego problemu na zasadzie \”skoro ja to widzę, inni też to zobaczą\”. Tymczasem to, co dla przeciętnych ludzi jest dobrze dostrzegalne, dla ludzi z wadami wzroku (a wady wzroku mają bardzo różne natężenie, od lekko tylko uszkodzonego narządu wzroku do prawie całkowitej ślepoty) może być nie do rozpoznania przy zadanej, domyślnej wielkości czcionki. Stąd też muszą oni często używać opcji Rozmiar tekstu | Zwiększ (lub analogicznej w innych przeglądarkach).
Pomijam już kwestię osób całkowicie ociemniałych, które też powinny być w stanie odczytać poprawnie zrobione strony internetowe za pomocą odpowiedniego oprogramowania czytającego ich zawartość (dlatego m.in. obowiązkowy jest atrybut alt w elemencie ), bo to zupełnie oddzielny rozdział.
Biorąc zatem pod uwagę szeroko pojęte kryterium dostępności stron internetowych, niestety nawet z prestiżowego zbioru w serwisie CSS Zen Garden należałoby usunąć gdzieś między 10 a 40 procent projektów (!) – zależnie od tego, jak ściśle potraktujemy kryterium dostępności.
Na dowód powyższych wywodów załączam kilka przykładowych zrzutów (wszystkie pochodzą z Firefoksa 2.0.0.1) wybranych projektów z CSS Zen Garden – 2 poprawne i 4 niepoprawne. To niestety tylko czubek góry lodowej, CSS Zen Garden zawiera zaskakująco dużo niepoprawnych projektów.
Wniosek: omawiany serwis jest niewątpliwie doskonałą inicjatywą, propaguje prawidłowe zasady tworzenia stron przy użyciu CSS. Jeśli jednak ma to być naprawdę rzetelne forum, wzorcowe dla wszystkich webmasterów, to jego administratorzy powinni przeprowadzać bardziej wnikliwą selekcję. W przeciwnym razie serwis może się paradoksalnie przyczynić do upowszechnienia złych nawyków.
Stworzenie kodu XHTML i CSS, który spełniałby w stu procentach wyżej wymienione postulaty jest bardzo trudne. No ale po to właśnie istnieją takie serwisy jak CSS Zen Garden – aby pokazywać jak należy projektować.
Przepraszam, że się tak rozpisałem, uważam jednak, że problem dostępności stron internetowych jest wciąż niedostrzegany lub lekceważony, a takie działanie szczególnie w przypadku przytaczanych za wzór serwisów w rodzaju CSS Zen Garden jest po prostu szkodliwe.
X.X.http://www.csszengarden.com/?cssfile=187/187.css
Projekt poprawny. Czcionka w rozmiarze domyślnym (a) i po 4-krotnym użyciu opcji Rozmiar tekstu | Zwiększ (b) – wszystko jest w dalszym ciągu czytelne, kolumny się nie „rozjechały”.
http://www.csszengarden.com/?cssfile=195/195.css
Projekt poprawny. Rozmiar czcionki domyślny (a) i po 4-krotnym użyciu opcji Rozmiar tekstu | Zwiększ (b) – wszystko pozostało czytelne.
http://www.csszengarden.com/?cssfile=201/201.css
Projekt niepoprawny. Rozmiar czcionki domyślny (a) oraz tylko raz użyta opcja Rozmiar tekstu | Zwiększ (b) – i już nagłówek w lewym górnym przestał być widoczny…
http://www.csszengarden.com/?cssfile=178/178.css
Projekt niepoprawny. Rozmiar czcionki domyślny (a), a co się dzieje po 4-krotnym zwiększeniu rozmiaru tekstu (b)? Zniknęły nazwy wszystkich działów w kolumnie po lewej, a nagłówek z prawej zachodzi na obrazek; niżej, w niewidocznych tu fragmentach strony tekst z kiolumny lewej zachodzi na kolumnę prawą czyniąc ją nieczytelną
http://www.csszengarden.com/?cssfile=168/168.css
Projekt niepoprawny. Pała z dostępności! Autor projektu, aby uniknąć kłopotów ze skalowaniem lewej kolumny cały zawarty w niej tekst zamienił na pliki graficzne GIF! W rezultacie ta część strony w ogóle nie podlega skalowaniu
http://www.csszengarden.com/?cssfile=164/164.css
Projekt niepoprawny. Czy taki projekt powinien się w ogóle znaleźć w szacownym serwisie CSS ZEN Garden? Spróbujcie coś tu rozczytać po prawej stronie (widok po 3-krotnym powiększeniu tekstu)
