Jó megoldások – akadálymentes webes komponensek, Infoalap logóval

Akadálymentes honlap kis- és középvállalkozások számára

Előszó

Ebben a gyűjteményben olyan webes komponenseket, példaalkalmazásokat mutatunk be, amelyek hasznos megoldásokat kínálnak akadálymentes honlapok kialakításához. A példákban többnyire olyan népszerű komponensfajták szerepelnek, amelyek nem találhatóak meg a HTML alapvető elemtípusai között, de a weboldalakon gyakran előfordulnak. Szemben a szabványos HTML elemtípusokkal, amelyek akadálymentesnek számítanak, a leszármaztatott, összetett komponensek akadálymentessége nem eleve adott, mivel nagyban függ ezek konkrét megvalósításától. Az ilyen komponenseket a webfejlesztők vagy saját maguk készítik el, vagy népszerű komponensgyűjteményekből vesznek át kész elemeket. Utóbbiak a legritkábban felelnek meg az akadálymentesség követelményeinek. Az itt közzétett példáink ebben kívánnak segítséget nyújtani. A példákban megfigyelhetőek, azokból megtanulhatóak és máshol alkalmazhatóak azok a megoldások, amelyek szükségesek az ilyen komponensek akadálymentességének biztosításához.

A példaalkalmazások többnyire egy-egy, ritkábban néhány hasonló funkciójú komponenstípus akadálymentes megvalósítását mutatják be. Az ezekhez tartozó leírások röviden összefoglalják az adott komponenstípus szokásos megvalósításaival kapcsolatban általánosan tapasztalható akadálymentességi problémákat, majd ismertetik az alkalmazáspéldát és a komponens akadálymentes működése céljából használt technikákat. A leírásokban csak az akadálymentes hozzáféréshez szükséges elemek, HTML-, CSS-, illetve programozási módszerek kerülnek bemutatásra. Az összetettebb esetekhez külön példa is elérhető.

Fontosnak tartjuk felhívni a figyelmet arra, hogy az itt bemutatott példák elsődlegesen az akadálymentességi megoldások szemléltetésére készültek, nem pedig azzal a céllal, hogy más weboldalakra változtatás nélkül beépítésre kerülhessenek. A példákból inkább a szükséges megoldások megismerését, a megfelelő kódrészletek átvételét és adaptálását javasoljuk. A jó megoldásokat bemutató mintákat kérjük körültekintően, csak a megfelelő módosítások elvégzése után felhasználni.

Tartalomjegyzék

  1. Modális ablak, HTML+CSS+JavaScript használatával
    LeírásPélda
  2. Lapfüles-panel, HTML+CSS+JavaScript használatával
    LeírásPélda
  3. Naptárkomponens, HTML+CSS+JavaScript használatával
    LeírásPélda
  4. Kiegészítő információ megjelenítése/elrejtése, HTML+CSS+JavaScript használatával
    LeírásPélda
  5. Megfelelően formázott táblázat HTML használatával
    LeírásPélda
  6. Automatikusan frissülő régió, HTML+CSS+JavaScript használatával
    LeírásPélda
  7. Automatikusan frissülő régiórészek, HTML+CSS+JavaScript használatával
    LeírásPélda
  8. Képváltós karusszel, HTML+CSS+JavaScript használatával
    LeírásPélda
  9. Automatikus kiegészítés, HTML használatával
    LeírásPélda
  10. Keresés, HTML+JavaScript használatával
    LeírásPélda
  11. Státuszüzenet, HTML+CSS+JavaScript használatával
    LeírásPélda
  12. Kombinált szerkesztőmező, HTML+CSS+JavaScript használatával
    LeírásPélda
  13. Sorbarendezés, HTML+CSS+JavaScript használatával
    LeírásPélda
  14. Áthelyezés, HTML+CSS+JavaScript használatával
    LeírásPélda
  15. Három állapotú jelölőnégyzet, HTML+CSS+JavaScript használatával
    LeírásPélda
  16. Váltógomb, HTML+CSS+JavaScript használatával
    LeírásPélda
  17. Hivatkozások, HTML+CSS+JavaScript használatával
    LeírásPélda
  18. Skála, HTML+CSS+JavaScript használatával
    LeírásPélda
  19. Választógomb, HTML+CSS+JavaScript használatával
    LeírásPélda
  20. Csúszka - hőmérő, HTML+CSS+JavaScript használatával
    LeírásPélda
  21. Csúszka - értékelés, HTML+CSS+JavaScript használatával
    LeírásPélda
  22. Léptethető szerkesztőmező, HTML+CSS+JavaScript használatával
    LeírásPélda
  23. Eszköztár, HTML+CSS+JavaScript használatával
    LeírásPélda
  24. Eszköztipp, HTML+CSS+JavaScript használatával
    LeírásPélda
  25. Rács, HTML+CSS+JavaScript használatával
    LeírásPélda
  26. Listamező, HTML+CSS+JavaScript használatával
    LeírásPélda
  27. Menüsor, HTML+CSS+JavaScript használatával
    LeírásPélda
  28. A billentyűzetfókusz kiemelése és a linkek aláhúzása, HTML+CSS+JavaScript használatával
    LeírásPélda
Az Informatika a Látássérültekért Alapítvány logója
A Vodafone Digitális Díj logója

Az akadálymentes webes komponensek gyűjteménye a Vodafone Magyarország Alapítvány támogatásával készült a Vodafone Digitális Díj program keretében.


www.infoalap.hu