Techniques for WCAG 2.0

F49: Az 1.3.2 teljesítési feltételhez tartozó hiba, amelyet az értelmetlen linearizált elrendezés célú HTML táblázat okoz

Alkalmazás

HTML és XHTML

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)

A felhasználói programra és a segítő technológia támogatására vonatkozó megjegyzések

A képernyőolvasók korai változatai gyakorlatilag a képernyőről olvasták fel a tartalmat. Ennek során gondot okozhatnak azok az elrendezés célú táblázatok, amelyeknek teljes egészében fel kell olvasni a celláját, mielőtt az olvasó továbblépne a következő cellára. A mai képernyőolvasók inkább a mögöttes kijelöléssel dolgoznak, ami azt jelenti, hogy valóban kiolvassák a teljes cellát, mielőtt továbblépnének a következőre. Az elrendezés célú táblázatok azonban továbbra is véletlen hibákat okozhatnak a tartalom természetes olvasási sorrendjével kapcsolatban.

Leírás

Habár a WCAG 2 nem tiltja az elrendezési célú táblázatok használatát, de a HTML táblázati elemek meghatározott szemantikus jelentésének megőrzése, valamint a megjelenítést a tartalomtól elválasztó kódolási gyakorlatnak történő megfelelés céljából ajánlatosabb a CSS alapú elrendezések használata. Elrendezés célú táblázatok alkalmazása esetén fontos, hogy a linearizált tartalom is megtartsa az értelmét.

Ez a hiba akkor következik be, ha a tartalom megjelenítéssel közvetített sorrendje elvész, mert a tartalom vizuális elhelyezésére szolgáló HTML táblázat nem linearizál megfelelően. A táblázatok két vizuális dimenzióban, vízszintesen és függőlegesen, ábrázolják a tartalmat. A képernyőolvasók azonban a forrásnak megfelelő lineáris rendben jelenítik meg ezt a kétdimenziós tartalmat, vagyis az első sor első cellájától kezdik és az utolsó sor utolsó cellájánál fejezik be. A képernyőolvasók a táblázatot fentről lefelé olvassák és először az adott sorban lévő tartalmat jelenítik meg, mielőtt továbbmennének a következő sorra. A sorok összes cellájának a teljes tartalma felolvasásra kerül, beleértve a cellákba ágyazott táblázatok komplett tartalmát is. Ezt hívják linearizációnak.

Tegyük fel, hogy a weblap szerkezete egy 9 oszlopos és 22 soros táblázatból épül fel. A képernyőolvasók először az 1. oszlop 1. sorának celláját olvassák ki, majd a 2., 3., 4., oszlopokét egészen a 9. oszlopig. Abban az esetben, ha valamelyik cellába beágyazásra került egy másik táblázat, a képernyőolvasó fel fogja azt olvasni, mielőtt továbbhaladna az eredeti (külső) táblázat következő cellája felé. Például, ha a 3. oszlop 6. sorának cellája tartalmaz egy 6 oszlopos és 5 soros táblázatot, akkor ez a táblázat is felolvasásra kerül, mielőtt a program továbblépne az eredeti (külső) táblázat 4. oszlop 6. sorára. Ebből következően a vizuális megjelenítés által közvetített sorrendiség nem lesz érzékelhető, ha egy képernyőolvasó felolvassa a tartalmat.

Példák

1. hiba példa: Egy nem megfelelően linearizált elrendezés célú táblázat

Egy vizuálisan megfelelően pozícionált hirdetés, amelynek a linearizáció következtében megváltozik a jelentése.

Példa kód:


<table>
<tr>
  <td ><img src="logo.gif" alt="XYZ mountaineering"></td>
  <td rowspan="2" valign="bottom">top!</td>
</tr>
<tr>
  <td>XYZ gets you to the</td>
</tr>
</table>

A fenti példa olvasási rendje:

XYZ mountaineering top!
XYZ gets you to the

2. hiba példa: Egy elrendezés célú táblázat, amely linearizálás esetén elválasztja a sorrendiséget

A múzeumi kiállítás weblapjának baloldalán található a hivatkozások hosszú listáját tartalmazó navigációs eszköz. A navigációs eszköztől jobbra a kiállítás egyik képe látható. A képtől jobbra egy bizonyos "plakát" szöveg olvasható, amely a múzeumban az adott műtárgy mellett helyezkedik el a falon. A szöveg alatt egy "Leírás" feliratú címsor található, amely alatt a kép leírása szerepel. A kép, plakát szöveg, Leírás címsor, és a leírás szövege együttesen alkotják a megfelelő sorrendet.

Az elrendezés célú táblázat a lapok elemeinek elhelyezését szolgálja. A baloldali oszlopban szereplő navigációs menü hivatkozásai különböző cellákban helyezkednek el.

Példa kód:


<table>
<tr>
        <td><a href="#">Link 1</a></td>
        <td rowspan="20"><img src="img.png" alt="Museum Picture"></td>
        <td rowspan="6"><img src="placard.png" alt="Placard text"></td> 
</tr> 
<tr>
        <td><a href="#">Link 2</a></td>
</tr>
<tr>
        <td><a href="#">Link 3</a></td>
</tr>
<tr>
        <td><a href="#">Link 4</a></td>
</tr>
<tr>
        <td><a href="#">Link 5</a></td>
</tr>
<tr>
        <td><a href="#">Link 6</a></td>
</tr>
<tr>
        <td><a href="#">Link 7</a></td>
        <td rowspan="2"><h2>Image Heading</h2></td> 
</tr> 
<tr>
        <td><a href="#">Link 8</a></td>
</tr>
<tr>
        <td><a href="#">Link 9</a></td>
        <td rowspan="12">Description of the image</td> 
</tr> 
<tr>
        <td><a href="#">Link 10</a></td>
</tr>
 ...
<tr>
        <td><a href="#">Link 20</a></td>
</tr>
</table>

A fenti példa olvasási sorrendje a következő:

Link 1
Image
Placard Text
Link 2
Link 3
Link 4
Link 5
Link 6
Link 7
Image Heading
Link 8
Link 9
Link 10
...
Link 20

Mivel a navigációs menü hivatkozásait a képet leíró tartalomba illesztette a szerkesztő, a képernyőolvasók nem tudják a vizuális megjelenés sorrendjében felolvasni a tartalmat.

Források

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

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

Ellenőrzések

Folyamat

Linearizálja a tartalmat bármelyik alábbi módszerrel:
- Jelenítse meg a tartalmat a forráskódnak megfelelő rendben.
- Távolítsa el a táblázat kijelölését a tartalom körül.
Ellenőrizze, hogy a lineáris olvasási rend megegyezik-e a megjelenítés által közvetített bármilyen sorrenddel.

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.