Akadálymentesítés kis szépséghibával

A Real Accessability ingyenes WordPress bővítmény bemutatása

Ahogy a kerekesszékesekre gondolva rámpát építenek a lépcsők építésekor, egy weboldal készítésekor is gondolnod kell azokra, akik látásukban korlátozottak. Ugyanakkor arra is ügyelned kell, hogy a weboldal alap megjelenése szép, esztétikus legyen. Egyes megrendelők az alap grafikát is úgy kérik megtervezni, hogy a gyengén látók miatt nagy kontrasztú legyen a megjelenés, de ez nem mindig jön össze a szép megjelenéssel.

(Vendégcikk Ács Zoltántól)

A szöveg kontraszt teszteléséhez megfelelő eszközök rendelkezésre állnak, ilyen például a Colour Contrast Analyser, amivel kiválaszthatod azokat a háttér- és szövegszíneket, amelyek használata könnyű olvasást biztosít. Innen letölthető: https://github.com/ThePacielloGroup/CCA-Win/releases/

Viszont ha nem akarod az egész weboldal megjelenését ennek megfelelően kialakítani, szerencsére vannak olyan eszközök is, amikkel ki-be kapcsolható az akadálymentesítés egy weboldalon. Ilyen a címben szereplő Real Accessability bővítmény. Hogy miért szépséghibával? Később arra is kitérek.

A plugin innen letölthető: https://wordpress.org/plugins/real-accessability/  A plugin szerzője a Realmedia. A 4.3.13-as WordPress verzióval tesztelték, de én a 4.8.3-as verzióval használtam és jól működik.

Telepítése a szokásos, bekapcsolni se felejtsd el!

Beállítások

Nagyon könnyű dolgod lesz, ugyanis „gyárilag” semmiféle beállítás nem lehetséges.

A bővítmény megjelenése

Ha megnézed az oldaladat, a jobb oldalon a böngésző széléhez tapadva megpillanthatod a plugin kék színű nyitógombját egy embert ábrázoló ikonnal. Erre kattintva kinyílik a menü, ami angol nyelvű, de ezen tudunk változtatni.

Innen letölthetőek a bővítmény magyar nyelvi fájljai »

Kicsomagolás után a két fájlt a wp-content/ languages/plugins mappába kell másolni. Az oldalt frissítve máris magyar nyelvű lesz a menü. Kis hiba viszont, hogy így a „Betűméret csökkentése” felirat két sorba törik, ami nem szép. Ezt tudod orvosolni custom CSS-sel, de ez már egy új téma.

A bővítmény megjelenésének testreszabása

Sablonodtól függ, hogy a custom CSS-t hol szerkesztheted. Van, amikor a sablonnak találsz erre külön Theme Options menüpontot. Van, amikor a kezelőpult Megjelenés -> Testreszabás -> Egyedi CSS oldalon teheted ezt meg. De amikor úgynevezett gyereksablonnal dolgozol, és annak van saját style.css fájlja, akkor abba érdemes beírni. Mindhárom esetben az alábbi CSS kóddal állíthatod be az akadálymentesítés menü megjelenését:

#real-accessability {
width: 200px;
right: -200px;
border: 1px #063d8d solid;
top: 110px;
}

width: 200px; – írd át 210px-re, így magyar nyelven nem lesz sortörés
right: -200px; – írd át ezt is 210px-re, mert a szélességgel együtt ezt is állítanod kell
border: 1px #063d8d solid; – állíthatod a menü keretszínét
top: 110px; – állíthatod a menü függőleges pozícióját, ha pont belelógna egy oldalelembe

Ezekkel a kódokkal módosíthatod a menü háttérszínét:

#real-accessability {
background: #ffffff;
}
#real-accessability ul {
background: #ffffff;
}
#real-accessability-copyright a {
background: #ffffff;
}

Ezzel a kóddal módosíthatod a menü nyitógombjának színét:

#real-accessability a#real-accessability-btn {
background-color: #ff0000;
}

A menü működése

Könnyű dolgod lesz, ugyanis értelemszerű a használat:

Betűméret növelése – több kattintással növelheted az oldal betűméretét.
Betűméret csökkentése – több kattintással csökkentheted az oldal betűméretét.
Fekete-fehér – átválthatsz fekete-fehér nézetre.
Inverz színek – átfordíthatod a színeket.
U – aláhúzással kiemelheted a linkeket.
A – beállíthatod a betűtípust Arial-ra. Erre főleg akkor lehet szükség, ha valamilyen cirkalmas, nehezen olvasható betűtípust használ az oldal.
Visszaállítás – egy kattintással minden visszaáll az eredeti állapotba.

Page Reader

Elérkeztünk a kis szépséghibához. Ennek a funkciónak elméletileg az lenne a feladata, hogy felolvassa az oldal szövegét. Sajnos nagyon sok guglizás, fórum túrás, állítgatás után sem sikerült ezt működésre bírnom. A végén arra jutottam, hogy ez nem is biztos, hogy baj:

  • a jobb oldali ember ikonra kattintva megnyílik a Page Reader támogatás oldala. Itt láthatod, hogy eleve a böngészők többségén nem támogatott ez a funkció;
  • Javascript futtatás kell hozzá, amit sokan letiltanak a böngészőjükben;
  • futni kell hozzá a ResponsiveVoice Browser Compatibility-nek, amit itt lehet megvásárolni, vagy korlátozott szolgáltatásokkal kipróbálni, de ennek a beállítása sem egyszerű és tapasztalatom szerint nem mindig működik;
  • végül nem is biztos, hogy jó megoldás, ha egy gombnyomásra az oldal összes szöveges tartalmát felolvassa.

Azt javaslom, hogy ezt a funkciót tüntesd el a bővítményből, és ha felolvasást szeretnél, azt oldd meg másként, például egy erre való WordPress plugin segítségével, amelyet szintén a fenti linken elérhető csapat fejlesztett és tapasztalatom szerint jól működik. Erről egy másik leírásban foglalkozom majd.

Az eltüntetést egyszerűen CSS kóddal meg tudod tenni:

#real-accessability-player {
display: none;
}

Copyright

A menü alján találhatsz egy copyright sor, ami valójában nem is működik, ugyanis nincs link fűzve hozzá. Így végképp nincs értelme. Ha ezt is szeretnéd eltüntetni, szintén CSS kóddal megteheted:

#real-accessability-copyright {
display: none;
}

Összegzés

Egy nagyon egyszerűen használható, de sokat tudó bővítményről van szó. Biztos sokaknak az is előny, hogy nem kell egy sor beállítással vesződni, alaphelyzetben is tud mindent, ami kell. A leírás készítésekor próbáltam más hasonló bővítményeket is. Vannak bonyolultabbak, rengeteg beállítási lehetőséggel, de a legfontosabb funkciókban semmivel nem tudnak többet ennél. Ajánlom mindenkinek a használatát!

 

Oszd meg Te is:

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn

Ezek is érdekesek lehetnek számodra: 

Iratkozz fel hírlevelünkre!

Javasolt eszközök:

Banner250x250.png
Elementor Pro
Generatepress Logo White Asset
GeneratePress
Divi 4.0
Divihello
Prémium támogatás és ajándék Divi licence
Adatvedelem.png
ADATVÉDELEM minta
Aszf.png
Webshop ÁSZF minta

“Akadálymentesítés kis szépséghibával” bejegyzéshez 6 hozzászólás

  1. Szia, ez valóban egy fontos kérdés, annál is inkább, mert az EU is elvárja a közintézmények honlapjainak akadálymentesítését. A félelmem csak az, hogy az 1.0 verziónál megálltak a fejlesztéssel/frissítéssel, 1 éve nem változott semmi. Ilyenkor felmerül bennem, hogy az illető fejlesztők egyáltalán gondozzák-e a plugint, ügyelnek-e az újabb WordPress verziókkal való kompatibilitásra? Az aktív installok száma (+1000) sem túl nagy.

    Amikkel én még találkoztam:

    SOGO Accessibility: https://wordpress.org/plugins/sogo-accessibility/

    Accessible Poetry: https://wordpress.org/plugins/accessible-poetry/

    illetve amelyiknek a legtöbb (+10.000) aktív telepítése van:
    WP Accessibility: https://wordpress.org/plugins/wp-accessibility/

    Nehéz megtalálni, hogy melyik a legjobb választás, ami kompatibilis a sablonoddal és a használt PageBuilder-rel is.

    üdv
    Tibi

    • Szia!

      Valóban elég sok hasonló plugin létezik, én is megnéztem párat. Nekem két dolog tetszik ebben:
      Egyrészt nagyon egyszerű a használata, az alap funkciókat nyújtja és nem kell állítgatni semmit sem.
      Másrészt a funkciói egyszerű CSS módosításon alapulnak, így feltehető, hogy talán nagyon nem problémás a használata mindenféle sablonnal. Én arra gondolok, hogy pont emiatt nem nagyon fejlesztgetik.

      De persze a legjobb, ha többfélét kipróbálunk, mielőtt az egyik mellett döntünk.

      Üdv: Zoli

  2. Magyarítás: talán egysoros marad a magyarítás, ha a “Kisebb betű” és “Nagyobb betű” vagy pedig a “Betűméret -” és “Betűméret +” feliratokat használjátok.

Szólj hozzá!

Ez a weboldal az Akismet szolgáltatását használja a spam kiszűrésére. Tudjunk meg többet arról, hogyan dolgozzák fel a hozzászólásunk adatait..