Technikai információ
Web szabványok ellenőrző listája
Web szabványok – sokkal többet jelent, mint „táblázat nélküli” weblapokat
A web szabványok fogalmát sokan sokféleképpen értelmezik. Van akinek táblázatok nélküli tervezést, másoknak érvényes kód használatát jelenti. A web szabványok ennél sokkal átfogóbbak. A web szabványokkal készített weboldalnak ragaszkodnia kell a szabványokhoz (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG, stb.) és követnie kell a legjobb módszereket (érvényes kódolás, elérhető kód, szemantikailag helyes kód, felhasználóbarát webcímek, stb.).
Más szavakkal egy szabványos weboldal tiszta, sallangoktól mentes, CSS alapú, elérhető, használható és keresőbarát.
A listáról pár szó
A lista nem teljes. Valószínűleg még nagyon sok mindent lehetne hozzáadni. Fontos, hogy ez nem egy olyan lista, amelyből mindennek meg kell felelnie egy weboldalnak. Inkább csak egy irányadó ajánlás, amely jól jöhet a következő esetekben:
- a webes szabványok bemutatásánál
- weblap készítőknek, a weboldal készítése alatt
- segítség olyan weblap készítőknek, akik most kezdenek érdeklődni a webes szabványok iránt
Az eredeti lista megtalálható a Max Design (angol) weblapon.
A 
jelöli azokat a linkeket, amelyek más webhelyekre vezetnek. Ezek általában angol nyelvűek és új ablakban/fülön nyílnak meg.
A lista
- A kód tulajdonságai
- Megfelelő Doctype-ot használ az oldal?
- Használ az oldal karakter beállítást?
- Érvényes (X)HTML-t használ az oldal?
- Érvényes CSS-t használ az oldal?
- Használ CSS trükköket az oldal?
- Használ az oldal felesleges azonosítókat (id) és osztályokat (class)?
- A kód jól struktúrált?
- Vannak nem működő linkek?
- Hogy teljesít az oldal sebesség/méret tekintetében?
- Vannak az oldalon JavaScript hibák?
- A tartalom és megjelenés elkülönítése
- A megjelenéshez teljesen CSS-t használ az oldal? (betűk, színek, szegélyek, térköz)
- Minden díszítő kép a CSS-ben van, vagy található az (X)HTML kódban is?
- Felhasználói hozzáférhetőség
- Információt hordozó képeknél használják-e az „alt” attribútumot?
- A szövegmérethez relatív egységeket használunk-e abszolút helyett?
- Ha a betűméretet növeljük, széttöredezik-e az oldal?
- Használ az oldal látható, oldalrészre ugró menüt?
- Használ-e az oldal elérhető űrlapokat?
- Használ-e az oldal elérhető táblázatokat?
- Megfelelő a színek világosság/kontraszt aránya?
- A fontos információ csak színekkel van jelölve?
- A legördülő menüknek van késleltetett érzékenysége? (a csökkentett motoros képességű látogatók miatt)
- Minden link egyértelműen értelmezhető? (a vak felhasználók miatt)
- Eszköz szintű hozzáférhetőség
- Megfelelően működik az oldal modern és régebbi böngészőkkel is?
- Elérhető a tartalom, ha a CSS-t kikapcsoljuk vagy nem támogatja a böngésző?
- Elérhető a tartalom, ha a képeket kikapcsoljuk vagy nem támogatja a böngésző?
- Működik az oldal szöveges böngészőkben (Lynx)?
- Nyomtatásban helyesen jelenik meg az oldal?
- Mobil eszközökön jól jelenik meg az oldal?
- Tartalmaz az oldal részletes meta adatokat?
- Jól működik az oldal a böngésző átméretezésekor?
- Alap használhatóság
- Egyértelmű a vizuális hierarchia?
- Könnyű megkülönböztetni a címsor szinteket?
- Könnyen érthető az oldal navigációs rendszere?
- Következetes a navigáció?
- A megfelelő nyelvezetet használja?
- Van oldaltérkép és kapcsolat felvevő lap? Könnyű megtalálni?
- Bonyolult weblapoknál van kereső az oldalon?
- Minden lapon megtalálható a link a kezdőlapra?
- A linkek aláhúzottak?
- A már meglátogatott linkek egyértelműen elkülönülnek? (pl. egyedi színnel)
- Weboldal kezelése
- Van felhasználóbarát 404-es hibalap, amely a honlapon belül bárhol működik?
- Rövid webcímeket használ az oldal?
- A webcímek működnek a „www” előtag nélkül?
- Van az oldalnak faviconja?
1. A kód tulajdonságai
1.a Megfelelő Doctype-ot használ az oldal?
A doctype (document type declaration) tudatja a kód hitelesítővel, hogy az (X)HTML melyik verzióját használjuk. A kódban mindig ez van a legelején. A doctype kulcseleme a szabványos weboldalaknak: e nélkül a kód (HTML, CSS) nem lesz érvényes.
További link:
- http://www.w3.org/QA/2002/04/valid-dtd-list.html
- http://css.maxdesign.com.au/listamatic/about-boxmodel.htm
- http://gutfeldt.ch/matthias/articles/doctypeswitch.html
1.b Használ az oldal karakter beállítást?
Ha az ágens (pl.: böngésző) nem találja a karakterbeállítást, akkor megeshet, hogy a felhasználó olvashatatlan szöveget kap. Ez a beállítás különösen fontos azoknak akik többnyelvű oldalt készítenek, de a karakterkódolás beállítása mindenkinek egyaránt fontos, aki XHTML/HTML-t vagy CSS-t készít.
Ágens (user agent): Olyan szoftver, mely webes tartalmat tölt be és jelenít meg a felhasználó számára. A felhasználói ágens lehet tehát web-böngésző, médialejátszó, plug-in és egyéb programok - ideértve a kisegítő technológiai eszközöket is - melyek segítségével web-tartalom használható.
További link:
1.c Érvényes (X)HTML-t használ az oldal?
Az érvényes kódot gyorsabban jeleníti meg a böngésző, mint a hibásat. Az érvényes kódot jobban jeleníti meg a böngésző, mint a hibásat. A böngészők egyre jobban követik a szabványokat, így egyre nagyobb szükség lesz arra, hogy érvényes és szabványos kódok szülessenek.
További link:
1.d Érvényes CSS-t használ az oldal?
Meg kell győződni arról, nincs hiba sem a HTML-ben sem a CSS-ben, mivel ha bármelyikben hiba van, a végeredmény összedobott munkára utalhat.
További link:
1.e Használ CSS trükköket az oldal?
Alapjában véve a trükkök használatáról mindenki szabadon dönt. Előfordulását befolyásolja a megoldások ismerete és az elérni kívánt sajátos dizájn.
wsg [kukac] webstandardsgroup [dot] org/msg05823.html" rel="external">Szabványos trükkök?
További link:
1.f Használ az oldal felesleges azonosítókat (id) és osztályokat (class)?
A honlapkészítők új ismeretek szerzésekor gyakran jó CSS-t szerkesztenek, de az XHTML-t rosszul rakják össze. Pontosabban a HTML kód tele van szükségtelen DIV-ekkel és ID-kel. Az eredmény: teljesen értelmetlen HTML és egy terjedelmes stíluslap.
1.g A kód jól struktúrált?
A szemantikailag (nyelvtanilag) helyes kód a HTML elemeket a rendeltetésüknek megfelelően használja. A jól struktúrált HTML nyelvtani jelentést hordoz sokféle ágens számára (stíluslapok nélküli böngészők, karakteres böngészők, PDA-k, keresőmotorok, stb.)
http://www.maxdesign.com.au/presentation/benefits/index04.htm
Ágens: Olyan szoftver, mely webes tartalmat tölt be és jelenít meg a felhasználó számára. A felhasználói ágens lehet tehát web-böngésző, médialejátszó, plug-in és egyéb programok - ideértve a kisegítő technológiai eszközöket is - melyek segítségével web-tartalom használható.
További link:
1.h Vannak nem működő linkek?
A nem működő linkek összezavarják a felhasználókat és meglehet, hogy elriasztják őket az oldal további látogatásától. Az ilyen linkek miatt nem képesek megfelelően indexelni a keresőmotorok a weboldalt.
További link:
1.i Hogy teljesít az oldal sebesség/méret tekintetében?
Nem akarok várni... Ez a válasz szinte minden webes felmérésben megtalálható. Még a szélessávú felhasználók is szenvednek a lassan letöltődő oldalaktól.
1.j Vannak az oldalon JavaScript hibák?
A böngészőkben található (jobb esteben) egy olyan konzol, amely értesít a JavaScript hibákról. Ilyen pl. a Mozilla Firefox-ban az Error Console, vagy az IE-ben a debugger. Ennek segítségével láthatjuk, hogy vannak-e Javascript hibák az oldalunkon.
2. A tartalom és megjelenés elkülönítése
2.a A megjelenéshez teljesen CSS-t használ az oldal? (betűk, színek, szegélyek, térköz)
Használjunk stíluslapokat a szerkezet és megjelenés kialakításához
2.b Minden díszítő kép a CSS-ben van megadva, vagy található az (X)HTML kódban is?
A webfejlesztők feladata, hogy minden díszítő elemet eltávolítsanak a HTML kódból, így az tiszta és nyelvtanilag helyes lesz.
Miért használjunk CSS-t a tartalom és a megjelenés szétválasztásához?
3. Felhasználói hozzáférhetőség
3.a Információt hordozó képeknél használjuk-e az „alt” attribútumot?
Minden nem-szöveges elemnek legyen szöveges megfelelője.
3.b A szövegmérethez relatív egységeket használunk-e abszolút helyett?
Amennyiben lehetséges relatív egységeket használjunk abszolút helyett a kód attribútumaiban és a stíluslapban.
További link:
3.c Ha a betűméretet növeljük, széttöredezik-e az oldal?
Próbáljuk ki ezt az egyszerű tesztet. Nézd meg az oldalad egy olyan böngészőben, amelyben könnyű a betűméretet változtatni (pl.: Firefox: Ctrl+egérgörgő). Növeld meg a böngésző betűméretét. Majd újra és újra. Most nézd meg az oldalad. Még mindig egyben van a szerkezete? Veszélyes dolog azt feltételezni, hogy mindenki ugyanolyan betűmérettel böngészik, mint mi.
3.d Használ az oldal látható, oldalrészre ugró menüt?
Lehetőséget kell biztosítani, hogy a felhasználó átléphesse az ismétlődő navigációs linkeket.
A csoportokra vonatkozó linkek azonosítják a csoportokat (az ágenseknek) és lehetőséget nyújtanak a csoport átugrásához.
A navigációban lévő túl sok link nem csak a vak felhasználókat zavarhatja. Gondoljunk bele, hogy egy mozgásában korlátozott ember számára nehézségeket okozhat végiglépkedni a linkhalmazon.
3.e Használ-e az oldal elérhető űrlapokat?
Az űrlapok nem tartoznak a legegyszerűbb dolgok közé azoknak, akik valamilyen módon akadályozottak. Egy dolog eligazodni egy szöveges tartalmú oldalon, de teljesen más az űrlapmezők között ugrálni és bevinni pár adatot.
További link:
3.f Használ-e az oldal elérhető táblázatokat?
A táblázatoknál azonosítsuk a sor és az oszlop fejlécét. Az olyan táblázatoknál, ahol kettő vagy több logikai szintje van a sor vagy oszlop fejlécnek, használjuk a jelölő nyelvet az adatcellák és fejléccellák meghatározásához.
További link:
3.g Megfelelő a színek világosság/kontraszt aránya?
A betű és háttérszíneknek megfelelő kontrasztot kell nyújtaniuk, hogy a színtévesztők is probléma nélkül használhassák az oldalt.
További link:
3.h A fontos információ csak színekkel van hangsúlyozva?
A színekkel kihangsúlyozott információ legyen hangsúlyos színek használata nélkül is. Ez megoldható a szövegkörnyezettel, vagy a HTML jelölőivel.
Három féle színtévesztés létezik: Deuteranope (piros/zöld), Protanope (más fajta piros/zöld) és a Tritanope (kék/sárga), ami nagyon ritka.
További linkek:
3.i A legördülő menük lehetőséget adnak a lassú reakcióra? (a csökkentett motoros képességű látogatók miatt)
A csökkentett motoros képességű látogatók nehezen tudják használni a gyors legördülő menüket.
3.j Minden link egyértelmű? (a vak felhasználók miatt)
A link szövegének elegendő jelentést kell hordoznia ahhoz, hogy a szöveget felolvasva egyértelmű legyen a célja. A link szövege legyen tömör.
4. Eszköz szintű hozzáférhetőség
4.a Megfelelően működik az oldal modern és régebbi böngészőkkel is?
Mielőtt CSS alapú tervezésbe fognánk, el kell dönteni, hogy milyen böngészőn, milyen szinten akarjuk használni az oldalt.
4.b Elérhető a tartalom, ha a CSS-t kikapcsoljuk vagy nem támogatja a böngésző?
Vannak, akik olyan böngészővel látogatják az oldalt, ami nem támogatja a CSS-t vagy az éppen ki van kapcsolva. Ha a tartalom jól felépített, ez nem jelenthet gondot.
4.c Elérhető a tartalom, ha a képeket kikapcsoljuk vagy nem támogatja a böngésző?
Vannak, akik kikapcsolják a képek megjelenítését böngészés közben (főleg a lassú kapcsolattal rendelkezők). A tartalomnak ebben az esetben is hozzáférhetőnek kell maradnia.
4.d Működik az oldal szöveges böngészőkben (Lynx)?
Az olyan, mintha egybe vennénk a CSS és a képek kikapcsolása pontokat. A szöveges böngészők csak a megfelelően felépített tartalommal tudnak használható oldalt megjeleníteni.
További link:
4.e Nyomtatásban helyesen jelenik meg az oldal?
Bármely (X)HTML oldalhoz készíthetünk nyomtatási stílust, anélkül hogy a HTML kódhoz nyúlnánk.
További link:
4.f Mobil eszközökön jól jelenik meg az oldal?
Ezt nem könnyű megoldani, addig amíg a mobil eszközök nem támogatják következetesen a média típusokat. Azonban így is vannak olyan oldal kialakítások, amelyek jól működnek a kézi eszközökön is. Az oldalunk mobil eszköz támogatása a célközönségünktől függ.
4.g Tartalmaz az oldal részletes meta adatokat?
A meta adat olyan információ, amelyet a gépek megértenek és feldolgoznak.
A metaadat egy strukturált információ, amelyet kimondottan arra találtak ki, hogy jellemezzen egy másik adatot. Azaz úgy is mondhatnánk, hogy adat az adatról.
4.h Jól működik az oldal a böngésző átméretezésekor?
A sok webfejlesztő úgy gondolja, hogy az átlagos képernyőméretek folyamatosan növekednek. Néhányan úgy gondolják, hogy a legelterjedtebb az 1024 pixel széles felbontás. De így mi lesz azokkal, akik kisebb felbontáson használják a monitort, vagy éppen kézi eszközökön böngésznek? Fontos tisztázni, hogy ezek a felhasználók a célközönségünkbe tartoznak-e és hogy az oldalkialakításból adódóan hátrányt szenvednek-e.
5. Alap használhatóság
5.a Egyértelmű a vizuális hierarchia?
Az oldal tartalmát fontossági tényezők alapján kell szervezni. Ezt megtehetjük méretezéssel, kihangsúlyozással és a tartalmi részek kapcsolatainak kialakításával.
5.b Könnyű megkülönböztetni a címsor szinteket?
A dokumentum szerkezetét címsorokkal alakítsuk ki, és használjuk a címsorokat az előírás szerint.
5.c Könnyen érthető az oldal navigációs rendszere?
A navigációnak egyértelműen jeleznie kell, hogy hol vagyunk éppen a weblapon és esetleg merre mehetünk tovább.
5.d Következetes a navigáció?
Ha a weboldal minden lapján következetesen használjuk a stílusokat, akkor a felhasználók könnyebben mozognak a lapok között. Nem kell minden oldalon „újra tanulniuk” a weblapunk kezelését.
5.e A megfelelő nyelvezetet használja?
A tiszta és egyszerű nyelvezet használata elősegíti a hatékony kommunikációt. A rosszul tagolt írást ugyanolyan nehéz olvasni, mintha nyelvtani hibákkal lenne tele. (főleg ha ez nem az anyanyelve az olvasónak)
5.f Van oldaltérkép és kapcsolat felvevő lap? Könnyű megtalálni?
A legtöbb oldaltérkép nem tükrözi a weblap szerkezetét. Működési tesztekben a felhasználók gyakran átsiklanak az oldaltérképen, vagy csak egyszerűen nem találják meg. Az összetettség is gond lehet; a térkép legyen térkép, ne pedig egy külön navigációs kihívás.
5.g Bonyolult weblapoknál van kereső az oldalon?
Habár kisebb weboldalakon nincs is szükség rá és sokan nem is használják, a saját kereső egyfajta rugalmas navigációs lehetőséget nyújt a felhasználóknak.
5.h Minden lapon megtalálható a link a kezdőlapra?
Vannak olyan felhasználók, akik mindig szeretnek visszatérni a kezdőlapra, miután megtekintették az adott tartalmi lapot. A kezdőlap egyfajta kiindulópont számukra, ahonnan továbbléphetnek az új tartalmak felfedezéséhez.
5.i A linkek aláhúzottak?
Húzzuk alá és színezzük ki a link szövegét, hogy ezzel megnöveljük a kattintható szöveg felismerésének az esélyeit. Így a felhasználóknak nem kell találgatniuk, pásztázni az oldalt a linkek után.
5.j A már meglátogatott linkek egyértelműen elkülönülnek? (pl. egyedi színnel)
Az egyik legfontosabb, hogy jelöljük az ilyen linkeket, így a felhasználók tudják, hogy melyik lapot látták már. Nem fogják megnyitni újra és újra feleslegesen.
6. Weboldal kezelése
6.a Van felhasználóbarát 404-es hibalap, amely a honlapon belül bárhol működik?
Lekérsz egy lapot, a címsorba való begépeléssel vagy egy elavult linkre kattintással és máris a nagy cyber üresség közepén találhatod magad. A felhasználóbarát weboldal segíteni fog eligazodni, míg a többiek nem csinálnak semmit, a böngészőre bízzák, hogy az képes-e elmagyarázni a történteket. Általában nem. Vagy csak a kockák értik meg.
6.b Rövid webcímeket használ az oldal?
A legtöbb keresőmotor (kivéve párat – név szerint Google) nem indexeli az olyan lapokat, amelyeknek a címében kérdőjel vagy más szokatlan karakter van (& jel, egyenlőség jel)... Mire jó az oldal, ha senki nem találja?
A web egyik legrosszabb eleme a webcím (a felhasználó felület szemszögéből). Azonban, ha rövid, logikus és „önjavító”, akkor a webcímek elfogadhatóan használhatóak.
További link:
6.c A webcímek működnek a „www” előtag nélkül?
Ez nem létfontosságú és van amikor nem is lehetséges, de azért jó ha mindkét lehetőséget tudjuk nyújtani. Nem túl előnyös senkinek sem, ha a felhasználó a www nélkül írja be a címet és csak egy üres oldalt kap.
6.d Van az oldalnak faviconja?
A Favicon a Favorites Icon rövidítése. Ez egy kis képecske, amely szinte minden profi weboldalon megtalálható. Lehetővé teszi, hogy még jobban testre szabjuk az oldalunkat. Ha felveszik a kedvencek közé a honlapunkat, akkor a Kedvencek listában a nevünk mellett megjelenhet a cégre jellemző kis favicon.
A faviconok nem létfontosságúak. Azonban, ha nem használjuk őket, akkor 404 üzenetek jelenhetnek meg az oldal naplózásában (oldal statisztika). Például az Internet Explorer le akarja tölteni a szerverről, ha kedvencek közé rakja valaki a lapunkat. Így ha van faviconunk, megszűnhetnek a faviconnal kapcsolatos 404-es hibák. Ugyanez igaz a robots.txt állományra is.
