Létezik egy terület, ahol valószínű, hogy neked is fejlesztened kell a weboldalad használhatóságát.
Talán még csak most kezded a digitális akadálymentesítési utat a weboldalad tervezésében, ezért hoztunk 10 gyakori webakadálymentesítési hibát, amelyet a saját jól felfogott érdekében már illik elkerülnie mindenkinek a 2020-as években. Ugyanis több fronton árthat az oldaladnak.
Amikor a weboldalkészítés feladatára gondolsz, olyan részterületek jutnak eszedbe, mint SEO, tartalom, dizájn, menürendszer?
- Igen, a SEO fontos, mert lehetővé teszi, hogy a leendő ügyfeleid szeme előtt maradj, amikor a termékeddel kapcsolatos témákat keresnek.
- Igen a tartalom is fontos, mert a jól alkalmazott tartalomkészítés bizalmat ébreszt, hitelességet épít és végigvezeti a potenciális ügyfelet a vásárlás folyamatán.
- Igen a dizájn sem elhanyagolandó, mert a vizualizáció képes több információt átadni, ráadásul emlékezetesebben; pozitív benyomást gyakorolhat az emberekere és profibbá teheti a termékedet.
Mégis amikor új weboldalt hozunk létre, vagy új tartalmat készítünk, gyakran a vállalkozók (akaratlanul) elérhetetlen weboldalakat hoznak létre.
A rossz tervezési döntések sokféle embercsoport számára jelenthetnek akadályt.
Ezért is fontos, hogy megértsük, hol vannak a megértésbeli hiányosságaink a honlapunkon vagy hogy kiket zárunk ki akaratlanul.
A webes akadálymentesítés segít abban, hogy a világháló mindenki számára használható legyen.
De ennél jóval nagyobb előnyt nyújt neked.
Ezeknek a megcélzott embereknek meg kell hozniuk azt a döntést, hogy rád figyeljenek. Megértsenek, döntést hozzanak.
Neked épp ezért nemcsak megértened szükséges azt a helyzetet, amelyben a (leendő) vevőid döntéseket hoznak veled, a termékeddel kapcsolatban; de megfelelő eszközökkel jó irányba is szükséges terelned a döntéseiket.
Ilyen elhanyagolt eszköz lehet a már említett „akadálymentesítés” is.
Azonban kevesen tudják azt, hogy nemcsak a weboldal általános felhasználói élményét javíthatja, de akár a keresőoptimalizálás folyamatát is támogathatja.
Ebben a cikkből megértheted a leggyakoribb és elhanyagolt internetes kisegítő lehetőségeket, hogy te már tudatosabban készülhess fel rá.
Miért fontos a weboldalad akadálymentesítése?
Nemcsak emberi jogi kérdés, hogy minden ember hasonló élménnyel böngészhesse az Internetet és fogyassza a tartalmat épp a te weboldaladon, de anyagi jól felfogott érdeked is.
Az elérhetetlen, nehezen fogyasztható, nehezített kapcsolatfelvételi és rendelési lehetősége kínáló weboldal árthat az eredményeidnek.
Az akadálymentesítés viszont számos előnyt jelent.
Amellett, hogy segíted a hátrányos helyzetű felhasználók egy bizonyos csoportjának kiszolgálását (aminek márkaépítő hatása is van), mindenki számára javítod a felhasználói élményt.
Tehát nemcsak a fogyatékkal élőknek, például képernyőolvasókkal olvasók, billentyűzet-felhasználók vagy kognitív fogyatékkal élőknek növeled a felhasználói élményt.
Például, ha valaki képernyőolvasóval (szöveget hang- vagy Braille-kimenetté alakító szoftverrel) fér hozzá a weboldaladhoz, akkor egy alternatív szöveg egy másik módot kínálhat neki a kép megértésére.
De emellett még a tökéletes látással rendelkező felhasználók is könnyebben navigálhatnak az oldaladon a jobb színkontraszttal és a több címkével.
Ez keresőoptimalizálás szempontjából is előnyös, hiszen a hozzáadott alternatív szövegek és a jobb linkleírások az oldalad eredményeit is javíthatják.
A WebAIM a legjobb 1 millió webhelyet tesztelte le.
Arra jutottak, hogy közel 98%-uk megbukott egy alapvető akadálymentesítési teszten. Oldalanként átlagosan 51 hibát találtak.
Mi a 9 leggyakoribb weboldal akadálymentesítési hiba, amit te is elkövethetsz?
Kerüld el a következő kilenc hibát, és nagyot tehetsz azért, hogy weboldalad orrhosszal előbbre kerülhessen megítélésben, népszerűségben és akár SEO-ban is a konkurensednél.
Íme a leggyakoribb hibák.
1. Alt-szöveg hiánya vagy helytelen használata
Ha a képeknél nem szerepeltetsz alternatív szöveget, az zavaró és negatív élményt jelenthet a képernyőolvasó felhasználói számára. Az alternatív szöveg egy HTML-attribútum, amely leírja, hogy egy kép mit ábrázol.
„Egy férfi, amint egy dobozzal kilép az ajtón”
Az alternatív szöveg információkat nyújt a képernyőolvasók számára, hogy azok pontosan leírhassák a képeket (azok tartalmát) a látássérült felhasználók számára.
Ha nem adsz meg alternatív szöveget vagy az alternatív szöveg nem túl leíró jellegű, akkor nem teszi mindenki számára elérhetővé weboldalad képeit.
Az altképelemek leíró szövegének megadása tehát olyan terület, ami gyakran elhanyagolt:
- A szöveg túl semmilyen ahhoz, hogy egyenértékű leírást adjon.
- A szöveg túl bőbeszédű, és eltereli a figyelmet a kép elsődleges céljáról.
- A szöveg olyan képhez tartozik, amely csak dekoratív célokat szolgál.
Itt feltétlenül tudni érdemes, hogy különbség van az üres és a hiányzó alternatív szöveg között.
Dekoratív célú kép esetén a szövegnek üres alt-attribútumot kell tartalmaznia (egy üres alt tag használata, amely alt=”” formában jelenik meg). Ebben az esetben ugyanis a képernyőolvasók figyelmen kívül hagyják, és ez nem befolyásolja a használhatóságot.
Ha a képernyőolvasó viszont hiányzó alt attribútumra bukkan, azt feltételezi, hogy a kép fontos és beilleszti a fájlnevet.
Grafikonok és infografikák esetében ‒ amelyek fontosak ahhoz, hogy a felhasználó megértse a weboldalt ‒, a fájlnév nem elegendő.
Ezért elengedhetetlen, hogy az összes képhez hozzunk létre alternatív szöveget.
2. Vérszegény színkontraszt
Próbáltál már fehér betűtípust olvasni fekete alapon?
Nem csak néhány sor erejéig (ami olykor jól is néz ki dizájn szempontjából), hanem akár egy egész cikket.
A végére golyóztak a szemeid, igaz?
A kellemetlen igazság az, hogy számos ember nehezítve olvas szöveget, kivéve, ha megkönnyíted nekik azzal, hogy a betűtípus és a háttér közötti színkontraszt valóban élessé teszed.
Ezért látsz gyakran fekete vagy egészen sötét betűtípust fehér alapon (akár itt ezen az oldalon is).
A színvakok vagy gyengénlátó egyének számára még nagyobb problémát jelenthetnek egyes színkombinációk használata a tartalomban.
Általános szabály, hogy a szöveg és a háttér színeinek kontrasztaránya legalább 3:1 legyen nagy szöveg esetén, és legalább 4:1 normál méretű szöveg esetén.
2022-ben a kezdőlapok 83,9 %-a rendelkezett alacsony kontrasztú szöveggel, egy 1 000 000 weboldalt vizsgált kutatás szerint.
A legtöbb megfelelési hiba kategóriában.
Fotó forrása: Wbaim
Gyakori színkontraszthibának számít az is, amikor csakis színt használunk az információ továbbításának egyetlen eszközeként.
Tipikus példa egy szó/kifejezés vagy egy weboldal egy részének hangsúlyozása.
A színkontraszt javításának legegyszerűbb módja, ha elkerülöd a hasonló színek használatát a háttér és a szöveg esetében.
Igaz ez a fejléc vagy az űrlapon használt elküldés, kapcsolatfelvétel gomb esetében is. A márkaszíneket tartalmazó megoldások is zavaróak lehetnek és nagyobb valószínűséggel okoznak kontrasztproblémákat.
Léteznek ma már kontrasztellenőrzők is, ilyen a WebAIM kontrasztellenőrzője (a kontrasztarány számszerűsítésére). Az eszköz megmondja, hogy a választott színek megfelelnek-e vagy nem. Minél magasabb az arány, annál ideálisabb, hiszen a kontraszt is nagyobb lesz.
A nagyobb kontraszt pedig olvashatóbbá teszi a weboldalad.
3. Nem hozzáférhető dokumentumok beágyazása
Valószínű, hogy már te is találkoztál a weboldalakon beágyazott PDF-ekkel vagy más típusú, gyakran elérhetetlen dokumentumokkal.
A PDF-eket és más, digitális terméknek minősülő dokumentumokat (például PowerPoint- és Word-dokumentumok) előnyős hozzáférhetővé tenni a fogyatékkal élő felhasználók számára.
Ezen programok némelyike a programokba beépített akadálymentesítési ellenőrzővel rendelkezik, amely segíthet benne. Gyakran könnyen megfeledkezhetünk a nem HTML elemekről, amikor weboldalunkat akadálymentesítésre optimalizáljuk.
Mi ezzel a gond?
A felhasználók nem tudják testre szabni ezeket a dokumentumokat, hogy könnyebben olvashatóak legyenek, sőt a kisegítő technológiákkal se működnek, különösen, ha a dokumentumokat csak képeket tartalmazó PDF-ként állítják elő.
4. Rossz hivatkozási szöveg
A linkek a weboldalad létfontosságú részét képezik.
Mind a felhasználói élmény szempontjából, mind a keresőoptimalizálás szempontjából fontosak. Mint ahogy az is, hogy pontosan leírd azokat linkszöveg segítségével, ekkor lesznek hatékonyak.
Kevesebb eséllyel mulasztják el sokan a kulcsszavak megadását egy belső hivatkozás esetén, míg a hiányzó hivatkozás szövegének megadása meglepően gyakori.
A képernyőolvasók figyelmen kívül hagyják a logókat, gombokat és ikonokat, ha nincs szövegük.
Tehát ezek hibásak.
Jóval nehezebb lesz a felhasználókat rávenni, hogy a CTA gombra kattintsanak. Előfordulhat például, hogy egy fotógalériában a „következő” és az „előző” nyílgombokat nem jelölöd meg.
Helytelen hivatkozási szövegnek számít a link homályos (nem jelölt, látható) vagy félreérthető szövege is.
A „további infó”, „bővebben”, a „kattints ide” nem kínál SEO szempontból értéket, de a felhasználók számára is akadályt jelenthet, hogy a képernyőolvasón keresztül eljusson a weboldalad tovább oldalaira.
A teljes link horgonyszöveg nélküli alkalmazása is hasonló probléma lehet.
Célod az, hogy a kattintható szöveg tűélesen leírja, hogy a felhasználó mit találhat a következő oldalon.
A navigációs linkek a képernyőolvasók számára problémákat okozhatnak, ha rosszul vannak kódolva.
Ilyenkor a képernyőolvasók ahelyett, hogy átugornák őket, minden alkalommal meghallgattatják a navigációs menüt a felhasználóval, amikor azok egy új oldalt nyitnak meg.
ARIA-szerepek navigációs menühöz rendelésével jelezheted a céljukat. A képernyőolvasók máris elkerülik őket.
5. Hiányzó űrlapcímkék
Mutass egy olyan weboldalt, amelyen legalább egy űrlap nem szerepel, még akkor is, ha az csak a kapcsolatfelvételi oldalon található!
Nos, az űrlapok esetében minden mezőnek van egy címkéje, amely jelzi a felhasználóknak, hogy milyen információkat kell megadniuk.
Jó esetben legalábbis.
Ha nálad nem, akkor az űrlapjaid nem érhetők el mindenki számára.
Az űrlapbeviteli mezőknek címkére van szükségük, hogy a képernyőolvasók és más kisegítő eszközök megértsék őket.
Ezek az eszközök pedig segítik a felhasználókat a rajtuk való navigálásban. Mit tegyél tehát?
- Adj címkét az űrlapbeviteli mezőknek.
- Adj leírást is az űrlap kódjához, mert a képernyőolvasók általában figyelmen kívül hagyják a helyőrző szöveget.
- A helyőrző szövegből ne hiányozzon az erős színkontraszt.
- Egy látható címke legyen található a <label> elemen belül, ez segít a felhasználóknak, képernyőolvasóknak és a robotoknak megérteni, hogy mit kell az egyes mezőkben feltüntetni.
6. Nincs jelölés az adattáblázatokhoz
A táblázatok rémálmok a képernyőolvasók és más kisegítő eszközök számára.
Amikor a képernyőolvasók találkoznak egy táblázattal, közlik a felhasználóval, hogy van egy táblázat adott mennyiségű oszloppal és sorral, majd folytatják az összes adat listázását.
Sajnos előfordulhat, hogy ezek az adatok nem a megfelelő sorrendben olvashatók. Ami még rosszabb, a képernyőolvasók nem tudják kiolvasni azokat a táblázatokat, amelyekben egynél több sor- vagy oszlopfejléc van.
Ha nem tudod elkerülni a táblázatokat, akkor tedd őket a legegyszerűbbé, és a megfelelő jelölést használva: az ID, HEADERS és SCOPE attribútumokat a táblázat minden részének megfelelő címkézésénél.
7. Billentyűzet csapdák
A weboldalon való navigáláshoz az egeret vagy az ujjadat (mobil esetében) használod? Nos, a látássérült ember leginkább billentyűzetet vagy más kisegítő eszközt használ a weboldalon való közlekedéshez.
Ez a számodra azt jelenti, hogy különös figyelmet kell fordítanod weboldalad elrendezésének tervére és létrehozására.
Célod tehát, hogy a felhasználók szóköz és a tabulátor billentyű használatával is eligazodjanak az oldaladon.
A szemantikailag helyes HTML-be épített egyszerű weboldal ezt minden változtatás nélkül lehetővé teszik, de az összetettebb weboldalnak „digitális terepelemekbe” kell kódolnia, hogy a billentyűzetet használók és a képernyőolvasók jobban mozoghassanak.
Ha egyes oldalak tetejére linkeket helyezel el, az lehetővé teszi a tartalomhoz ugrást és megkíméli a felhasználókat attól, hogy minden menüelemet át kelljen lapozniuk minden alkalommal, amikor új oldalt nyitnak meg nálad.
Ezek a gombok a tabulátor billentyű megnyomásakor jelennek meg.
Lényegében a tabulátor és szóköz billentyűkkel navigálhatnak ilyenkor a felhasználok a weboldaladon úgy, hogy kihagyják a navigációt és közvetlenül az oldal fő tartalmára léphetnek.
8. A címsorelemek nem megfelelő használata
Rengeteg hasznos információt írtál az oldaladon egy adott cikkben, mégis hiányoznak a címsorelemek?
Akkor hiányoznak azok az elemek, amelyek segítik a képernyőolvasó felhasználókat az oldal tartalmának kapcsolatának megértésében.
Sőt, az oldalon való könnyű navigálásban.
Ha rengeteg tartalom van egy oldalon és nincsenek címsorok, akkor a képernyőolvasót használó felhasználók nehezebben találják meg a keresett információt az oldalon.
A címsorelemek (H1 – H6) tehát nem csak „szövegblokkosításra ideálisak”, amolyan vizuális formázási célokra, amikor segítenek felosztani a tartalmat és könnyebbé tenni olvashatóság szempontjából.
Még a legszemantikusabb, leglogikusabb címsorszerkezet is hatástalanná válik, ha az egyes fejlécek nem írják le pontosan azt a tartalomrészt, amelyre vezetnek.
A jó fejlécstruktúrák megkönnyítik az emberek számára a tartalmak gyors beolvasását és a szerkezetének megértését, ugyanúgy, mint a nyomtatott újságban vagy egy könyvben.
Lehetővé teszik a képernyőolvasók és más kisegítő technológiát használó felhasználók számára is, hogy navigáljanak a weboldaladon és a képernyőn.
A címsorok a webes jelölés egyik alapelemei, mivel a kezdetektől fogva a HTML specifikációban szerepelnek.
A címsorok és alcímek tehát segítenek a tartalom strukturálásában – és ha sok szöveget írsz (ahogyan ebben a cikkben sem fukarkodtunk vele), akkor nélkülözhetetlenek.
A fejlécek:
- logikai sorrend alapján szülessenek meg (a H2 címkék a H1 címke alatti tartalmat kisebb részekre osztják, míg a H3 címkék minden H2-t kisebb részekre osztanak, és így tovább).
- írják le a tartalmat (például ebben a H2 címke alatti tartalmi részben minden akadálymentesítési hibához egy H3 címsort használunk).
Előnye, hogy lehetővé teszi az olvasók számára, hogy beolvassák az oldal tartalmát és megtalálják a kívánt információkat.
Nemcsak a kisegítő technológiákat használók számára fontos, de keresőoptimalizálási (SEO) szempontjából is.
9. Hiányzó videófeliratok és átiratok
A videók egy bizonyos típusú érzékszervi észlelést igényelnek, épp ezért potenciálisan akadályt is jelenthetnek egyes felhasználók számára.
Elég hozzá egy bizonyos fokú halláskárosodás és máris inkább hang nélkül hallgatja meg az illető az adott videót – ha feliratokat és átiratokat adsz meg, jobb élményt teremthetsz.
Tipp: a feliratok és az átiratok tartalmazzák a tartalom megértéséhez szükséges összes részletet. Igen, ezt azt jelenti, hogyha a videó valamilyen fontos hanghatásokat tartalmaz (pl. taps, hőbörgés, nevetés), le kell írni ezeket a hangokat.
Kerüld el az automatikus lejátszást és adj lehetőséget a feliratok kikapcsolására, illetve a szöveg méretének, színének és betűtípusának módosítására is.
Összegzés
Talán úgy gondolod, hogy a weboldalad akadálymentesítése huszadrangú dolog napjainkban. De mit is csinálnak a növekvő vállalatok, vállalkozások ebben a mostani gazdasági helyzetben?
Csak néhányat említenék.
Konverziót optimalizálnak – ha több látogatót érsz el, akkor több értékesítést generálhatsz. Jó példa erre a Legion márka, amely idén 2022-ben 40% körül fog növekedni, főként a konverziós arány optimalizálása miatt.
Figyelnek a SEO-ra – a SEO egy hosszú távú játék, de hatalmas ROI-t biztosíthat. Az idén nőtt cégek nagy többsége inkább növelte a költségvetését a SEO szempontjából, nem csökkentette.
Gondozzák az E- mail marketinget – gyűjtik az e-maileket, listákat szegmentálnak és különböző kampányokat terveznek. Az idén növekedő cégek 77%-a megduplázta az e-mail marketinget és finomította kampányait.
Mi szükséges a fentiekhez?
Forgalom és valamilyen weboldal, vagy érkezőoldal.
Hiába tervezel meg egy szuper kampányt, szuper tartalmakkal, ha azt szétrollkodod a felülettel, amire felhelyezed, ha olvashatóságukat akadályozod vagy ha elrejted azt a figyelem elől.
Nem huszadrangú kérdés, hogy a te weboldalad mennyire felhasználóbarát.
Nem elég az online marketingben csak arra figyelni, hogy az oldalra minél nagyobb forgalom érkezzen. Ennél sokkal fontosabb az, hogy az oldaladon, hogy „érzik” magukat a látogatók.
Milyen könnyen igazodnak el a tartalmaid között, mennyire egyszerűen tudják felvenni veled a kapcsolatot és milyen gyorsan kapják meg a szükséges információt a döntéseikhez.
Vagy végigfutják-e a landing page-edet és megtörténik-e a konverzió.
Weboldalad kialakításának megváltoztatását tervezed? Ha igen, várj a tervmódosítással, amíg meg nem győződsz arról, hogy a terv követi a fent említett irányelveket, mivel ez hatással lehet a tervezésre.
Vedd fel velünk a kapcsolatot, segítünk a kivitelezésben.
