Szaktanácsadás akadálymentes honlap készítéséhez

Miért üres a Köztársasági Elnöki Hivatal honlapja, ha van rajta valami?

Elöljáróban szeretném hangsúlyozni, hogy a mostani cikkemnek semmi köze a politikához. Megírásában csak és kizárólag a saját szakterületem szempontjai vezéreltek.

A Köztársasági Elnöki Hivatal honlapja a cikkem írásakor - a fennálló politikai helyzet miatt - mindössze egyetlen oldalból áll, amin egy rövid közlemény olvasható. Pontosabban annak olvasható, aki lát. Vak személyeknek olvashatatlan, ugyanis számukra egyszerűen nincs rajta semmi.

A Köztársasági Elnöki Hivatal honlapjának nyitóoldaláról készült képernyőfotó
A Köztársasági Elnöki Hivatal honlapjának nyitóoldala 2012.április 6-án

Ha megkérdeznék egy laikus (és látó) felhasználót, akkor bizonyára azt mondaná, hogy a kérdéses weboldalon egy címert, egy idézetet, egy rövid közleményt, és egy nemzeti trikolórt lát. Valószínűleg meglepődne, ha azt mondanám, hogy márpedig ezen a weboldalon tartalmilag semmilyen szöveges információ sincs! Értsd: egyetlen betűt sem tartalmaz. Ennek alátámasztásául íme az oldal végtelenül egyszerű HTML kódja:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu">
<head>
</head>
<body style="background-color: #b9a976;">
	<div style="width: 1000px; margin: 0 auto 0 auto; text-align: center;">
		<img src="KEH_elolap_01.jpg" alt="" />
	</div>
</body>
</html>
A Köztársasági Elnöki Hivatal honlapjának HTML kódja 2012.április 6-án

Ebből a HTML nyelvhez értők számára világosan látszik, hogy weboldalon tulajdonképpen nincs más, csak egy darab nagy kép. Erre a képre van ráégetve minden dekorációs elem és szöveg. Előbbiek akadálymentességi szempontból viszonylag lényegtelenebbek, de a szöveg hozzáférhetősége annál fontosabb lenne. Márpedig a honlapon látható szövegekhez a vak felhasználók nem férnek hozzá, mivel ezek sima szövegként nincsenek rajta a honlapon.

Annyira üres az oldal, hogy még címe sincs. Egyszerűen nincs benne title jelölőelem. Ennek következtében a weboldalra ellátogató vak felhasználó mindössze ennyi információhoz jut a képernyőolvasó program által: http kettőspont per per keh pont hu üres

Az a „fránya” alt attribútum

Amikor egy új cikk írását tervezem, akkor mindig felmerül bennem a kérdés, hogy vajon érdemes-e a képek alt attribútumáról cikket írnom. Általában meggyőzöm magam, hogy az akadálymentes weboldalak kapcsán talán ez már „lerágott csont”. Azaz minden webfejlesztőnek triviális, hogy a képen látható információ szöveges megfelelőjét az img elem alt attribútumba kell beírni. De aztán mindig van rá bizonyíték, hogy ez mégsem triviális.

Ezen az oldalon ugyan a képhez definiáltak alt attribútumot, de üres értékkel. Ez pedig így azt jelenti a képernyőolvasó program számára, hogy az adott kép pusztán dekorációs célt szolgál. Vagyis nem kell törődni vele. Itt azonban a képen lényeges szöveges információk vannak.

Felmerül, hogy akkor az alt attribútumba egyszerűen csak be kellene írni azokat a szövegeket, amelyek a képen vannak. Valahogy így:

<img src="KEH_elolap_01.jpg" alt="&quot;Magyarország és a nemzet egysége érdekében köztársasági elnöki megbizatásomról lemondok." Schmitt Pál. Az új köztársasági elnök hivatalba lépéséig a köztársasági elnök feladat- és hatásköreit ideiglenesen Kövér László, az Országgyűlés elnöke látja el. Az új köztársasági elnök hivatalba lépéséig a Köztársasági Elnöki Hivatal honlapja nem üzemel." />

Tulajdonképpen már ez is több lenne a semminél. Pusztán egy dolog miatt kérdéses ez a megoldás. Ugyan nincs a WCAG akadálymentesítési szabványban előírás arra nézve, hogy az alt attribútum szövege milyen hosszú legyen, az általános konszenzus alapján azonban 75-100 karakternél hosszabb szöveget nem szoktunk írni. Esetünkben viszont közel 350 karakternyi szövegről lenne szó. Ráadásul az alt attribútum szövege szemantikailag nem tagolható tovább, pedig az idézetet és a közleményt jó lenne élesen megkülönböztetni.

Jelölőelemekkel ellátott szöveg használata jobb megoldás

Véleményem szerint jobb megoldás lenne az, ha a weboldal kódjába szemantikailag megfelelő jelölőelemekkel megjelölve, szövegesen is bekerülne az idézet és a közlemény. Az idézet például az erre a célra kitalált blockquote elem segítségével.

Ezeket a szövegeket azután valamelyik bevett akadálymentes vizuális elrejtési megoldással elrejthetjük. A most használt kép pedig bekerülhetne például a div elem háttérképeként. Például így:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu">
<head>
	<title>Köztársasági Elnöki Hivatal</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<style type="text/css">
		body {
			background-color: #b9a976;
		}
		
		div {
			width: 700px;
			height: 500px;
			margin: 0 auto;
			background: transparent url("KEH_elolap_01.jpg") top left no-repeat;
		}
		
		div * {
			text-indent: -10000px;
		}
	</style>
</head>
<body>
	<div>
		<blockquote>
			<p>Magyarország és a nemzet egysége érdekében köztársasági elnöki megbizatásomról lemondok.</p>
			<p>Schmitt Pál</p>
		</blockquote>
		<p>Az új köztársasági elnök hivatalba lépéséig a köztársasági elnök feladat- és hatásköreit ideiglenesen Kövér László, az Országgyűlés elnöke látja el.</p>
		<p>Az új köztársasági elnök hivatalba lépéséig a Köztársasági Elnöki Hivatal honlapja nem üzemel.</p>
	</div>
</body>
</html>

Ezzel a megoldással látványra teljesen ugyanazt kapnánk, mind az eredeti oldal. Viszont a vak személyek számára akadálymentes lenne.

Természetesen ha alaposabban belemélyednék a dologba, akkor még lehetne finomítani rajta, aminek eredményeképp további lehetséges megoldások is felmerülhetnének. Ha például a Hivatal címerét nem dekorációs elemnek tekintjük, akkor gondoskodni illene arról is, hogy ennek jelenléte is felolvasásra kerüljön.

De felvethetném azt is, hogy a gyengénlátó felhasználók számára az oldal megjelenése - a jelenlegi színvilágából eredően - abszolút nem kontrasztos. Mivel számukra is képként jelenik meg a szöveg, ezért lesznek közülük olyanok, akik hiába használnak saját maguknak bekonfigurált kisegítő technológiát, a kép kontrasztján mégsem tudnak állítani. A szövegként megjelenő szövegek ebből a szempontból ideálisabb megoldást jelentenének.

Konklúzió

Összegzésképpen tényleg csak arra szerettem volna rávilágítani, hogy egy ilyen, webfejlesztési szempontból végtelenül egyszerű honlapnál is milyen könnyen akadályt lehet gördíteni a felhasználók elé. Pedig kis odafigyeléssel, viszonylag egyszerű módon megelőzhető lenne mindez. Csak gondolni kell rá. Főleg egy fontos állami honlapon.