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.

hirdetés
Online WordPress Tanfolyam - Hamarosan nyitunk!

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!