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

pante képe

Sziasztok!

Azt szeretném megkérdezni, hogy vakok és gyengénlátók számára van-e smink?
Nem fontos teljesen a szabványokhoz igazodnia, elég ha a betűméret növelt, illetve fekete/sárga a háttér és a betűszín, hogy kontrasztos legyen.

Köszönöm a segítséget!

Drupal verzió: 
Fórum: 
Nagy Gusztáv képe

Én egy egyszerű alsminkkel szoktam megoldani, pl. Framework alapokon.

1
-1

Nagy Gusztáv

csakiistvan képe

Alsmink készítéséhez pedig van könyvlapunk is ha kellene

0
0

Drupal full-stack developer at Wunderman Thompson Budapest

eMeLA képe

Csak halkan és mellékesen jegyzem meg, egyszer érdemes végigolvasni a WCAG 2 ajánlást (http://www.w3c.hu/forditasok/WCAG20/) ahol többek között a kontrasztról is szó esik. Csak azért hozakodok elő vele mert az ajánlás nem a széles körben elterjedt sárga/fekete megjelenést írja elő, hanem meghatároz egy kontrasztarányt ami 4,5:1. Ez ott érdekes, hogy a sárga/fekete kontrasztaránya 19.56:1 ...

Ha megnézitek a drupal.hu-t a Firefox WCAG Contrast checker kiegészítővel. Látható, hogy jelen állapotában kb. 80-90%-ban a kontraszt megfelel a Level AAA besorolásnak...

Ez persze nem azt jelenti, hogy mindenben megfelel, de nem kell átkapcsolni sárga/feketére, hogy a kontraszt jó legyen..

(Még halkabban jegyzem meg, a vakok hogy is nézik a sminket :)

3
0

...mit tudok: http://web.termuves.hu

pante képe

Köszönöm a válaszokat.

A subtheme-ezésről olvasok és nézek tutorial videókat, nem lesz probléma valószínűleg.

Viszont, hogyan tudnám megoldani, hogy extra modul telepítése nélkül, tudjanak a nem regisztrált, csak látogató felhasználók css-t/subtheme-et váltani képre (akadalymentes.png) kattintással?

0
0
Robert Petras képe

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.

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

3
0
Robert Petras képe

Hoppá! Most vettem csak észre, hogy van egy kis hiba a várdai honlapon. Ha most nézitek meg, akkor látni fogjátok, hogy az akadálymentesítre készített oldalakon navigálva mindig a rendes sminkkel ellátott oldalra visz egy-egy menü.

Amikor átadtam a honlapot a megrendelő számára, ez nem így működött nyugodjatok meg. Azóta webmester és hoszting szolgáltató váltás történt, úgyhogy egy kis bug keletkezett a modul használatában.

Rendes esetben a Swichtheme úgy működik, hogy a böngésző megjegyzi azt, hogy sminkváltás történt és amíg nem kapcsolod át újra, tartani fogja az emlékezetében az aktuális smink nevét.

Ha valaki a Cookie-k használatát letiltja, akkor persze mindig visszafog térni az eredeti sminkre a weblap.

1
0
pante képe

Köszönöm a részletes leírást, sorban csinálom a pontokat...

Az alsminket megcsináltam a Kézikönyv leírása szerint, az jó és működik.

Viszont a Switchtheme valami miatt teljesen rossz nálam.
Hibaüzenetek sokaságát kapom, friss telepítés után.

Főoldalon (bal oldalsávba kerülne a Switchtheme blokkja):

  1. Notice: Undefined index: name switchtheme_options() függvényben (/public_html/sites/all/modules/switchtheme/switchtheme.module 287 sor).
  2. Notice: Undefined index: name switchtheme_options() függvényben (/public_html/sites/all/modules/switchtheme/switchtheme.module 287 sor).

Admin panel -> Megjelenés:

  1. Notice: Undefined index: name _system_rebuild_theme_data() függvényben (/public_html/modules/system/system.module 2563 sor).
  2. Notice: Undefined index: name _system_rebuild_theme_data() függvényben (/public_html/modules/system/system.module 2563 sor).
  3. Notice: Undefined index: name _system_rebuild_theme_data() függvényben (/public_html/modules/system/system.module 2563 sor).
  4. Notice: Undefined index: name _system_rebuild_theme_data() függvényben (/public_html/modules/system/system.module 2563 sor).
  5. Notice: Undefined index: name system_sort_modules_by_info_name() függvényben (/public_html/modules/system/system.admin.inc 925 sor).
  6. Notice: Undefined index: name system_sort_modules_by_info_name() függvényben (/public_html/modules/system/system.admin.inc 925 sor).
  7. Notice: Undefined index: name system_sort_modules_by_info_name() függvényben (/public_html/modules/system/system.admin.inc 925 sor).
  8. Warning: uasort() [function.uasort]: Array was modified by the user comparison function system_themes_page() függvényben (/public_html/modules/system/system.admin.inc 131 sor).
  9. Notice: Undefined index: name system_themes_page() függvényben (/public_html/modules/system/system.admin.inc 140 sor).
  10. Notice: Undefined index: name system_themes_page() függvényben (/public_html/modules/system/system.admin.inc 158 sor).
  11. Notice: Undefined index: name system_themes_page() függvényben (/public_html/modules/system/system.admin.inc 159 sor).
  12. Notice: Undefined index: name system_themes_page() függvényben (/public_html/modules/system/system.admin.inc 182 sor).
  13. Notice: Undefined index: name system_themes_page() függvényben (/public_html/modules/system/system.admin.inc 191 sor).
  14. Notice: Undefined index: name system_themes_page() függvényben (/public_html/modules/system/system.admin.inc 197 sor).
  15. Notice: Undefined index: name system_sort_themes() függvényben (/public_html/modules/system/system.admin.inc 938 sor).
  16. Warning: uasort() [function.uasort]: Array was modified by the user comparison function system_themes_page() függvényben (/public_html/modules/system/system.admin.inc 237 sor).
  17. Notice: Undefined index: name theme_system_themes_page() függvényben (/public_html/modules/system/system.admin.inc 2708 sor).

Esetleg valami más modul? Vagy ezeket a hibákat, hogy tudnám javítani?

(Amúgy tetszik a honlap, amit csináltál, én is pont ugyanígy szeretném kivételezni az akadálymentesített részt! Csak így zárójelben megkérdezném, mert off-topic lenne, hogy a menünél melyik modult használod és egyéni css-t szerkesztettél hozzá?)

0
0
Sk8erPeter képe

Biztos vagy benne, hogy jó az alsminked?
Először próbáld ki egy stabil sminkkel, pl. a Bartikkal vagy Zennel, és csak utána teszteld a sajátoddal.
Azért gyanús, mert én is használom a Switchtheme-et, és sosem tapasztaltam ezeket a hibákat.
Majd írd le azt is, melyik változatot használod.

==========

@Robert Petras :
nagyon jó leírást hoztál össze, én is javasolni szerettem volna a Switchtheme-et, de Te sokkal alaposabb választ írtál közben, mint amilyet én akartam, köszönet érte.

1
0
pante képe

Biztonság kedvéért letöröltem, gondoltam hátha csak ez a baja és egy újratelepítés megoldja a problémákat.

Viszont nem törlődött rendesen, hanem még hagyott hibákat a rendszerben.
"Szerencsére" csak az admin panelben látszódnak a felhasználók nem érzékelnek változást.
Felépítés -> Blokkok:
Notice: Undefined index: name _ctools_list_themes() függvényben (/public_html/sites/all/modules/ctools/includes/plugins.inc 567 sor).
Megjelenés:

  1. Notice: Undefined index: name _system_rebuild_theme_data() függvényben (/public_html/modules/system/system.module 2563 sor).
  2. Notice: Undefined index: name _system_rebuild_theme_data() függvényben (/public_html/modules/system/system.module 2563 sor).
  3. Notice: Undefined index: name _system_rebuild_theme_data() függvényben (/public_html/modules/system/system.module 2563 sor).
  4. Notice: Undefined index: name _system_rebuild_theme_data() függvényben (/public_html/modules/system/system.module 2563 sor).
  5. Notice: Undefined index: name system_sort_modules_by_info_name() függvényben (/public_html/modules/system/system.admin.inc 925 sor).
  6. Notice: Undefined index: name system_sort_modules_by_info_name() függvényben (/public_html/modules/system/system.admin.inc 925 sor).
  7. Notice: Undefined index: name system_sort_modules_by_info_name() függvényben (/public_html/modules/system/system.admin.inc 925 sor).
  8. Warning: uasort() [function.uasort]: Array was modified by the user comparison function system_themes_page() függvényben (/public_html/modules/system/system.admin.inc 131 sor).
  9. Notice: Undefined index: name system_themes_page() függvényben (/public_html/modules/system/system.admin.inc 140 sor).
  10. Notice: Undefined index: name system_themes_page() függvényben (/public_html/modules/system/system.admin.inc 158 sor).
  11. Notice: Undefined index: name system_themes_page() függvényben (/public_html/modules/system/system.admin.inc 159 sor).
  12. Notice: Undefined index: name system_themes_page() függvényben (/public_html/modules/system/system.admin.inc 182 sor).
  13. Notice: Undefined index: name system_themes_page() függvényben (/public_html/modules/system/system.admin.inc 191 sor).
  14. Notice: Undefined index: name system_themes_page() függvényben (/public_html/modules/system/system.admin.inc 197 sor).
  15. Notice: Undefined index: name system_sort_themes() függvényben (/public_html/modules/system/system.admin.inc 938 sor).
  16. Warning: uasort() [function.uasort]: Array was modified by the user comparison function system_themes_page() függvényben (/public_html/modules/system/system.admin.inc 237 sor).
  17. Notice: Undefined index: name theme_system_themes_page() függvényben (/public_html/modules/system/system.admin.inc 2708 sor).

Modulok:
  1. Notice: Undefined index: name _system_rebuild_theme_data() függvényben (/public_html/modules/system/system.module 2563 sor).
  2. Notice: Undefined index: name _system_rebuild_theme_data() függvényben (/public_html/modules/system/system.module 2563 sor).

Jelentések:
  1. Notice: Undefined index: name _system_rebuild_theme_data() függvényben (/public_html/modules/system/system.module 2563 sor).
  2. Notice: Undefined index: name _system_rebuild_theme_data() függvényben (/public_html/modules/system/system.module 2563 sor).

Illetve Beállításokban is ott maradt a modul linkje, amire kattintva 500 HTTP hiba (Internal Server Error) jön be.

Hogy tudnám teljesen eltávolítani ezt a modult a rendszerből? Mert a többi modul (pl. CTools) nem írt még ki hibákat, de most már igen.

0
0
Sk8erPeter képe

Letörölted, anélkül, hogy letiltottad volna először a modult? Na ilyet nem szabad... se modulnál, se sminknél.
MIUTÁN letiltottad a modult, kiszedve a pipát az admin/modules oldalon, azután a maradékait az Uninstall menüpontnál tudod eltávolítani (ez kiszedi az adatbázisba benyomott adatait is).
Ha eddig nem így csináltad, akkor mielőbb rakd vissza a modul fájljait oda, ahonnan letörölted, és szabályosan tiltsd le.
De mint említettem, első körben ne a modult okold, hanem az alsminkedet. Ha ilyen szintű hibákat dobálna ezerrel, akkor valszeg elég durván sok issue lenne bedobva a témával kapcsolatban, és nem használnák ennyien a modult.

4
0
Robert Petras képe

@Sk8erPeter Szia Péter!

Köszönöm a hozzászólásodat, jól esett. Igazából csak most kezdtem el bekapcsolódni a hazai közösségi életbe (leszámítva egy tavaszi budapesti Drupal találkozót a Bobek kávézóban Dunaújvárosból meló után felutazva).

Csak pislogok, mikor látom, hogy milyen mennyiségű segítséget nyújtasz Te és az Öreg Drupal Motorosok a válaszra váróknak. Szóval a köszönet Nektek jár!

Persze olyan is van, hogy néha röhögök a segítséget kérők ponyvaságán és abbéli hiszékenységükön, hogy az instant regisztrációjuk után két mondatban képesek bazi komplex kérdéseket feltenni. Tisztelet a kivételnek persze.

Én nem tudok ennyi mindenben segíteni, mert nem értek mindenhez, de RSS-en keresztül figyelem a sminkekkel kapcsolatos új kérdéseket és ha tudok akkor megpróbálok a jövőben válaszolni ezekre.

3
0
pante képe

A nem szakszerű modul törlések miatt eléggé kusza volt az adatbázisom, ezért inkább újrahúztam az egész rendszert, és megcsináltam rendesen.

Most már működik a switchtheme modul, holnap kipróbálom újra, hogy a modul segítségével egyéni (sárga-fekete) css-t mint sub-theme-et tudok-e váltani!

Régebben olvastam itt egy akadálymentesített sminkről, amit elkezdtek fejleszteni, de nem tudom, hogy befejezték-e, lehet tudni összejött-e a projekt?

Illetve nem tudom mennyire elegáns a +/- szövegméret növelés/csökkentés ikon az oldal valamelyik szélében, de erre is elérhető modul?

Végül köszönöm a sok választ, jó érzés látni, hogy mennyien olvassák a problémámat és próbálnak segíteni! :-)

2
0
Nagy Gusztáv képe

A + - gombok akkor "kellettek", amikor az IE nem tudta méretezni az oldalt. Ma már minden böngésző tudja. Akkor mire is kellene egy ilyen funkció? Ugyanolyan felesleges, mint a Vissza és a Fel linkek.

1
-2

Nagy Gusztáv

Robert Petras képe

Messze nem értek veled egyett abban, hogy csak az IE miatt építették volna bele a +- betűméretezőt a honlapokba.

Miért is vált egy időben nagyon divatossá ez?

Akkor számított ez újdonságnak vagy a weblap színenek megváltoztatása JS alapokon, amikor még a webmesterek az AJAX alapjaival ismerkedtek és azzal, hogy miképp lehet több funkcionalitást beépíteni a korábbi statikus weblapokba. Próbáltak a flash nyomdokaiba szegődni, nemegyszer láttam lepkéket repkedni a háttérben vagy pl. hóhullást egy-egy honlapon. Volt aki még pénzt is kért a +- vagy hasonló interaktivitás miatt. Az internetezők lassacskán elkezdték használni is a weblapokat és nem csak nézni őket. Mindegy, az a korszak lezárult. Ezt követte a beépített internetes alkalmazások megjelenése a weblapokon.

De miért is lenne létjugosultásga 2012-ben egy +- betűméretezőnek, sminkváltónak vagy fel-le linknek a honlapokon?

Igazad van, mikor azt írod, hogy a böngészők mindezeket a funkciókat már egy ideje tudják:

Page Up, Page Down = egy-egy oldalt navigál le ill. felfelé
Home és End = a weblap tetejére és aljára navigál
Ctr + és - = betűméretet növel vagy csökkent
Ctrl + Tab = lapot vált a böngésző felületén

Mégis szerinted hányan használják netezés közben a billentyűzetet és hányan vannak tisztában ezzel a nem látható funkcióval?
Személyes tapasztalatom szerint egy átlag számítógép és internet használó egyáltalán nem használja a billentyűzetet a navigálásnál. Maradnak a jól bevált egérhasználatnál. És igen, ha látják hogy egy kattintással eljutnak a weblap felső részére, akkor használni fogják ezeket az interaktiv elemeket.

Szerintem ezeknek az apróbb funkcióknak akkor van helye egy weblapon ha várhatóan lesz olyan közönség aki ezt használni is fogja.

Egy www.weblabor.hu oldalon biztosan nem kellenek mert a célközönség tisztában van azzal, hogy miképp tudja könnyen használni a weblapot a böngészővel és billentyűzettel.

Azonban egy kis falusi önkormányzat weblapján amelyet mondjuk számos időskorú ember tekint meg, talán lesz aki használni fogja a betűméretezőt, nem gondolod?

Vagy hadd mondjak egy trendi példát is: egy-egy mobil digitális eszközön mint pl. hordozható táblagép, mobil telefon, szerintem nagyon jól jöhet a lap aljára figyelmesen elhelyezett felfelé navigáló link. Én nem nagyon szeretem órákig fel vagy le folytonosan mozgatni az ujjamat csak azért, hogy végtelennek tűnő weblap aljrára vagy tetejére érjek ismét.

Egy biztos, én nem várom el az ügyfeleimtől és a látogatóktól, hogy tanulják a meg a gyorsbillentyűk használatát, hanem ha kell, beépítem ezeket a weblapba meghagyva azt a szabadságot, hogy majd ők eldöntik, hogy használják-e vagy sem.

Ha jól vannak ezek az elemek beillesztve a weblapba, akkor nem zavarnak senkit és igen is van létjogusultságuk, ez az én filléres gondolatom.

Off-topic: Tudjátok, hogy hol szoktam egyedül a fontméretet növelni a gyorsbillentyűk segítségével egészen addig, amíg annyira berágtam, hogy egy idő után már sem ezt, sem a Safari beépített Reader funkciója nem segített és dobtam az oldal látogatását?
John Gruber weblapjáról van szó, ahol a szerző nem átallott 11px-es fontméretet beállítani ezzel továbbra is szivatni a közvetlen honlap látogatóit 2012-ben.

3
0
aboros képe

akinek ilyen problémája van, hogy mondjuk olvasási nehézségei vannak, az igen gyakran szalad ebbe, hogy egy xy webszájt betűméréte számára túl kicsi. nagyon jól tudja, hogy a böngészője nyújt erre megoldást, nem a te honlapod lesz, ahol először használja ezt a funkciót, tekintve, hogy az elmúlt néhány évben az oldalak 99% már nem használ + - gombokat.

a falusi önkormányzat weblapját megtekintő időskorú pedig észre se fogja venni az elegánsan elhejezett + - gombodat, sose jön rá, hogy arra kattintani is lehet és ha valaki meg nem mutatja neki, akkor sose fogja kipróbálni. ugyanannyi esélye van, hogy a + - odat felismeri, mint hogy használja a böngészőben a nagyítást.

a felfelé navigáló linket talán el tudom fogadni, de az említett példa nagyon rossz, a táblagépek ugyanis a viewport tetejére tappolással mind az oldal tetejére scrolloznak.

ezek felesleges funkciók szerintem és egy igazán jó sminknek semmi szüksége ilyenekre, ahogy külön akadálymentes verzióra se, mert eleve akadálymentes. ami messze túlmutat azon, hogy most fekete háttéren citromsárgával van e szedve vagy sem. a drupal.hu sminkje például akadálymentesnek mondható. így ahogy van.

3
-3

-
clear: both;

Robert Petras képe

Ismét csak oda lyukadunk ki, hogy Te is úgy gondolod, hogy a számítógépet használók és az interneten böngésző emberek tisztában vannak a gyorsbillentyűk használatával és ismerik a böngészők kiegészítő funkcióit. Nincs ezzel semmi bajom azon kívül, hogy én épp az ellenkezőjét gondolom. Szerintem többen vannak akik nem használják ezeket, mint akik ismerik és nekik lehet, hogy igen is problémát jelent a kis betűméret.

Az, hogy ettől miért válik egy böngésző- és eszközfüggetlen az interaktivitást segítő weboldalba beépülő funkció fölöslegessé így általánosan a szemedben, azt nem tudom. Gondolom, hogy pl. egy a tartalmat, kategóriát, kulcsszavat szűrő blokk használata nem zavarna ennyire, mint az "elegánsan" (hi-hi, ezt jól megkaptam Tőled) elhelyezett egyéb elemek/eszközök.

Tök jó, hogy írod, hogy egy jó layout és stíluslap megoldás lehet a problémára. Én is így gondolom, mint ahogy sokan mások is. Az internetes oldalak megjelenési felülete egyszerre szűkül be az okos mobiltelefonok használatának elterjedésével és egyszerre tágul ki a monitorok méretének/felbontásának bővülésével ill. az újabb internet befogadó eszközök pl. a TV készülékek használatával. Egy okosan elkészített weboldal simán lekezeli ezt. Egyébként is erre megy a trend, nem ritka a 16-18pt használata a kenyérszövegre azaz bekezdésre alkalmazva.

Azt nem tudom pontosan, hogy mit értesz azon, hogy a "táblagépek ugyanis a viewport tetejére tappolással mind az oldal tetejére scrolloznak" és hogy miért rossz ettől a fenti példám. Az biztos, hogy az iPhone telefonom nem megy sehova hiába tappolom a weboldal alján, vagy csak én nem tudom, hogy hol van a viewport... ;-)

Twitter mobil alkalmazásom szereti a saját frame-ben megjeleníteni a külső hivatkozásokat, ergo rejtve marad a böngésző/oprendszer chrome, szóval itt biztos megszívom, mert mégiscsak nekem kell felfele scrollozni. Tudom, tudom van arra is lehetőség, hogy az a fránya link mégis csak a mobil Safariban nyíljon meg (én is ezt szeretem használni).

Egyébként az összes táblagép tudja ezt a funkciót, márkára és op. rendszertől ill. kiadástól és böngészőtől függetlenül? Ha igen akkor szuper.
Az iOs szimulátort használva keresem ezt a funciót az iPad nézetnél. A képernyő tetején megjelenő fekete infromációs sávra gondolsz? Az tényleg a weblap tetejére visz ha kétszer tappolok rá, de ezt csak most tudtam meg tőled, eddig ez nem volt egyértelmű a számomra (miért is tappoltam volna csak úgy magamtól a toolbarra?). Mindegy, holnap elmegyek a helyi t-mobilos bemutató terembe és megnézem ezt az android készülékeknél is.

Az akadálymentesített stílussal is teljesen igazad van (valaki szólhatna már a minisztériumban és az EU-s pályázatok elbírálóinak erről...).
Ha készítek egy szimpla HTML oldalt mindenféle CSS stíluslap nélkül, akkor 100% biztos lehetek abban, hogy az nemcsak "akadálymentes" hanem még mobilbarát is lesz, reszponzív!

Igazad van abban is, hogy a Drupal.hu tökéletesen akadálymentesített, hurrá! Most így a fórum textarea-ban írva nekem semmi gondom nincs a kontraszttal és fontmérettel, mert jó a szemem. A gyengénlátó segítségre szoruló tagok pedig biztos használni fogják a CTLR+ kombinációt... no problem.

Amúgy vágom, hogy mire gondoltál és részemről teljesen ok a dolog, ezen nem veszünk össze szerintem.

1
0
aboros képe

nem akarok én ezen igazából ám vitatkozni annyira. lehetne keresni ilyen felméréseket vagy csinálni :) hány % tud elvégezni ilyen-olyan feladatokat a böngészőben.

amúgy nagyítani is lehet egérrel, nem csak billentyűkombinációval.
tappolni meg a _tetejére_ kell nem az aljára.

hogy reszponzív e vagy sem a drupalhu azt nemtom miért fontos most, jelenlegi formájában sztem átmenne egy akadálymentesség auditon. kivéve, hogy nincs rajta + - ;)

1
0

-
clear: both;

Robert Petras képe

Semmi bajom nincs a jelenlegi Drupal.hu olvashatóságával kapcsolatban (egyenlőre!). Jelenleg egy kiöregedő MacBook Pro-t használok. 96 PPI-vel és 1440x900 felbontásnál + a kijelző fizikális méreteinél nézve a 13px-es bekezdés szövegméret simán olvasható. A fórumot használva azonban a texarea már csak 11px-t használ. Ez nálam mára már egy kissé kényelmetlenné teszi a használatot, de túlteszem rajta magam.

Arra azért kíváncsi lennék, hogy egy retinás új kijelzővel használni lennék kénytelen a nagyítást vagy sem. Szerintem igen, de a weblapok többségénél is lehet, hogy hasonló problémák lennének.

Szóval lehet, hogy hamarosan ismét terítékre kerül majd a betüméret használata a retinás kijelzők és hagyományos felbontású monitorok közötti szakadék miatt, nem gondolod? Majd kiderül, de részemről akár zárhatjuk is ezt a fórum posztot.

0
0
aboros képe

de a felbontásra is van media query, semmi akadálya, hogy más legyen a fontméret egy retinás bármin. télleg nem akadálymentesség témakör szerintem, de érdekes gondolat, hogy a reszponzívság manapság már egyfajta akadálymentesítés, csak nem látás károsultaknak hanem különféle eszközön érkező látogatóknak :)

0
0

-
clear: both;

Robert Petras képe

Szerintem itt nem a fontosságon van a hangsúly, bár ha úgy teszed fel a kérdést, hogy fontos-e még jobbá és használhatóbbá tenni egy weblapot a hordozható eszkezökön, akkor a válaszom IGEN.

  • Szeretnénk, hogy mobil eszközön könnyen és gyorsan kezelhető legyen a Drupal a látogatók számára ? [+]
  • Szeretne-e a hazai drupal közösségi portál irányt mutatni a Drupal-t használok táborának a zökkenőmentes mobil használattal? [++]
  • És egy személyes indok: szeretnék-e a drupal.hu-n kutyasétáltatás alkalmával 1000-szeri tappolás és nagyítás/kicsinyítés nélkül böngészni? [+++]

Mi akadálya van ennek? Gyakorlatilag 0 hagyományos grafikai elemből (értsd: pixel) épül fel a smink. Banner kép sem lehet akádálya ennek. Kihívást jelent ez? Biztos nem megoldhatatlan, akkor miért ne?

0
0
aboros képe

biztos vagyok benne, hogy az adminisztrátorok szívesen vesznek minden remek ötletet. de ennek semmi köze az akadálymentességhez. más a nevük is, "akadálymentesség" vs "reszponzív smink".

0
0

-
clear: both;

Robert Petras képe

Igazad van abban, hogy nagyon eltértünk a témától. Nem tehetek róla, adtad alám a lovat, mikor válaszodban a dolgok fontosságáról írtál.

Köszi a tippet is. Nem gondolod, hogy ha lenne ötletem az adminisztrárok felé a weblappal kapcsolatban, akkor azt már rég megírtam volna nekik/neked? Nem úgy jöttem ide a Drupal.hu-ra, hogy elkezdtem leveleket írni és osztani az észt az önkéntes alapon a portált üzemeltető jóravaló adminoknak (Te is az vagy, jól tudom?)

Egyszerűen csak Gusztáv írására válaszoltam. Ő nagyon egyszerűen elintézte a dolgot azzal, hogy azt írta röviden és tömören, hogy fölösleges az egész hókusz-pókusz. Ezzel biztos sokat lehet másoknak segíteni. ha pedig a szabad véleménynyilvánításnál tartunk akkor én pedig megpróbáltam körüljárni a témát másik oldalról is és leírni, hogy ez lehet, hogy valakinek mégiscsak hasznos lehet (akadálymentes smink vagy fel-le navigáló link). Mindegy már.

A fórumtéma kapcsán kezdtünk el csevegni és igen eltértünk a kiindulási ponttól, de Te ezt a fórumot tényleg csak 1 kérdés és hozzá tartozó válaszokra szeretnéd leredukálni? Amúgy akkor mit szólsz a nagyszerű Twitter-hez. Ott aztán nagyon sok jól összeszedett gondolatot lehet olvasni, de tudom ezt is egy új fórumtémában kellene megkérdezni.

Azért jó volt veled erről beszélni. Lezárod most a témát?

0
0
pante képe

Részemről nem gond, hogy kicsit eltértetek a téma tárgyától, érdekes volt átolvasni a véleményeket, amik annyira nem is off-topic, hiszen a +/- is ide kapcsolódik.

Összességében Petrás Róberttel értek egyet, mert az idős vagy kezdő felhasználó tényleg nem ismeri a böngészője funkciónak a teljes palettáját, ezért nagy segítség lehet neki akár egy "top" link is, ami hosszabb oldalaknál megspórolja a visszagörgetést. Nem lehet mindenki "technikai zseni" aki csak gyorsbillentyűkkel mozog egy adott honlapon, gondolkodni kell mindenkire.
(Mellesleg a W3C akadálymentesítési szabványa tartalmazza, hogy akadálymentesítésnél gondolni kell a mozgáskorlátozott felhasználókra is, ezért minimalizálni kell a billentyűzet alkalmazását)

1
0
Robert Petras képe

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:
    1. #content div {background:none transparent !important;}
    2. )

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

  1. /* ================================================
  2.  * GENERAL
  3.  * ================================================ */
  4. * {
  5. background: none transparent !important;
  6. }
  7.  
  8. body {
  9. background: none #000;
  10. color: #FF0;
  11. font: 18px /150% Arial,Verdana,sans-serif;
  12. margin: 0;
  13. padding: 2em 0;
  14. }
  15.  
  16. img {
  17. border: 1px solid #fff;
  18. height: auto;
  19. max-width: 100% !important;
  20. }
  21.  
  22. p {
  23. margin-bottom: 1em;
  24. }
  25.  
  26. a {
  27. color: #fff;
  28. padding: 0,
  29. text-decoration: underline;
  30. }
  31.  
  32. a:hover {
  33. color: red;
  34. }
  35.  
  36. a.active {
  37. color: red!important;
  38. text-decoration: underline !important;
  39. }
  40.  
  41. :focus {
  42. color: red;
  43. outline: 1px dotted #fff;
  44. }
  45.  
  46. #sidebar {
  47. border-right: 4px dotted #fff;
  48. float: left;
  49. padding: 0 2%;
  50. width: 25%;
  51. }
  52.  
  53. #content {
  54. float: right;
  55. padding: 0 2%;
  56. width: 65%;
  57. }
  58.  
  59. table, th, td, tbody, tr {
  60. background-color: #333 !important;
  61. border-color: #ff0 !important;
  62. color: #fff !important;
  63. }
  64.  
  65. ul li {
  66. list-style: disc inside none !important;
  67. }

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!

2
0
pante képe

Nagyon sokat segítettél, megfogadtam a tanácsaidat, az !important parancs segítségével sikerült átállítanom a betűt méretet és színt, illetve az al-alsminket is sikerült beüzemelnem.

A portálomon engedélyeztem a sminkváltást az akadálymentesítés ikonra kattintva, most már ez is remekül üzemel.
Egyetlen problémám, hogy -szerintem- a Skinr modul színezése annyira magas szinten van a css prioritásban, hogy még az !important paranccsal sem tudom a két oldalsáv blokkjait átszínezni (vagy csak helytelen classra hivatkozom a kódban).

Érdekes a hiba jelenség: smink ide-oda váltásnál kell frissítés vagy elkattintás valamelyik linkre, hogy a két oldalsáv háttérszíne rendeződjön, mert normálból (alapsmink) akadálymentesbe váltásnál megmaradnak a színes blokkok oldalt, fordítva pedig kiesnek a színek. Nem tudom mi okozhatja...
Ezt is csak akkor tapasztalom, ha adminként vagyok belépve. Vendégként hiába váltok, frissítésre is a normál smink háttérszíne marad meg az akadálymentesített smink két oldalsávjában.

0
0
Robert Petras képe

Követem a weblapot amit készítesz és ezt a fórum topicot is. Szerintem már majdnem célban vagy annak elérésében amit magad elé tűztél ki. Szerintem nem a Skinr modul okozza nálad a gondot, és egyszerű CSS írással meg lehet oldani. Persze ezt csak így nem bejelentkezett felhasználóként látom így.

Nos, ezek a sorok felelőlesek az oldalsáv megjelenéséért:

  1. /* sites/all/themes/mix_and_match/css/mix-and-match-skins.css
  2. ------------------------------------------------------------------------------*/
  3. .lt-green-background .inner,
  4. .lt-green-background .comment,
  5. .node-top .lt-green-background .inner,
  6. .node-bottom .lt-green-background .inner {
  7. background-color: #B2D982;
  8. color: #333;
  9. }
  10. .lt-orange-background .inner,
  11. .lt-orange-background .comment,
  12. .node-top .lt-orange-background .inner,
  13. .node-bottom .lt-orange-background .inner {
  14. background-color: #FFA85C;
  15. color: #333;
  16. }

Ilyen sorrendben hívja be a Drupal oldalad a stíluslapokat:

  1. <style type="text/css" media="all">
  2. @import url("./sites/all/themes/fusion/fusion_core/css/fusion-style.css?mcc97b");
  3. @import url("./sites/all/themes/fusion/fusion_core/css/fusion-typography.css?mcc97b");
  4. @import url("./sites/all/themes/fusion/fusion_core/skins/core/fusion-core-skins.css?mcc97b");
  5. @import url("./sites/all/themes/mix_and_match/css/mix-and-match-style.css?mcc97b");
  6. @import url("./sites/all/themes/mix_and_match/css/base-colors.css?mcc97b");
  7. @import url("./sites/all/themes/mix_and_match/css/mix-and-match-skins.css?mcc97b");
  8. @import url("./sites/all/themes/blind/style.css?mcc97b");</style>

Ha jól megnézed ezt, akkor látod, hogy az utolsó előtti stíluslapban megadott értéket kell az utolsó általad létrehozott stíluslapon felülírni.

Jelenleg így néz ki a style.css fájl amit írtál, kicsit brutálisan sok az "important" használata. Idővel ha több weblap stílusát kell szerekesztened és még jobban elmélyülsz a témában, akkor lehet, enélkül is meg fogod tudni oldani ezt ("important" használat nélkül lenne persze az ideális).

  1. body {background-color:black !important; color:yellow !important; font-size:18px !important;}
  2. h1 {color:yellow !important; font-size:18px !important;}
  3. h2 {color:yellow !important; font-size:18px !important;}
  4. div#main-wrapper {background-color:black !important; color:yellow !important; font-size:18px !important;}
  5. div#week {background-color:white !important;}
  6. div#main-inner {background-color:black !important; color:yellow !important; font-size:18px !important;}
  7. div#block-block-3 {background-color:black !important; color:yellow !important; font-size:18px !important;}
  8. div#block-block-4 {background-color:black !important; color:yellow !important; font-size:18px !important;}
  9. div#block-block-5 {background-color:black !important; color:yellow !important; font-size:18px !important;}
  10. div#block-block-6 {background-color:black !important; color:yellow !important; font-size:18px !important;}
  11. div#block-calendar_block-calendar {background-color:black !important; color:yellow !important; font-size:18px !important;}
  12. div#block-simplenews-0 {background-color:black !important; color:yellow !important; font-size:18px !important;}
  13. div.fo1hir {background-color:black !important; color:yellow !important; font-size:18px !important;}
  14. div.fo2hir {background-color:black !important; color:yellow !important; font-size:18px !important;}
  15. div.fofo1hir {background-color:black !important; color:yellow !important; font-size:18px !important; height: 550px !important;}
  16. div.fofo2hir {background-color:black !important; color:yellow !important; font-size:18px !important; height: 350px !important;}
  17. div.block-outer {background-color:black !important; color:yellow !important; font-size:18px !important;}

Én valami ilyesmire gondoltam gyorsmegoldásként:

  1. /* AKADALYMENTES
  2. ------------------------------------------------------------------------------*/
  3. * {
  4. background: transparent !important;
  5. color: #ff0 !important;
  6. }
  7. body {
  8. background: none #000 !important;
  9. font-size: 18px !important;
  10. }
  11. a:link,
  12. a:visited {
  13. color: #ff0 !important;
  14. outline: 0;
  15. }
  16. a:hover {
  17. color: #fff !important;
  18. }
  19. :focus,
  20. a:focus {
  21. outline: 2px dotted #f00;
  22. }
  23. .lt-green-background .inner,
  24. .lt-green-background .comment,
  25. .node-top .lt-green-background .inner,
  26. .node-bottom .lt-green-background .inner,
  27. .node-top .lt-orange-background .inner,
  28. .inner {
  29. background: none transparent !important;
  30. /* color: #ff0 !important; */
  31. }

Az "important" felülírást csak azért használtam, mert Te egy alsminket használt, amely minden esetben be fogja tölteni a szülősmink összes stíluslapját alapértelmezett állapotban ezért ezeket felül kell írni. Nem feltétlen kell ezt használni és nem egy szép megoldás.
Ha különálló sminket használnál akkor nem lenne kellene felülírni semmit és a felülíráshoz sem kell az "important", mert az csak egy "gyorsfoltozó" megoldás ami később akár még gondot is okozhat.

Gyorsan leteszteltem a fentieket és nálam megfelelően működött. Remélem, hogy tudtam segíteni.

Tipp: Ha végeztél a weblap stílusával akkor ne felejtsd összevonni a CSS lapokat (Beállítások » Teljesítmény » CSS fájlok összegyűjtése és tömörítése választógomb aktiválása).

Belinkeled majd a weblapod címét ide a végére?

1
0
pante képe

Köszönöm a segítségedet, az általad említett módosításokat elvégeztem, nagyszerűen működik, pontosan így szerettem volna kivitelezni! :-)
Szerencsére megoldódott az oda-vissza váltásból adódó smink frissítési probléma is.
Ígéretemhez híven természetesen megosztom a még fejlesztés alatt álló önkormányzati weblap címét: http://bit.ly/U6OoFg
Most már úgy érzem vállalható, bár még nem 100%-os és kisebb ráncfelvarrásokra szorul itt-ott.
Amint időm engedni fogja, szeretném magam jobban beleásni a CSS rejtelmeibe, hogy egy a szabványokhoz igazodó akadálymentes sminket tudjak fejleszteni, ami különálló sminkként és nem al-alsminkként fog funkcionálni.
Próbáltam keresni készterméket, de sajnos nem találtam, se hazai, se nemzetközi téren. Itt a Drupal.hu-n volt régen egy ilyen kezdeményezés, sajnos abbamaradt. Hiány van ingyenes, akadálymentes sminkekből.

0
0
nevergone képe

Ez a téma már messze visz, független a Drupaltól, szerintem inkább a Weblabor keretei közé való.

„a szabványokhoz igazodó akadálymentes sminket tudjak fejleszteni, ami különálló sminkként és nem al-alsminkként fog funkcionálni.”

Továbbra sem érzem tisztázva azt, hogy te mit értesz akadálymentes smink alatt. Ha egy oldal elkészítése igazodik a W3C ajánlásaihoz, akkor az már majdnem akadálymentesnek mondható. Ilyen szempontból pl. a drupal.hu is elég jól akadálymentesített, érdemes nekiereszteni egy képernyő-felolvasó programot. Az pedig megint nem tiszta nekem, hogy mi a probléma az alsminkekkel, a cégnél mi is használunk elég sokat (sőt, jobbára csak azt), igaz direkt ilyen célra készített „vászonsminkek”-ből kiindulva.
Természetesen van az akadálymentesítésnek magasabb szintje (pl. WCAG), de ott már gyakran a tartalmak felvitelekor bukik el a dolog.

„Hiány van ingyenes, akadálymentes sminkekből.”

Nem értek vele egyet, lásd fent. Ha egy smink normálisan ki van dolgozva és megfelel az ajánlásoknak, már nagyon sokat tett az akadálymentesítésért.

3
-2