Az internet és a web mögötti technológia láthatatlanul működik a mindennapokban – de aki weboldalt épít, annak értenie kell az alapokat. Az Access On podcast 83. epizódjában három szakértő járja körbe a témát: az internet történetétől a szemantikus kódoláson át a tartalomkezelő rendszerekig.

Két dolog, amelyet sokan összekevernek

Az internet és a world wide web nem szinonimák, még ha a köznyelv felváltva használja is őket. Az internet fizikai és logikai infrastruktúra: kábelek, optikai szálak, routerek, szerverek és műholdak globális hálózata, amelyen keresztül az adatok egyik pontból a másikba jutnak. A web erre az infrastruktúrára épülő szolgáltatás – böngészőkkel elérhető, egymással összekapcsolt oldalak és médiatartalmak gyűjteménye.

Ron Miller, a podcast egyik előadója szerint ezt az alapvető különbséget érdemes szem előtt tartani: a web csupán egy az interneten futó sok szolgáltatás közül. Az e-mail, a fájlátvitel vagy az online játékok szintén az internetet használják, de nem a weben működnek. Az összefüggés jól szemlélhető egy egyszerű hasonlattal: az internet az úthálózat, a web a rajta működő postaszolgálat – az utak nélkül nem jutnak el a csomagok, de a postaszolgálat csupán az egyik dolog, ami az utakat használja.

Rövid technológiatörténet – az ARPANET-től a böngészőig

Az internet gyökerei az 1960-as évek végére nyúlnak vissza. Az ARPANET-et (Advanced Research Projects Agency Network) az amerikai Védelmi Minisztérium finanszírozta azzal a céllal, hogy decentralizált kommunikációs hálózatot hozzon létre. 1969 októberében küldték el az első üzenetet két gép között – az egyik az UCLA-n, a másik a Stanford Research Institute-ban (SRI) működött. A kísérlet csak részben sikerült: a „login” szóból csupán a „LO” betűk érkeztek meg, mielőtt a rendszer összeomlott. 1969 decemberéig négy számítógép csatlakozott a hálózathoz.

A döntő váltás 1983. január 1-jén következett be, amikor az ARPANET áttért a TCP/IP (Transmission Control Protocol / Internet Protocol) protokollra. Ez tette lehetővé, hogy korábban egymástól elszigetelt hálózatok összekapcsolódjanak – ezért szokás ezt a dátumot a modern internet születésnapjaként emlegetni.

A web ennél jóval fiatalabb. 1989-ben Tim Berners-Lee, a genfi CERN számítógéptudósa dolgozta ki a world wide web koncepcióját. 1990-re elkészítette az első webböngészőt és webszervert, és lefektette a web három alaptechnológiájának alapjait: a HTML-t (HyperText Markup Language) a tartalom strukturálására, a HTTP-t (HyperText Transfer Protocol) az adatátvitelre, és az URL-eket (Uniform Resource Locator) a weboldalak azonosítására. 1991-ben jelent meg az első nyilvánosan elérhető weboldal – saját magáról a webről szólt. 1993-ban a webtechnológiákat nyílt forrásúvá tették, megnyitva az utat a gyors és széles körű elterjedés előtt.

Hogyan jutnak el az adatok A-ból B-be?

Az internet két rétegen működik egyszerre. Az egyik a fizikai hardver: routerek, kapcsolók, modemek, optikai kábelek és cellatornyok. A routerek feladata az adatcsomagok irányítása – folyamatosan döntik el, melyik útvonalon jut el leggyorsabban az adat a célponthoz. A szerverek tárolják a weboldalakat és az adatokat, a kliensek – számítógépek, okostelefonok – pedig lekérik és megjelenítik azokat.

A másik réteg a protokolloké: szabályok összessége, amelyek alapján a gépek kommunikálnak egymással. A TCP/IP az alap, amelyre minden más épül. A HTTP a weboldalak letöltésének szabványát adja meg, az SMTP (Simple Mail Transfer Protocol) az e-mailekét. Az adatok kis csomagokra bontva, akár különböző útvonalon haladnak a célba, ahol a fogadó gép milliszekundumokon belül összerakja őket.

A HTML mint tartalomváz

A HTML jelölőnyelv (markup language) – nem programozási nyelv. Nem utasítja a számítógépet cselekvésre, hanem megjelöli a tartalom egyes elemeinek típusát: ez egy fejléc, ez egy bekezdés, ez egy lista, ez egy hivatkozás. A böngésző és a képernyőolvasó egyaránt a HTML-struktúra alapján értelmezi az oldalt.

A HTML szimmetrikus logikán működik: minden elemet nyitó és záró tag határol. Például egy főcímet így jelöl:

. Ha a záró tag hiányzik, a böngésző nem tudja, hol ér véget az elem – ez vizuális és akadálymentességi hibákat is okozhat. Ha például egy fejléc-elem nincs lezárva, a képernyőolvasó az utána következő teljes tartalmat fejlécként olvassa fel, ami komolyan megzavarja a navigációt.

Charles Heiser, a podcast másik előadója a szemantikus HTML fogalmát helyezi a középpontba. A szemantikus HTML olyan elemeket használ, amelyek neve önmagában hordozza a szerepét: a heading fejlécet, a list listát, a button gombot jelent. Ezzel szemben a div vagy span elemek önálló jelentés nélküli konténerek – pusztán vizuális csoportosításra valók, a képernyőolvasó számára láthatatlanok.

Fejlécek, listák, régiók – és miért nem mindegy a sorrend

A fejléc-hierarchia az egyik leggyakrabban elrontott terület. A H1-től H6-ig terjedő szintek a tartalom szerkezeti mélységét jelzik: H1 az egész oldalt leíró főcím (egy oldalon általában egy van belőle), H2 a fő tartalmi szakaszokat, H3 azok alszakaszait jelöli és így tovább. A fejléceket nem a vizuális megjelenés – betűméret, vastagság – alapján kell megválasztani, hanem a tartalom logikai hierarchiája szerint. Aki képernyőolvasót használ, a fejlécek segítségével tekinti át az oldal szerkezetét és ugrik a kívánt részre. Ha a fejlécszintek felcseréltek vagy véletlenszerűek, az oldal navigálhatatlanná válik.

A listák szintén fontos szemantikai eszközök. Az ul (unordered list) rendezetlen felsorolást jelöl – például tematikusan összetartozó pontokat. Az ol (ordered list) sorszámozott lista, amelyet folyamatok, lépések megjelenítéséhez érdemes használni. A ritkábban alkalmazott dl (description list) definíciókhoz vagy fogalom-magyarázat párokhoz való.

Az oldalszerkezet szempontjából a régiók is lényegesek: a header az oldal fejlécét (logó, navigáció), a main az oldalanként változó fő tartalmat, a footer a lábléc-területet (elérhetőség, szerzői jog), a nav a navigációs menüt jelöli. Ezek a struktúraelemek lehetővé teszik, hogy a képernyőolvasó-felhasználó egyetlen gyorsbillentyűvel a fő tartalomra ugorjon, kihagyva a minden oldalon ismétlődő menüt.

WCAG: az akadálymentesség mérhető mércéje

A WCAG 2.2 (Web Content Accessibility Guidelines, azaz webes tartalom akadálymentességi irányelvek) egy nemzetközi szabványrendszer, amelyet sok ország jogi előírásként is alkalmaz. A 2.2-es verzió 13 irányelvet és 86 kritériumot tartalmaz; az AA megfelelési szinthez 56 kritériumnak kell teljesülnie.

Az irányelvek a szemantikus struktúrán túl a vizuális megjelenésre is kiterjednek. Szöveges tartalmoknál például a WCAG előírja, hogy a szöveg és a háttér kontrasztaránya normál betűméretnél legalább 4,5:1 legyen – nagyobb betűméretnél (körülbelül 18 ponttól, vagy 14 pont félkövérnél) elegendő a 3:1 arány. A CSS (Cascading Style Sheets, lépcsőzetes stíluslapok) segítségével a vizuális megjelenés módosítható anélkül, hogy a HTML-struktúrát érinteni kellene – fontos azonban, hogy a CSS-változtatások ne rontsák el az akadálymentességet.

A képeknek alt texttel (alternatív szöveggel) kell rendelkezniük, amelyet a képernyőolvasó felolvas. Ha egy kép pusztán dekoratív, el kell rejteni az akadálymentességi fából, hogy a képernyőolvasó ne olvassa fel feleslegesen. A hivatkozások szövegezésére is vonatkozik előírás: a „kattints ide” típusú linkek helyett leíró szöveget kell alkalmazni – például „Regisztrálj az Access On szemináriumra” –, amelyből kontextus nélkül is egyértelmű, hova vezet a link. A képernyőolvasók – mint az NVDA, a JAWS vagy a beépített Narrator – általában fel tudják listázni az oldal összes hivatkozását; ha ezek mindegyike „kattints ide”-t mond, a felhasználó nem tudja eldönteni, melyiket aktiválja.

Tartalomkezelő rendszerek: kényelem és korlátok

Kennedy Zimnik, a podcast harmadik előadója a CMS-ek (Content Management System, tartalomkezelő rendszer) témáját vezeti be. A CMS olyan keretrendszer, amellyel weboldalak tartalmát – cikkeket, képeket, oldalakat – lehet létrehozni, szerkeszteni és közzétenni anélkül, hogy minden egyes oldalt kézzel kellene kódolni. Az adminisztrációs felületen (dashboardon) navigálva kezelhetők a tartalmak, sablonok és bővítmények.

A vak weblapkészítőt kettős akadálymentességi szempont foglalkoztatja egyszerre. Az egyik: a CMS saját felülete hozzáférhető-e számára – tud-e navigálni a dashboardon, létrehozni és szerkeszteni oldalakat, fejléceket kezelni, majd ellenőrizni a végeredményt? A másik: az általa publikált weboldal valóban akadálymentes-e a látogatók számára? Előfordul, hogy egy CMS a szerkesztő számára jól használható, de az általa generált front-end oldalak nehezen navigálhatók – vagy fordítva.

A legelterjedtebb platformok közé tartozik a WordPress, a Drupal, a Wix, a Squarespace és a Shopify. A WordPress rugalmas és nagy közösséggel rendelkezik, de akadálymentessége nagymértékben függ az alkalmazott témától és bővítményektől. A Drupal összetettebb, meredekebb tanulási görbével; inkább nagy szervezetek – egyetemek, kormányzati intézmények – alkalmazzák. Alapszintű akadálymentessége erős, de itt is a téma és a modulok döntik el a végeredményt. A Wix és a Squarespace egyszerűbb, csomagolt megoldást kínál, de vizuálisan orientált drag-and-drop szerkesztőjük képernyőolvasóval nehezen vagy egyáltalán nem kezelhető.

Fontos megérteni, hogy a CMS nem helyettesíti a tudást: a rendszer automatizálhat sok lépést, de nem dönti el helyettünk, mikor kell lista, mi a helyes fejlécszint, vagy mi legyen az alt text tartalma. Egy Shopify-alapú webáruháznál a termékoldalak, a bevásárlókosár és a fizetési folyamat akadálymentessége mind külön figyelmet igényel.

Vak weblapkészítők számára Zimnik néhány stratégiát javasol. Az egyik a tartalom és megjelenés szétválasztása: jól strukturált tartalmat kell írni, a vizuális kinézetet a sablon intézi. Ismétlődő sablonokat érdemes kialakítani – például egy eseménynek legyen egységes felépítése: cím, időpont, helyszín, rövid leírás. A közzétett oldalt képernyőolvasóval is tesztelni kell; az automatikus akadálymentességi ellenőrzőket kézi teszteléssel kell kiegészíteni, mert az előbbi nem tudja megítélni, hogy egy alt text valóban leírja-e a kép tartalmát. Vizuális polírhoz érdemes látó személyt bevonni, képleíráshoz pedig AI-eszközöket – például Geminit vagy ChatGPT-t – is fel lehet használni.

Összegzés

A weboldalépítés egymásra épülő rétegekről szól: az infrastruktúrától a protokollokon, a HTML-struktúrán és a CSS-megjelenítésen át a tartalomkezelő rendszerekig. Az akadálymentesség – legyen szó képernyőolvasó-kompatibilitásról vagy vizuális kontrasztviszonyokról – nem utólagos finomítás, hanem a tervezés része. Aki ezeket az összefüggéseket érti, megalapozottabb döntéseket hoz mind a kódolás, mind a tartalomszerkesztés szintjén.

A cikk az Access On podcast 83. epizódja alapján, AI felhasználásával készült, ezért apróbb pontatlanságokat tartalmazhat.