Vakok és gyengénlátók számára "akadálymentesített smink"

Még 2011 elején kaptam egy megbízást egy kis somogyi falu egyszerű weblapjának átportolására a Drupal 7. kiadása után frissiben ahol egy pályázati kiírás részeként az "akadálymentesítést" is el kellett végezni rajta. (Csak halkan jegyzem meg: konkrétan fekete-sárga színhasználatot írtak/kértek).

Remélem, hogy nem koptak el teljesen az emlékeim és tudok segíteni az alábbi kivonatos esetleírással:

Amire szükséged lesz:

1. Meglévő Drupal smink
2. Akadálymentesített alsmink ami a fentire épül a régiók és blokkok elrendezése miatt
3. Egy hasznos kis modul: Swichtheme (modul nélkül neked kellene leprogramoznod a dolgot)

A Swichtheme modul README dokumentumát megnézve elég alapos leírást találsz arra vonatkozóan, hogy miképp lehet beállítani a sminkváltást.

Egy egyszerű példa a kivitelezésre:

• Állítsd be megfelelően a modult. A beállításoknál saját könnyen értelmezhető címkével láthatod el a látogatók számára elérhető sminkeket. Ha valamit nem szeretnél itt látni, akkor egyszerűen tedd inaktív állapotva azt a sminket (pl. Bartik), ezt a megjelenésnél tudod szabályozni a sminkek listájában.
• A modul egy Blokkot hoz létre a sminkváltásra. Ez nem kimondottan szép, de azonnal használhatóvá teszi a rendszert.
• A lényeg: hozz létre egy-egy blokkot, ahol beilleszted a gyengénlátók számára foganasított ikont, esetleg szöveges leírást hozzá és linkeld be az akaálymentesítésre szolgáló hivatkozást pl: http://www.weblapod.hu/?theme=akadalymentes_smink
• A fenti blokkot csak a rendes sminken jelenjen meg. Ezt a blokkbeállításnál tudod szbályozni.
• Hozz létre egy visszafelé mutató linket a fentiek alapján az akadálymentesített -> rendes smink irányába a másik blokkban és ezt is állítsad be úgy hogy csak a második sminken jelenjen meg. Pl. http://www.weblapod.hu/?theme=nem_akadalymentesitett_smink_neve

Az egészben az a jó, hogy nagyon egyszerűen kivitelezhető és a nem regisztrált látogatók számára is hosszútávon használható. Akár programozhatod is PHP segítségével a modult. A reg. tagok pedig ha kapnak rá jogosultságot, akkor akár állandó jelleggel beállíthatják maguknak a másik sminket alapértelmezettként.

Élő példa erre a korábban említett Várda Önkormányzat weblapja.

• Várda Hagyományos weblap
• Várda Akadálymentesített weblap

Remélem, hogy tudtam segíteni és hasznát veszed az infónak. Esetleg belinkeled majd a kész weblap címét is?

Megpróbálok válaszolni a fenti hozzászólásodra és a hétvégén Tőled kapott leveledre, ok?

• Most már világos a számomra, hogy Te a Fusion base theme-t használod, mellette a Mix and Match alsminket és ehhez készítettél még egy akadálymentesített újabb alsminket, nem semmi! Ilyen többszörös alá-fölé rendeltségben még soha nem használtam a Drupal smink rendszerét ezért igen korlátozott az a terület, ahol segíteni tudok neked.
• Leveledben megemlíteted a Skinr modul konfliktust. Kérlek, hogy olvasd át a Mix and Match smink fejlesztői leírását alaposan. Ott azt írják, hogy nem ajánlatos egyáltalán ezt a modult a sminkkel használni éles környezetben, mert valamiért nem stabil. Ajánlanak egy alternatívát is, bár erre nem néztem rá, hogy működik.
• Azt kérdezted még a leveledben, hogy lehetséges-e az az eset, hogy egy Drupal smink és egy modul konfliktusba kerül és hibaüzenetekkel halmoz el. Sajnos ez nagyon is lehetséges, mivel számtalan helyen olyan komlexitást és funkciót visznek bele a smink rétegbe, holott talán annak az lenne a dolga, hogy megjelenést és a kinézetet jelenítse meg pusztán, hogy az már túl sok. Számomra a megoldás azt jelenti, hogy megpróbálom leegyszerűsíteni a dolgokat, saját magam által írt sminket használok és persze kordában tartom a felhasznált modulok számát és minőségét.
• A Swichtheme gördítősávján a választómezőt (select) érted? Az általad létrehozott Akadálymentes blokk az ikonnal és a Swichtheme által létrehozott témaválasztó blokk két különböző dolog. A Swichteme blokkját nem kötelező felhasználnod és nyugodtam eltüntetheted. Ha a modul aktív állapotban van akkor a háttérben is elvégzi a feladatát.
  1. Hozzál létre 2 db blokkot az ikonnal és rendelj mellé egy linket. Mindkét blokk ugyanazon a régióben szerepeljen, pl. sidebar vagy top
  2. Az első blokkot úgy állítsd be, hogy csak az alapértelmezett állapotban jelenjen meg és rejtve legyen az akadálymentes sminken. A blokkban lévő link az akalymentes sminkre hivatkozzon, pl: http://www.weblapod.hu/?theme=akadalymentes_smink
  3. A második blokkot úgy állítsd be, hogy csak az akadálymentes változatban jelenjen meg. Az itt lévő link értelem szerűen visszairányít az alapértelmezett sminkre, pl: http://www.weblapod.hu/?theme=nem_akadalymentesitett_smink_neve
• Jól tudod, hogy az alsmink örökli a szülősmink stíluslapjait. Egész egyszerűen felül kell írni ezt az akadálymenes smink stíluslapján. Mivel csak képet küldtél erről, ezért nem tudom konkrétan megmondani, hogy ezt és ezt írd át és akkor jó lesz a főoldali hírblokk alapszíne. Csak útmutatót tudok nyújtani. Legjobb amit tehetsz az asz, hogy megnyitod a böngésző ellenőrt, vagy FireBug-ot és megnézed, hogy mit kell még átírnod. A forráskódban látod, hogy melyik stíluslap milyen sorrendben töltődik be. Ügyelj arra, hogy az akadálymentes smink legyen lehetőleg az utolsó
• A Várda honlapján én gyakorlatilag nem is egy alsminket használtam, hanem egy különálló sminket ha jól emlékszem, így valamivel több időbe telt, mire elkészült, de például nem olvassa be a szölősmink összes stíluslapját és teljes kontrolt kaptam a régiók és a blokkok elhelyezésében.
• %-ban általában nem szoktunk fontméretet megadni kivéve a html és a body elemeket a stíluslap normalizásánál. Használd inkább a régimódi PX vagy EM esetleg az újabb REM mértékegységet (ez utóbbit csak akkor ha tudod mit, miért teszed!)
• Az id azonosítók (pl. #page) használatával jobb esélyed van az örökölt stíluslap felülírására a problémás helyeken. Kínos helyeken kényszerítheted is a felülírást az "!important" jelölést használva ha nagyon muszály, (pl:
  

  #content div {background:none transparent !important;}
  )

Egy lehetőség az akadálymentes stíluslap elkészítésére:

/* ================================================
 * GENERAL
 * ================================================ */
* {
  background: none transparent !important;
}
 
body {
  background: none  #000;
  color: #FF0;
  font: 18px /150% Arial,Verdana,sans-serif;
  margin: 0;
  padding: 2em 0;
}
 
img {
  border: 1px solid #fff;
  height: auto;
  max-width: 100% !important;
}
 
p {
  margin-bottom: 1em;
}
 
a {
  color: #fff;
  padding: 0,
  text-decoration: underline;
}
 
a:hover {
  color: red;
}
 
a.active {
  color: red!important;
  text-decoration: underline !important;
}
 
:focus {
  color: red;
  outline: 1px dotted #fff;
}
 
#sidebar {
  border-right: 4px dotted #fff;
  float: left;
  padding: 0 2%;
  width: 25%;
}
 
#content {
  float: right;
  padding: 0 2%;
  width: 65%;
}
 
table, th, td, tbody, tr {
 background-color: #333 !important;
 border-color: #ff0 !important;
 color: #fff !important;
}
 
ul li {
  list-style: disc inside none !important;
}

Persze ez csak egy gyorsan legépelt minta, messze nem tökéletes vagy optimális. Remélem, hogy sikerülni fog megoldani az akadálymentes stíluslap elkészítését és végre láthatjuk élesben is a weblapodat.

Kérlek, hogy linkeld majd be az önkormányzati honlapodat a többiek számára ha jónak látod, előre is köszönöm!