Ajánlásaink

1. Programozás-technika

Mindenekelőtt: amennyiben nincs mód arra, hogy honlapján végrehajtsa az alábbi, vagy bármely specifikációban ajánlott akadálymentesítési eljárásokat, készítsen honlapjáról egy alternatív ún. text only/csak szöveg verziót!

1.1. Képek

1.1.1. Minden esetben használjuk az img tag-ek alt attribútumát! Amennyiben ezt elhagyjuk, értékes információtól fosztjuk meg azokat a látogatókat, akik kikapcsolták a képmegjelenítési funkciót, vagy akik karakteres böngészőt használnak, ill. nem látnak és emiatt képernyőolvasóval olvastatják fel az oldalt. Ez utóbbi esetben minden egyes hiányos img tag helyén egy [INLINE] standard üzenet jelenik meg.
1.1.2. Használjunk üres alt attribútumot díszítő-, formázó elemnek szánt képek esetében.
Pl: <img src="vonal.gif" border="0" alt="">
1.1.3. Amennyiben információt hordoz egy kép az oldalon, röviden, lényegre törően írjuk körül mit ábrázol, esetleg mi a mögöttes tartalma.
Az alábbiakban két példát látunk a fenti szabályra. Az első rossz, a második jó:
Nelson Mandela képe
<img src="images/mandela.jpg" alt="Portré">
<img src="images/mandela.jpg" alt="Nelson Mandela képe">
1.1.4. összetett jelentéstartalmú képeknél, mint amilyen egy diagram, a vizuális információkból olvasni nem tudó látogatóink kedvéért készítsünk leírást a képről, s a longdesc attribútum segítségével rendeljük hozzá az img tag-hez.
<img src="grafikon.gif" alt="A külföldi vendégek számaránya nemzetiségük alapján" longdesc="http://www.ezmegaz.hu/grafikon.html">
Más a helyzet a navigációt segítő képfájlokkal. Itt a terjengős körülírás zavaró lehet.
íme egy példa a helyes kódolásra:
OK  <img src="images/okgomb.gif" alt="OK" title="Vásárlás befejezése">
Ettől a metódustól némiképp el kell térnünk, ha a képet submit, vagy input funkcióval láttuk el:
Mehet! <input type="image" name="OK" src="images/okgomb.gif" alt="Mehet!">

1.2. Táblázatok

1.2.1. Táblázat használatával rendezettebbé tehetjük weboldalainkat, segíti a pozícionálást, a tördelést, de eredeti céljának megfelelően, adatok strukturált megjelenítésére is gyakorta használjuk. A táblázatok használata során figyelemmel kell lennünk látássérült látogatóinkra, akik karakteres böngészőikben nem biztos, hogy azt látják viszont, abban a szerkesztett formában, amint azt mi elképzeltük.
1.2.2. Használjuk a caption elemet táblázataink címének megadására.
Az alábbi példák első ránézésre nem sokban különböznek egymástól. Szemünk egy pillanat alatt bejárja a táblázatot, ill. agyunk azonnal értelmezi az összes relációt. Nézzük meg, hogy mi történik, ha egy karakteres böngészőbe küldjük ki az oldalt, melyik tábla olvasható kényelmesebben?

1.2.3. Bonyolultabb táblázatoknál használjuk a summary attribútumot!
Ha egy táblázatunk arra hivatott, hogy rendezetten összefoglalja a fenti három étel elkészítésének fázisait, a következő summázattal élhetünk, látogatóink megsegítése érdekében:
<table border="1" summary="Az alábbi táblázat 3 étel elkészítésének fázisait mutatja be, sorokba szedve az ételfajtákkal, ill oszlopokba rendezve az elkészítés fázisaival (összetevők, előkészítés, elkészítés, tálalás)."
1.2.4. A táblázatok jobb áttekinthetősége érdekében használjuk következetesen, rendszeresen a th attribútumot is.

1.3. Frame-ek

1.3.1. Biztosítanunk kell a frame-ekbe zárt tartalmak elérését azon látogatóink számára is, akik nem képesek keretek megjelenítésére, ill. olyan böngészőket használnak, amelyek egymás alá rendezik a frame tartalmakat.
Pl. egy oldalösszeállításunk áll 2 keretből, egy a menüsornak, egy a tartalomnak. Mindkettőt szimultán kell, hogy lássuk, mert különben megszűnik a szájt homogenitása.
Vizuális alapon és korszerű böngészővel nem érhet bennünket kudarc, de nézzük meg mit olvas egy vak látogatónk ha egy ilyen oldalunkra érkezik:
FRAME: frame1
FRAME: main
1.3.2. Ha mindenképp ragaszkodunk a keretes rendszerhez, adjunk beszédes nevet mind az aloldalaknak, mind a rájuk mutató fájloknak:
FRAME: menü
FRAME: tartalom
1.3.3. Még így is lesznek olyanok, akik azonnal továbbállnak a honlapunkról, ha nem találnak a NOFRAMES elemek közé zárva alternatív információkat az oldal tartalmát illetően.
Egy tökéletesen preparált oldal így nézhet ki:
<html>
<head>
<title>Példa oldal</title>
</head>
<frameset rows="1*" cols="50%, 50%">
<frame name="menü" scrolling="auto" marginwidth="10" marginheight="14">
<frame name="tartalom" scrolling="auto" marginwidth="10" marginheight="14">
<noframes>
<body>
<p>Mivel az ön böngészője nem támogatja a keretes oldalakat, kérem szíveskedjen az <a href="egerut.html">egerut.html</a> fájlt megtekinteni.</p>
</body>
</noframes>
</frameset>
</html>

1.4. Űrlapok

1.5. Java Script

1.5.1. Előfordulhat, hogy a felhasználó gépén futó program nem támogatja a scripteket általában, vagy csak az adott script-elemnél meghatározott scriptnyelvet nem támogatja, vagy konfigurációja nem engedi a scriptek végrehajtását.
A noscript elem lehetővé teszi, hogy a script végrehajtása helyett a dokumentum szerzője helyettesítő információt adjon meg.
A következő példában a script segítségével a dokumentumot egy más helyen dinamikusan létrehozott adathalmazzal egészítjük ki. Ha a felhasználói program nem képes a script futtatására, akkor a NOSCRIPT elem segítségével egy linket adunk az adatok helyére.
<script type="text/tcl">
... Tcl script az adatok beillesztésére ...
</script>
<noscript>
<p>Az adatok <A href="http://www.valahol.hu/adat/adat1">itt találhatóak.</a></p>
</noscript>
 Tekintse meg példafájlunkat!
1.5.2. A formok validálásakor használjunk szerveroldali ellenőrző rutinokat, ne a kliens gépén futtasuk azokat (JS). A futási idő néhány tizedmásodperces növekedése kisebb gond, mint a látogatóink egy részével való kapcsolatfelvétel meghiúsulása.
1.5.3. A közkedvelt, ma (még) oly divatos rollover effektusokat egyszerűbben megoldhatjuk stíluslapokkal. Jelen oldalunk bal felső sarkában látható, a betűméret növelését eredményező váltókép is css-el készült.
1.5.4. Események kezelésekor gondoljunk az egeret nem használó látogatóinkra is:

2. Ergonómia

2.1. Tartalom

2.1.1. Alapvetően kétféle programozás-filozófiai irányzat, stílus uralkodik a Weben:
        a) a művészi önkifejezésen alapuló
        b) és a tartalomközpontú, más megközelítésben: mérnöki látásmódot tükröző metódus (illetve léteznek öszvér megoldások is, amelyekben keverednek a stílusjegyek).
Mindkét szemléletmód mellett/ellen lehet hosszasan és meggyőzően érvelni.
általánosságban elmondhatjuk - szem előtt tartva a mi általunk képviselt felhasználói csoportok hozzáférési sajátosságait, ill., hogy a webes megjelenés legfőbb célja mégiscsak az, hogy megkönnyítse a különféle gyakorlati műveletek végrehajtását és a gyors információhoz jutást -, hogy a tartalomközpontú irányzat követői adekvátabb megoldásokat kínálnak látogatóiknak, kevésbé esnek az öncélúság hibájába, rugalmasabban tudnak reagálni a különböző böngészési szokásokkal bíró felhasználói csoportok igényeire.
Pl.: a mi (H2F) szempontunkból közömbös lehet egy Flash intro szellemes dizájnja, de annál fontosabb a site mélyén megbújó tartalom célirányos elérésének készséges támogatása.
Egy jó weboldal megtervezéséhez természetesen szükség van kreativitásra, ill. egyéniségünket, egyediségünket kifejező dizájnra, képi világra. De figyeljünk arra, hogy ez utóbbi, soha se legyen az interaktivitás kárára!

2.2. Dizájn

2.2.1. Navigáció: Oldalaink legfeljebb 20%-át foglalja el a navigációt segítő eszköztár, frame, cella. Karakteres böngészőt és/vagy beszédszintetizátort használó látogatóink érdekében kerüljük a linkek elválasztására használt | karaktert, ugyanis ezt látva, a képernyőolvasó szoftverek minden esetben bemondják: "álló vonal".
2.2.1.1. Egy sorban elhelyezett linkjeinket tegyük külön-külön cellába, hogy a vak látogatók által használt karakteres böngészőkben a hivatkozások egymás alá törjenek.
2.2.1.2. Az oldalstruktúra CSS-el való kialakításakor - cellák híján - a linkeket rendezzük listába.
2.2.1.3. A navigációs sorban használt rollover képeket CSS-ben generáljuk le.
2.2.1.4. Az oldalak színvilágának tervezéséhez lehetőleg böngészőfüggetlen, un. web safe színeket használjunk.

3. Gyorstippek

3.1. Kerüld a Flash intrót, vagy mellette ajánlj látogatóidnak alternatívát.
3.2. Használj relatív betűméretet, vagy nyiss egy kaput olyan oldalra, ahol nincs méretkorlátozás.
3.3. Ne felejtsd ki a képek alt attribútumát.
3.4. Ügyelj a szöveg-háttér kontrasztjára.
3.5. Felejtsd el az u tag-et.
3.6. Lásd el felirattal rövid videofájljaidat, vagy készíts hozzájuk leírást.
3.7.1. A frame-eket ahol csak lehet váltsd fel korszerűbb megoldásokkal, ahol nem lehet, elővigyázatosságból használd a noframes elemet is. Minden keretnek adj - beszédes - nevet!
3.7.2. Ahol csak lehet pozicionálj CSS-el!
3.8. Légy közérthető, kerüld a trendi, idegen hangzású kifejezéseket.
3.9. Ne fosztd meg eredeti rendeltetésüktől és megjelenési formájuktól a címsor ( Hx ) elemeket.
3.10. Használj kliens-oldali régiómegadást (a map tag segítségével) a kiemelendő képrészletekhez és társíts hozzájuk szöveges leírást.
3.11. Grafikonok esetében készíts kivonatot, vagy használd a longdesc attribútumot.
3.12. Ahol csak lehet, mellőzd a Java Scriptet, rollovert CSS-ben hozz létre.
3.12. Oldalaid ellenőrzésére rendszeresen használj validáló programokat (on-line: W3C HTML, CSS, Bobby HTML; off-line: A-Prompt).

^