Miért ne használj sorkizárt szöveget a weben?
Egy szöveg akkor sorkizárt, ha a szöveg sorai mind a bal, mind a jobb oldalon igazodnak a szövegmezőhöz, azaz mindkét margóhoz egyenletesen illeszkednek:
Ennek érdekében a szavak közötti szóközök automatikusan igazodnak, hogy a sorok egyenletes szélességűek legyenek. A sorkizárás miatt a szavak közötti térköz egyenetlenné válik, és függőlegesen üres sávok alakulhatnak ki a szövegben. Ezek a sávok vizuálisan zavaróak, és elvonhatják az olvasó figyelmét, illetve a szavak közötti térköz soronként változhat, ami a folyamatos olvasást is megnehezíti:
A balra igazított szöveg “szabálytalan” jobb oldala viszont segít abban, hogy könnyebben nyomon tudjuk követni, hogy hol tartunk az olvasásban:
Az olvashatósági problémák különösen érintik a diszlexiás olvasókat. A becslések szerint a lakosság 10%-ának nehezíti meg az életét valamilyen szinten a diszlexia.
A Web Akadálymentesítési Irányelvek (WCAG) szerint a szövegeknek balra igazítottnak kell lenniük, hogy mindenki számára könnyen olvashatók legyenek.
A függőleg üres sávok és a változó térköz azok számára is gondot okozhatnak, akik képernyőnagyítót használnak. Balra igazított szövegnél könnyebb megtalálni a megfelelő sort, még akkor is, ha a felhasználó görget az oldalon.
A nyomtatott anyagokban a sorkizárás azért is működik, mert printben pontosan lehet tudni, hogy hol lehet a szavakat elválasztani, azonban a weben ez nem megoldható. Bár a CSS hyphens segíthet ebben, de ez nyelvenként eltérő – angolul már elég jól működik, de magyarul még nem.
A sorkizárás hatása a szöveg szélességétől is függ: minél keskenyebb a szövegtörzs, annál zavaróbbak az üres sávok.
A tipográfia nemcsak a betűk formájáról szól, hanem a szavak és betűk közötti térközökről is. A sorkizárás viszont ezeket a távolságokat torzítja, és gyakran esztétikai problémát okoz. Ha nem rendelkezel a tipográfiai finomhangoláshoz szükséges ismeretekkel vagy eszközökkel, jobban jársz, ha egyszerűen balra igazítod a szöveget.
Ha azt gondolod, hogy a sorkizárás professzionálisabbá teszi az oldalt, nézz körül a legnagyobb weboldalakon! Sem a New York Times, sem a The Guardian, és semelyik nagy, professzionális weboldal nem használ sorkizárást.
Nem véletlen, hogy egyre kevesebbet találkozol a sorkizárt opcióval: a WordPress oldalaknál a userek számára már egyáltalán nem elérhető a sorkizárt formázási opció, de a Figmában is csak a rejtett funkciók között van.
Bár a sorkizárás nyomtatott anyagoknál megszokott, ott sem kötelező. A problémák ugyanúgy fennállnak, különösen, ha a szöveg szélessége 40 karakter alá csökken, hiszen még a legjobb elválasztási rendszer használata esetén is túl sok lehet a szóelválasztás. Sok nyomtatott anyagban használnak balra igazított szöveget, és ezek ugyanolyan esztétikusak tudnak lenni.
Weboldalakon és alkalmazásokban tehát a balra igazított szöveg nemcsak olvashatóbb, hanem akadálymentes is. A nagyobb oldalak példája is azt mutatja, hogy a sorkizárás helyett az egyszerűbb, funkcionálisabb megoldások a célravezetőbbek.
Ne bonyolítsd túl, az olvasók hálásak lesznek érte!
WCAG szabvány – az akadálymentes weboldal fejlesztése
A WCAG egy nemzetközi szabvány, amelyet azzal a céllal hoztak létre, hogy iránymutatást adjon az akadálymentesített weboldalak fejlesztéséhez és karbantartásához.
A WCAG-et a World Wide Web Consortium (W3C) fejlesztette ki, és jelenleg a 2.1-es verzió a legszélesebb körben alkalmazott szabvány. A 2.2-es verzió megjelenése hamarosan várható, amely további finomításokat és új iránymutatásokat tartalmaz majd.
Az akadálymentesség nem új keletű fogalom a webfejlesztésben, azonban az elmúlt évtizedek technológiai fejlődése és a felhasználói igények változásai alapvetően formálták át a hozzáállást és a megvalósítási gyakorlatokat.
A „sárga-fekete kör” időszaka
A korai akadálymentes weboldalak fejlesztésekor a fő cél az volt, hogy a tartalom minimális szinten elérhető legyen a fogyatékkal élő emberek számára. Az irányelvek egyszerűek voltak, sokszor vizuálisan is meghatározott elemekkel, például:
- Magas kontrasztú színsémák: a sárga-fekete színkombináció ikonikus lett az akadálymentesség szimbólumaként. Ez biztosította, hogy a szövegek jól olvashatóak legyenek.
- Minimális interakciós elemek: az oldalak egyszerűek voltak, kevés interaktív elemmel, hogy ne okozzanak nehézséget azoknak, akik billentyűzettel vagy képernyőolvasóval böngésztek.
- Alapvető alternatívák: A képekhez megadott egyszerű leíró szövegek és nagybetűs, könnyen olvasható tartalmak.
Bár ezek az irányelvek alapvető akadálymentességet biztosítottak, nem vették figyelembe a felhasználói élmény komplexitását, vagy a különböző fogyatékossággal élő emberek szélesebb körének igényeit.
Az új korszak: WCAG és a modern irányelvek
A web technológiák fejlődésével az akadálymentességi követelmények is sokkal átfogóbbá és kifinomultabbá váltak. A WCAG szabvány megjelenése meghatározó változást hozott, különösen a 2.0, 2.1 és a várható 2.2 verziók. A modern megközelítés már nemcsak a technikai megfelelésre, hanem a valódi használhatóságra és élményre fókuszál.
- Rugalmas színsémák: A sárga-fekete kombináció helyett a színek megfelelő kontrasztja a kulcs. A szabvány pontosan meghatározza a minimum kontrasztarányt, miközben lehetőséget ad az esztétikus dizájnra is.
- Képernyőolvasók támogatása: Az oldal elemei, például a gombok, linkek és űrlapmezők részletes leírásokat és logikus hierarchiát kapnak, hogy a képernyőolvasók pontosan tudják értelmezni őket.
- Adaptív dizájn: Az akadálymentes oldalak reszponzívak, mobileszközökön és asztali gépeken is akadálymentesen használhatóak.
- Multimédia tartalmak hozzáférhetősége: Feliratozás videókhoz, jelnyelvi tolmács lehetősége, valamint alternatív szöveges leírások képekhez és animációkhoz.
- Interakció billentyűzettel: Az új szabványok követelménnyé teszik, hogy minden funkció elérhető legyen billentyűzettel, érintőképernyő nélkül is.
- Kognitív akadálymentesség: Az irányelvek azokat is segítik, akik tanulási nehézségekkel vagy kognitív kihívásokkal küzdenek, például egyszerű nyelvezetű tartalmakkal és könnyen átlátható navigációval.
Az új szabványok célja, hogy ne csak a technikai megfelelés valósuljon meg, hanem a felhasználói élmény is javuljon. Az akadálymentesség ma már nem egyszerűen arról szól, hogy „használható” egy weboldal, hanem arról, hogy minden felhasználó számára optimális élményt nyújtson.
A WCAG szabvány szintjei
A WCAG három szintet határoz meg annak érdekében, hogy a megfelelést különböző szinteken lehessen értelmezni:
- A szint: Ez a minimum követelmény, amely alapvető akadálymentességet biztosít. Ezek a funkciók szükségesek ahhoz, hogy a weboldal legalapvetőbb elemei használhatóak legyenek.
- AA szint: Az iparági szabvány szerinti elvárás, amely az általános akadálymentességet biztosítja. Az AA szint a leggyakoribb cél.
- AAA szint: Ez a legmagasabb szintű akadálymentesség, amely mindenki számára optimális felhasználói élményt nyújthat. Azonban teljesen nem minden weboldal esetében megvalósítható.
Jogszabályi követelmények Magyarországon
A magyar jogszabályok – köztük a 2007. évi XCII. törvény – előírják az akadálymentességet, a WCAG szabványoknak számos szervezetnek kötelező érvényűen meg kell felelniük, különösen azoknak, akik a közszolgáltatások terén működnek, valamint a széles közönséget célzó online tartalommal rendelkező szervezeteknek, mint például
- az állami közlekedési cégeknek, amelyek online jegyvásárlást, menetrendet vagy egyéb közlekedési információkat biztosítanak,
- az olyan állami és egyes magán iskoláknak, amelyek online oktatási anyagokat vagy információkat biztosítanak,
- de ide tartozik minden állami vagy önkormányzati szerv is, amely online elérhető szolgáltatásokat, információkat nyújt a nyilvánosságnak (pl. minisztériumok, helyi önkormányzatok, hivatalok, közszolgáltatók).
Ez azt jelenti, hogy az állami és önkormányzati szerveknek kötelező biztosítaniuk, hogy weboldalaik megfeleljenek legalább a WCAG 2.1 AA szintű követelményeknek.
Auditálás a megfelelés érdekében
A WCAG szabványoknak való megfelelést külön auditorok vizsgálják. Az auditálás során egy szakértő csapat elemzi a weboldal működését és tartalmát, hogy értékelje, mennyire felel meg a szabvány előírásainak.
Az audit eredménye alapján fejlesztési javaslatokat kap a weboldal tulajdonosa, amelyek segítenek a megfelelés elérésében.
A megfelelés folyamata gyakran kettős: először az auditálás, majd a különböző fejlesztések kivitelezése történik meg.
Az akadálymentességi funkciók bevezetése időt és szakértők munkáját igényli, hiszen minden egyes weboldal esetében más-más kihívásokkal találkozhatunk. A folyamat során nemcsak a szabványok szerinti megfelelés a cél, hanem az is, hogy a weboldal a lehető legjobb felhasználói élményt nyújtsa a célközönség számára.
Mit jelent ez a gyakorlatban?
- Első lépés: Az auditálás során az auditorok részletesen megvizsgálják az oldalt, tesztelve az akadálymentességet, például képernyőolvasók és különféle eszközök használatával.
- Második lépés: Az audit jelentése alapján a fejlesztőcsapat elvégzi a szükséges módosításokat, például kiegészíti az oldal forráskódját vagy átdolgozza a dizájnt.
- Harmadik lépés: Az elkészült módosításokat újabb tesztelések követik, hogy biztosak lehessünk benne, az oldal valóban megfelel a WCAG előírásainak.
Összegzés
A WCAG szabványnak való megfelelés nem csupán jogszabályi elvárás, hanem a modern webfejlesztés egyik eleme. Bár az akadálymentesség elérése időt és szaktudást igényel, a megfelelő tervezéssel és fejlesztéssel hosszú távon megéri a befektetést, hiszen egy jól megvalósított weboldal nemcsak a felhasználóknak, hanem az üzleti céloknak is kedvez.
Vissza az összes bejegyzéshezMi az a 404-es oldal? Miért jelenik meg és mit jelent?
Ez az úgynevezett 404-es oldal, amely akkor jelenik meg, amikor egy weboldal szervere nem találja a kért tartalmat.
De miért fontos, hogy a te weboldaladnak is legyen egyedi 404-es oldala? Ebben a cikkben bemutatjuk, mi az a 404-es oldal, miért hasznos, és hogyan készíthetsz hatékony, felhasználóbarát verziót.
A 404-es oldal alapvetően egy hibakódot jelenít meg, amely azt üzeni, hogy az adott URL-en keresett tartalom nem található. Ennek oka lehet elgépelés, egy törölt oldal, vagy akár egy elavult link. Bár a hiba technikai természetű, a felhasználók számára ennél sokkal több: egy kritikus pont, ahol eldől, hogy a látogató továbbra is marad-e az oldalon, vagy csalódottan távozik. Egy egyedi és jól kialakított 404-es oldal abban segít, hogy a látogatók ne csak értsék a hiba okát, hanem kapjanak megoldást is.
Egy jól megtervezett 404-es oldal javítja a felhasználói élményt. Ahelyett, hogy a látogató egy hibakódot látna, amely frusztrációt kelthet, egy jól megtervezett 404-es oldal navigációs lehetőségeket kínál. Irányíthatja őket a főoldalra, a legnépszerűbb tartalmaidra, vagy segíthet nekik egy keresősávon keresztül megtalálni, amit keresnek. Így a hibából származó csalódottságot pozitív élménnyé változtathatod.
A 404-es oldalak SEO szempontból is előnyösek. A keresőmotorok, például a Google, nagy hangsúlyt fektetnek a felhasználói élményre. Ha a látogatóid egyértelmű útmutatást kapnak egy nem létező oldal helyett, az csökkentheti a kilépési arányt, és javíthatja a weboldalad rangsorolását is. Bár a 404-es hibák nem segítik a SEO-t, egy jól megtervezett oldal mérsékelheti a negatív hatásokat.
Emellett a 404-es oldal egy nagyszerű lehetőség a márkaépítésre. Ha kreatív, humoros, vagy éppen a céged arculatát tükröző módon tervezed meg, az emlékezetes élményt nyújthat. Gondolj egy illusztrációra, amely a márkádat idézi, vagy egy szórakoztató üzenetre, amely oldja a látogatók frusztrációját. Az ilyen megoldások hosszú távon is pozitív képet alakíthatnak ki a látogatókban.
Ahhoz, hogy hatékony legyen, a 404-es oldalnak több fontos elemet is tartalmaznia kell. Először is legyen egyértelmű az üzenet. Ne hagyd, hogy a látogatók találgassanak, mi történt. Az üzenet lehet egyszerű és közvetlen, például: „Sajnáljuk, az oldal, amit keresel, nem található. Talán ez segíthet!” Ezután ajánlj fel navigációs lehetőségeket. Adj egy gombot, amely a főoldalra visz, vagy helyezz el linkeket a legnépszerűbb oldalaidhoz. Egy keresősáv szintén hasznos eszköz lehet, hogy a látogatók könnyen megtalálják, amit keresnek.
A vizuális megjelenés szintén fontos. A 404-es oldalnak tükröznie kell a céged arculatát. Használj olyan színeket, betűtípusokat és grafikákat, amelyek egységesek a weboldalad többi részével. Egy kis humor vagy kreativitás sosem árt: például egy vicces illusztráció, amely a helyzetet ironikusan ábrázolja, oldhatja a feszültséget.
Ezen túl a mobilbarát kialakítás elengedhetetlen. Manapság a látogatók nagy része mobil eszközökről érkezik, így az oldaladnak minden eszközön jól kell működnie. Győződj meg róla, hogy a gombok, linkek és keresősávok könnyen elérhetők és használhatók kis képernyőkön is.
Példaként említhetjük a Pixar 404-es oldalát, amely egy aranyos karakter illusztrációval próbálja oldani a helyzetet, miközben egyértelmű navigációs lehetőségeket kínál. Hasonlóan emlékezetes a LEGO oldala is, ahol egy LEGO-figura jelenik meg, mintha épp „összerakná” az oldalt. Ezek a kreatív megoldások nemcsak praktikusak, hanem szórakoztatóak is.
Összegzésként elmondható, hogy a 404-es oldal nem csak egy technikai szükséglet, hanem egy lehetőség is. Segítségével javíthatod a felhasználói élményt, csökkentheted a látogatói csalódottságot, és erősítheted a márkád megítélését. Ha még nincs egyedi 404-es oldalad, ideje elgondolkodni rajta, hiszen ezzel egy egyszerű hibát is előnyödre fordíthatsz. Ha segítségre van szükséged a tervezéshez vagy megvalósításhoz, keress minket bizalommal!
Vissza az összes bejegyzéshez