Manduca WordPress sablon: magyar és akadálymentes

Manduca akadálymentes WordPress Sablon kezdőoldala

Közel négyhavi munka és várakozás után bekerült az ingyenes WordPress sablonok gyűjteményébe (WordPress repository) a Manduca. A hivatalos oldala magyarul: Manduca. Nem kell külön letölteni, elég beírni a WordPress adminisztrációs felületébe (sablonok>sablon hozzáadása>keresés): hogy Manduca, egyetlen kattintással telepíthető is.

Jelenleg magyar, angol és francia nyelven működik. A GitHub-on mindig elérhető a létező legfrissebb változat (a magyar nyelvi fájllal együtt).

Megfelel a web akadálymentesítési irányelveknek (WCAG 2.0)

Egy akadálymentes WordPress honlap három alappillére a sablon, a bővítmények és a tartalomfeltöltés. A Manduca alkalmas akadálymentes honlapok készítésére, tehát olyan honlapok számára, amelyek megfelelnek a nemzetközi WEB akadálymentesítési irányelveknek (WCAG 2.0), és az EU-s szabványnak (ISO/IEC:40500:2012). A honlap azonban csak akkor lesz akadálymentes, ha a sablonon kívül a bővítmények és tartalomfeltöltést is a szabvány előírásai szerint végzik.

Az ilyen és ehhez hasonló WordPress sablonokat az accessibility-ready (magyarul talán így lehetne fordítani: akadálymentességre előkészítve) kifejezéssel jelölik meg a sablongyűjteményben, és szűrők segítségével lehet kikeresni ezeket, amelyeknek egy szigorú kritériumrendszer alapján végzett szakértői ellenőrzésen kell megfelelniük.

A Manduca WordPress sablon legfontosabb jellemzői

Az akadálymentes weboldal ergonomikus honlap. Egyszerű, nem zsúfolt, gyors, átlátható, érthető. A sablon és szabvány célkitűzése ugyanaz: hogy minden ember, képességeitől függetlenül gyorsan és könnyen megtalálja benne az őt érintő tartalmat, és könnyen tudja használni.

Az ingyenes Manduca WordPress sablon legfontosabb jellemzői:

  1. Csak billentyűzettel, egér nélkül is könnyen működtethető;
  2. Minden képernyőolvasóval teszteltük és jól működik;
  3. Rengeteg operációs rendszerrel és böngészővel (régebbiekkel is) teszteltük;
  4. Ergonomikus, áttekinthető, jól tagolt webdesign.

Billentyűzet-vezérlés

  • A weboldal minden vezérlőeleme aktiválható billentyűzet segítségével.
  • A fókusz halvány sárga kiemelés kis árnyékkal. Nagyon jól látszik;
  • A fókusz-kígyó. Aki a billentyűzetről használja, az oldalon TAB billentyűvel megy a következő vezérlőelemre. Néha nagyon nehéz ezt követni, például a fő tartalom végéről az oldalsáv elejére. A fókusz-kígyó (focus-snail nevű JavaScript) vizuálisan megjeleníti a fókusz haladását egy kék színű kígyózó sávval.

Használhatóság a képernyő-olvasókkal

    • A weboldal területeinek jelzése WAI-ARIA elemekkel;
    • Akadálymentes, szabályos címsorszintrendszer: A tipográfiával egységes és összehangolt. A weboldal címe többé nem első címsorszint, hanem egyszerű szöveg. A cím ugyanis a fejlécben szerepel minden oldalon, és a fő tartalom csak a második címsorszintben szerepel.
    • Az archív oldalakon viszont az archív címe az első címsorszint, a bejegyzések címei 2. címsorszinttel szerepelnek.
    • A címsorszintek valóban szakasz kezdetét jelzik, nem előzik meg más információk pl. a dátum vagy kiemelt kép.
    • Minden magyarországi képernyőolvasóval teszteltük.

Ergonómia

  • Áttekinthető, egyszerű, nem túlzsúfolt;
  • Reszponzív. Egészen a 300px széles képernyőtől a 1600px feletti széles képernyőkig optimális az elrendezése;
  • A tartalmi blokkok kiemelve és elkülönítve jól tagoltan láthatók;
  • A gombokat erősen megkülönböztetve egységesen piros színnel jelöltem meg;
  • Könnyű navigálhatóság: a Yoast SEO bővítmény kenyérmorzsa funkcióját bekapcsoljuk, megjeleníti a kenyérmorzsát;
  • Gyorsan betöltődik;
  • A kimenő linkeket ikonnal is megkülönböztettem;
  • Látható különbség a már meglátogatott linkek és a még nem meglátogatott linkek közt;
  • Megfelelő kontrasztarányok;
  • Egyszerű, klasszikus tipográfia.

Minden böngészővel működik

  • Nem használok egyedi betűtípust, hanem a legtöbb operációs rendszer által felismert Verdana betűtípust használom, címsoroknak pedig a talpas és keskeny Palatino-t. Azért nem töltök be egyedi fontokat, hogy az alapsablon legyen minél gyorsabb, a gyereksablonban pedig tetszőleges betűtípust választhatsz.
  • Alaposan teszteltük több tucat böngészőn, különböző képernyőfelbontással, képernyőolvasóval, nagy kontrasztú üzemmódban.
  • Akkor is használható, ha nem engedélyezik a JavaScript használatát. A fókusz változását vizuálisan jelző fókusz-kígyó (Focus-snail) ilyenkor nem működik, de a fókusz továbbra is látható marad.
  • Az akadálymentesség kritériuma a gyorsaság is. Ezért igyekeztem minél több felesleges kódot eltávolítani.
  • Szintén igyekeztem egyszerűsíteni a stíluskódokat, és mindenben a CSS2-t használni, mivel nagyon sokan régi böngészőt használnak, amelyek nem ismerik még a CSS3 új elemeit.

Néhány egyéb jellemzője:

  • Kiegészítettem microformats elemekkel. Ez nemcsak keresőoptimalizálás (SEO), hanem összefügg az akadálymentességgel. A cél ugyanis az, hogy minél egyszerűbben megtalálják az oldal információit.
  • HTML oldaltérkép egyedi sablonmintát készítettem. A kutatások szerint a keresőmotorok is szeretik, akár az XML oldaltérképet is helyettesítheti.
  • Elkezdtem a sablon beállításokat fejleszteni. Jelenleg még csak a lábrészbe lehet elhelyezni a weboldal tartalmának tulajdonosát, és ezt jeleníti meg. Ezt a Megjelenés > Testreszabás > Honlap azonosítás>Copyright szöveg pontban lehet megadni.
  • A belépett felhasználók számára a szerkesztés vezérlőgombot a bejegyzés elejére és végére is elhelyeztem.

Közreműködők

Köszönöm a tesztelést a feleségemnek: Nórának és Hosszú Jánosnak és Ócsvári Áronnak. Áron nemcsak tesztelt, hanem be is szállt a sablon fejlesztésébe. Oroszlánrésze volt a sablon létrehozásában egy cameruni fejlesztőnek: Blair Jersey-nek, és az amerikai akadálymentességi szakértőnek: Joe Dolson-nak, akik nélkül nem lett volna egy színvonalas akadálymentes WordPress sablon a Manducából.

Ha kipróbáltad, kérlek írd meg a véleményedet! A Kritika is nagyon fontos, mert abból még többet is tanulok: Kapcsolatfelvételi űrlap – Edelényi Zsolt