Techniques for WCAG 2.0

F1: Az 1.3.2 teljesítési feltételhez tartozó hiba, amelyet a CSS-el pozícionált tartalom miatt megváltozó jelentés okoz

Alkalmazás

Minden CSS-t alkalmazó technológia.

Ez a hiba az alábbiakra vonatkozik:

1.3.2 teljesítési feltétel (Sorrendiség)
- Hogyan teljesül az 1.3.2 (Sorrendiség)
- Az 1.3.2 teljesítési feltétel értelmezése (Sorrendiség)

Leírás

Ez a hiba akkor következik be, amikor a CSS a strukturális kijelölés helyett a tartalom vizuális megjelenésének megváltoztatására kerül felhasználásra, és az átalakított elrendezés megváltoztatja a tartalom jelentését. A CSS2 pozícionáló tulajdonságainak használatával a tartalom a felhasználó képernyőjének bármelyik pontján megjeleníthető. A megjelenés sorrendje azonban különbözhet attól, ami a dokumentum forrásában szerepel. A segítő technológiák azonban, a tartalom helyes sorrendben történő megjelenítésének érdekében, a forráskódra vagy más algoritmikusan meghatározott rendre támaszkodnak. Ennélfogva fontos, hogy amenyiben a CSS az algoritmikusan meghatározott olvasási rendtől eltérő eredményt okoz a tartalom bizonyos sorrendnek megfelelő vizuális pozícionálása során, akkor a szerkesztő ennél a műveletnél ne a CSS-re támaszkodjon.

Példák

1. hiba példa

Az alegyetlenábbi példában a CSS-el hibásan létrehozott oszlopok szerepelnek. Az oszlopokon kívül a böngészőben a szöveg sem a kijelölésnek megfelelően jelenik meg.

Ebben a példában minden egyes pozícionálásra tervezett objektumhoz egy-egy osztály került meghatározásra. A stíluslap alkalmazásakor a szöveg két oszlopban jelenik meg. A "menu1" (Termékek), illetve a "menu2" (Helyszínek) osztály elemei oszlop fejlécként kerülnek meghatározásra. A "Telefonok, számítógépek, és hordozható MP3 lejátszók" a Termékek alatt, míg az "Idaho" és "Wisconsin" nevek a Helyszínek alatt kerülnek besorolásra (a forráskód rendjében az Idaho és Wisconsin máshol jelennek meg).

Mivel a stíluslap alkalmazásakor nem megfelelő struktúrális elemek kerültek felhasználásra, a forráskód rendjéhez igazodva a teljes szöveg egy sorban jelenik meg: "Termékek Helyszínek Telefonok Számítógépek Hordozható MP3 Lejátszók Wisconsin Idaho."

A HTML tartalom:

Példa kód:


<div class="box">      
     <span class="menu1">Products</span>       
     <span class="menu2">Locations</span>       
     <span class="item1">Telephones</span>       
     <span class="item2">Computers</span>       
     <span class="item3">Portable MP3 Players</span>       
     <span class="item5">Wisconsin</span>       
     <span class="item4">Idaho</span>
</div>

Az alábbiakban a fenti tartalom formázása látható:

Példa kód:


.menu1 { 
     position: absolute; 
     top: 3em; 
     left: 0em;     
     margin: 0px; 
     font-family: sans-serif;     
     font-size: 120%; 
     color: red; 
     background-color: white 
}        
.menu2 { 
     position: absolute; 
     top: 3em; 
     left: 10em;     
     margin: 0px; 
     font-family: sans-serif;     
     font-size: 120%; 
     color: red; 
     background-color: white 
}      
.item1 { 
     position: absolute; 
     top: 7em; 
     left: 0em; 
     margin: 0px 
}      
.item2 { 
     position: absolute; 
     top: 8em; 
     left: 0em; 
     margin: 0px 
}      
.item3 { 
     position: absolute; 
     top: 9em; 
     left: 0em; 
     margin: 0px 
}      
.item4 { 
     position: absolute; 
     top: 7em; 
     left: 14em; 
     margin: 0px 
}      
.item5 { 
     position: absolute; 
     top: 8em; left: 14em; 
     margin: 0px 
}      
#box { 
     position: absolute; 
     top: 5em; 
     left: 5em 
}

Ennek a tartalomnak az esetében jobb megoldást jelentenek a táblázathoz vagy definíciós listához hasonló jelentőségteljesebb elemek.

Források

Ehhez a technikához nincsenek elérhető források.

C6: A tartalom pozícionálása a strukturális kijelölés alapján

Ellenőrzések

Folyamat

CSS pozícionálást alkalmazó tartalomhoz:

Távolítsa el a dokumentumhoz tartozó stílus információkat, vagy kapcsolja ki a felhasználói programban a stíluslapok használatát.
Ellenőrizze, hogy a tartalom rendje megfelelő-e és a tartalom jelentése visszaállt.

Elvárható eredmények

Amennyiben a 2. pont hamis, akkor a hiba bekövetkezik és a tartalom nem felel meg a teljesítési feltétel követelményeinek.

Ez a weboldal A Technikák és Gyakori Hibák a Web Akadálymentesítési Útmutató 2.0-hoz része. Ez a dokumentum elérhető egy HTML fájlban is. Nézze meg a A WCAG 2.0 dokumentumait ezen dokumentum és a WCAG 2.0 egyéb dokumentumai között fennálló kapcsolatok áttekintéséhez.