Web akadálymentesítés és SEO

A web mindenki számára egyaránt hozzáférhető kell, hogy legyen és érdemes arra törekedni, hogy ez minél előbb valósággá váljon. A Web Akadálymentesítési Kezdeményezés (WAI) a W3C (World Wide Web Consortium) támogatásával indult, fő tevékenységi köre a világháló egyszerűbb elérhetőségének biztosítása. Célja, hogy a webes technológiák támogassák az akadálymentes hozzáférést minden felhasználó számára. Útmutatókat készít a netes tartalmakra, a böngészőkre, a médialejátszókra és a hitelesítési eszközökre vonatkozóan, koordinálja a web jövőbeli akadálymentesítését érintő kutatásokat és fejlesztési törekvéseket.

A W3C Web Akadálymentesítési Útmutató 2.0 (Web Content Accessibility Guidelines - WCAG 2.0) széleskörű ajánlásokat foglal magába a webtartalom minél könnyebb eléréséhez. Az irányelvek követésével a tartalom széles körben lesz elérhető a fogyatékkal élők számára, valamint a webhely használhatóbbá válik minden látogató számára.

Az akadálymentes webhely 4 irányelve

Észlelhetőség

A webhely tartalma legyen mindenki számára egyaránt észlelhető, hogy a felhasználók minden csoportjához eljuthasson.

Működtethetőség

A webhely legyen mindenki számára jól használható, kezelhető. A működtethetőség legyen mindenki számára elérhető.

Érthetőség

A webhelyen a tartalom legyen mindenki számára érthető. A felhasználók könnyen, gyorsan és egyszerűen legyenek képesek eligazodni az oldalon.

Robosztusság

A webhely legyen kompatibilis más programokkal, legyen elérhető különböző platformokon. Úgy kell kialakítani az oldal kódját, hogy a segítő technológiát alkalmazó szoftverekkel (pl. képernyőolvasókkal) képes legyen zökkenőmentesen együttműködni.

Milyen felhasználók számára segítség az akadálymentesített webhely?

Alapvető igény, hogy a web hozzáférhető legyen úgy, hogy azonos szintű elérést és lehetőséget biztosítson a hátrányos helyzetű emberek számára:

• Nem látó vagy rosszul látó felhasználók (vakok, gyengén-látók, színvakok, színtévesztők, fényre érzékenyek)
• Siket vagy hallássérült felhasználók
• Mozgássérült és mozgásukban korlátozott, testi fogyatékos felhasználók
• Beszédhibával rendelkező vagy tanulási nehézségekkel küzdő, illetve értelmileg visszamaradott felhasználók

Bár világszinten 650 millió és Magyarországon kb. 600 ezer fogyatékos személy él, mégsem csak kizárólag számukra segítség egy akadálymentesített webhely:

• Időskorú felhasználók (akik számára nehézség átlátni és kezelni a nem egyértelmű felületeket)
• Okostelefont, tabletet, kisméretű kijelzővel rendelkező mobil eszközt használó felhasználók
• Régi típusú, elavult, vagy gyengén felszerelt számítógépen keresztül böngésző felhasználók
• Kikapcsolt JavaScripttel és letiltott pluginekkel (pl.: Flash, ActiveX) internetező felhasználók

Megoldás a külön akadálymentes verzió?

Az a legoptimálisabb, ha nincs külön akadálymentes és "normál" verzió. Lehetőség szerint csak egy verziója legyen a webhelynek, ami minden felhasználót (és a Google keresőrobotot is) egyformán és akadálymentesen kiszolgálja. A weben akadályok nem csak a fogyatékos személyek számára létezhetnek. Nem beszélve a negatív (hátrányosan megkülönböztető) társadalmi üzenetről, amelyet ezek a verziók sugallnak.

Szántai Károly web és UX akadály­mentességi szakértő írása: Nem az akadálymentes verzió a megoldás. Az akadalymentesweb.hu blogon szakértői tippek találhatók az akadálymentes honlap készítéséhez.

Google és az akadálymentesítés

A Web Akadálymentesítési Útmutató 2.0 kidolgozásában - amely azóta ISO szabvánnyá vált - szerkesztőként részt vett Loretta Guarino Reid a Google munkatársa is. A keresőcég arra ösztönzi a tartalom előállítókat és a fejlesztőket, hogy olyan termékeket és alkalmazásokat tervezzenek, amelyek a hozzáférhetőséget is szem előtt tartják. A Google a saját termékei esetében külön ügyel az akadálymentesítésre, pl. az Android oprendszertől kezdve, a Chrome böngészőn és a Gmail levelezőn át, a YouTube-ig.

A web akadálymentesítés és a SEO összefüggő pontjai

A web akadálymentesítés és a keresőoptimalizálás egyaránt a releváns tartalmak elérhetőségét teremti meg a felhasználók számára. Számos párhuzam és átfedés van a Google tervezési, tartalmi és technikai irányelvek és a Web Akadálymentesítési Útmutató pontjai között. A keresőmotorok és a segítő technológiák (mint például a képernyő felolvasók) közötti hasonlóság, hogy egyaránt támaszkodnak az oldal tartalmi felépítésére, struktúrájára, szemantikájára és a funkcionalitásra.

Képhelyettesítő szövegek

• Informatív képhelyettesítő szövegek használata (az alt attribútum kötelezően használandó, tömören tartalmazza a kép leírását és funkcióját, lehetőség szerint maximum 100 karakterben)
• A longdesc és az aria-describedby attribútum használata a képek hosszabb leírására
• A dekorációt szolgáló képek esetében legyen üres az alt szöveg (esetleg CSS background-image használható a kép helyett)
• Szöveg használata a képek helyett, ahol lehetséges

Szemantikus struktúra

• Címsorokhoz megfelelő szemantikus struktúra alkalmazása: <h1> - <h6> címsorok a szöveg vizuális megjelenésének formázása (pl.: betűméret, stílus) helyett, a hierarchia struktúra definiálására legyenek használva
• Szemantikus HTML elemek alkalmazása (Pl.: <p>: bekezdés, <ol>: számozott felsorolás, <ul>: számozatlan lista, <dl>: leíró lista, <blockquote>: idézet, <q>: bekezdésen belüli idézet, <em>: alap hangsúly, <strong>: erős hangsúly)

Átjárhatóság

• Szöveges hivatkozások - informatív, leíró link horgonyszövegek használata ("kattints ide" és "tovább" linkszövegek mellőzése)
• Hasznos linkek elhelyezése a kapcsolódó tartalmakhoz
• Olvasható, rövid és logikus webcímek biztosítása
• Webhelytérkép, amelyről legyenek elérhetők a legfontosabb oldalak

Hozzáférhetőség

• Multimédiás tartalom mellé szöveges alternatíva biztosítása, videókhoz feliratok
• Felesleges JavaScript és Flash mellőzése a szükségtelen helyekről és a navigációból
• Kizárólag egérfüggő interakciók szükségességének elkerülése
• Webes szabványok használata

Tartalom

• Felhasználók számára hasznos és információ-gazdag tartalom, amely szövegként legyen megjelenítve, ne képként
• Tartalom és megjelenés kettéválasztása, stílus(lap)ok elkülönítése a HTML kódtól
• Egyedi, informatív oldalcímek, címsorok és képleíró attribútumok használata
• Egyszerű, átlátható navigáció és oldal struktúra
• Több lehetőség biztosítása a tartalom megtalálásához
• Rövidítések és mozaikszavak meghatározása
• Oldal és tartalom nyelvének azonosítása, karakterkódolás beállítása

HTML5 szemantikus elemek

A HTML5 szabvány tartalmaz több címkét, amely a webhelyeken jellemzően használt oldalstruktúra kialakítására kínál új megoldást. Az általánosan használt, szemantikai jelentés nélküli és gyakran túlzásba vitt mennyiségű <div> helyett, az oldal különböző részeit azonosító elemek alkalmazhatók. Ezen kívül további címkék új funkciók elérését biztosítják, amivel a növelhető a hozzáférhetőség. Ezek jótékony hatással lehetnek az akadálymentesítésre és a keresőoptimalizálásra is egyaránt.

• <nav>: Navigációs elemek: menük, kenyérmorzsa, lapozó (helyettesíti a HTML5 előtti időkben használt role="navigation" WAI-ARIA attribútumot)
• <header>: Oldal vagy szakasz bevezetés: tartalmazhat címsort, logót, navigációt (helyettesíti a HTML5 előtti időkben használt role="banner" WAI-ARIA attribútumot)
• <footer>: Oldal vagy szakasz leírás: a lábléc tartalmazhatja a szerző nevét, másolásvédelmi és jogi infókat (helyettesíti a HTML5 előtti időkben használt role="contentinfo" WAI-ARIA attribútumot)
• <aside>: Fő tartalomhoz érintőlegesen kapcsolódó, elkülöníthető információ, általában oldalsávként látható (helyettesíti a HTML5 előtti időkben használt role="complementary" WAI-ARIA attribútumot)
• <article>: Oldal többi részétől független elem (cikk, blogbejegyzés, hozzászólás, hír)
• <main>: Fő tartalmi rész (helyettesíti a HTML5 előtti időkben használt role="main" WAI-ARIA attribútumot)
• <section>: Szekció vagy részlet (fejezetcímekben, fejlécben, láblécben vagy az oldal bármelyik részén)
• <figure>: Kép, grafika, illusztráció, idézet, forráskód
• <figcaption>: Jelmagyarázat
• <summary> és <details>: Összefoglaló fejléc és lenyitható részletek
• <audio>: Hangfájlok szabványos beágyazása
• <video>: Videók szabványos beágyazása
• <track>: Médiaelemekhez különböző sávok (időzített, szöveges információk, feliratok)
• <time>: Dátum és idő

Az Akadálymentes Gazdag Webes Alkalmazások WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) egy, a W3C által közzétett technikai előírás. Specifikálja hogyan lehet növelni a dinamikus tartalom elérését Ajax, HTML, JavaScript és hasonló technológiákat használva. A tartalom frissítések és felhasználói interfész kontrollok gyakran nem elérhetőek a hátrányos helyzetű felhasználók számára, különösen a képernyő felolvasót használók, illetve az egeret használni nem tudók számára.

Természetesen a web akadálymentesítés nem egyenlő a SEO-val. Korábban nagyon elterjedt nézet volt, hogy "a Google a legnagyobb vak felhasználó", ezt kissé megcáfolva kijelenthető, hogy a Google gyakorlatilag "látja" az oldal felépítését, hiszen a HTML kód mellett feltérképezi a CSS és JS fájlokat is és már régóta lerendereli az egész látható oldalt. A hajtás feletti hirdetések például ronthatják a felhasználói élményt és ez pedig kihatással lehet a Google helyezésekre is. Tévhit, hogy "az akadálymentesítés után minden esetben javulnak a Google helyezések". Ha a webhelyen nincs egyedi, a felhasználók számára hasznos tartalom és hemzseg a technikai SEO hibáktól, akkor az akadálymentesítés sem fog javítani a helyezéseken.

2015. május 21.: a digitális Akadálymentesség Világnapja

Május harmadik csütörtökjén 4. alkalommal rendezik meg a Global Accessibility Awareness Day (Akadálymentesség Világnapja) akciót, melynek célja, hogy felhívja a figyelmet a digitális (web, szoftver, mobil, stb.) akadálymentesség fontosságára.

A szervezők arra buzdítanak minden webfejlesztőt, webdesignert, UX szakembert és érdeklődőt, hogy ezen a napon legalább egy órán keresztül tapasztalják meg saját maguk is első kézből a web akadálymentesség hatását (és esetleges hiányát). Próbálják ki a kizárólag billentyűzettel történő navigációt és az egérhasználat mellőzését, vagy a felolvasóprogrammal böngészést, teszteljék az operációs rendszerük beépített akadálymentesítési funkcióit.

Az akadálymentes digitális kommunikáció nem kiváltság, hanem alapvető emberi jog. A cél az, hogy a webhelyek ne csak a kijelző, hanem az akadályozott felhasználók képességei tekintetében is legyenek reszponzívak.