H4: Logikus táblázati rend kialakítása hivatkozások, űrlapvezérlők és objektumok segítségével
Alkalmazás
HTML és XHTML
Ez a technika az alábbiakra vonatkozik:
Leírás
Ennek a technikának a lényege egy logikus táblázati rendszer kialakítása abban az esetben, ha az alapértelmezett táblázat nem megfelelő. Általában a G59: Placing the interactive elements in an order that follows sequences and relationships within the content megfelelő és nincs szükség ennek a technikának az alkalmazására. Az alkalmazási hibák kimutatása rendkívül könnyű, ha a táblázati rend egyértelműen kerül kialakításra
Bizonyos esetekben a szerkesztő úgy kívánja meghatározni a táblázati rendet, hogy az a tartalmi összefüggéseket kövesse és ne a kódban található interaktív elemekét. Ezekben az esetekben, az interakítv elemek tabindex attribútumának használatával, egy alternatív elrendezés is meghatározható. A tabindex értéke 0 és 32767 között változik.
Amikor az interaktív elemek a tabulátor billentyű segítségével kerülnek navigálásra, akkor az elemek a tabindex attribútum növekvő értékének megfelelően kerülnek fókuszba. A magasabb tabindex értékkel rendelkező elemek hamarabb kerülnek fókuszba, mint a tabindex nélküliek vagy 0 értékkel rendelkezők. A 0-nál magasabb tabindex értékkel rendelkező elemek fókuszálása után a további interaktív elemek a weblapon történő megjelenésük rendjének megfelelően kerülnek fókuszálásra.
Példák
1. példa
Egy geneológiai kutató űrlap a házassági adatokat rögzíti. Az űrlapban számos beviteli mező található a menyasszony és a vőlegény részére. Az űrlap adattáblázatának első oszlopában a vőlegény a második oszlopban pedig a mennyasszony adatai szerepelnek. A tartalom rendje sorok szerint került megállapításra, bár a szerkesztő logikusabbnak érzi a oszlopról oszlopra történő navigálást. Ezen a módon először a vőlegény adatai vihetők be a táblázatba, majd a mennyasszonyé. A beviteli mezők tabindex attribútuma az oszlopról oszlopra navigálható táblázati rend meghatározására szolgál.
Példa kód:
<form action="#" method="post">
<table summary="the first column contains the search criteria
of the groom, the second column the search criteria of
of the bride">
<caption>Search for marriage records</caption>
<tr>
<th>Search criteria</th>
<th>Groom</th>
<th>Bride</th>
</tr>
<tr>
<th>First name</th>
<td><input type="text" size="30" value="" name="groomfirst"
title="First name of the groom" tabindex="1"></td>
<td><input type="text" size="30" value="" name="bridefirst"
title="First name of the bride" tabindex="4"></td>
</tr>
<tr>
<th>Last name</th>
<td><input type="text" size="30" value="" name="groomlast"
title="Last name of the groom" tabindex="2"></td>
<td><input type="text" size="30" value="" name="bridelast"
title="Last name of the bride" tabindex="5"></td>
</tr>
<tr>
<th>Place of birth</th>
<td><input type="text" size="30" value="" name="groombirth"
title="Place of birth of the groom" tabindex="3"></td>
<td><input type="text" size="30" value="" name="bridebirth"
title="Place of birth of the bride" tabindex="6"></td>
</tr>
</table>
</form>
2. példa
A weblap jobb felső sarkában egy keresőmező került beillesztésre. A mező tabindexe "1"-es értéket kapott, vagyis a táblázati rendszerben ez az elem került az első helyre, még ha a tartalom rendje szerint nem is ez az elsődleges.
3. példa
A tabindex értékeinek nem kell szekvenciálisnak lenniük és nem kell egy bizonyos értékkel kezdődniük. Az értékeknek egyedieknek sem kell lenniük. Az azonos tabindex értékkel rendelkező elemek a karakterek sorrendjében betöltött helyük szerint kerülnek navigálásra. Ennek megfelelően az alábbi példában a táblázati rend lehet egy, három, kettő, négy.
Példa kód:
<a href="" tabindex="1">one</a>
<a href="" tabindex="2">two</a>
<a href="" tabindex="1">three</a>
<a href="" tabindex="2">four</a>
A tartalom azon részeiben, amelyekben a táblázati rend követi a tartalmi rendet kevesebb hibalehetőség adódhat, ha minden elem ugyanazt a tabindex értéket kapja és nem kerül minden elem részére más és más szám meghatározásra. Így könnyebb újrarendezni az elemeket, új elemeket hozzáadni a tartalomhoz és fenntartani a logikus táblázati rendet.
Példa kód:
<a href="xxx" tabindex = "1">First link in list</a>
<a href="xxx" tabindex = "1">Second link in list</a>
<a href="xxx" tabindex = "1">Link that was added long
after the original list was created</a>
<a href="xxx" tabindex = "1">Third link in list</a>
...
<a href="xxx" tabindex = "1">Twentieth link in list</a>
Források
A források csak információs célokat szolgálnak, és csak angolul elérhetőek.
Kapcsolódó technikák
- G59: Az interaktív elemek olyan sorrendbe állítása, amely követi a tartalom sorrendiségét és kapcsolódó pontjait
- F44: A 2.4.3 teljesítési feltételhez tartozó hiba, amelyet a tabulálási rendet kialakító de a jelentést és muködést megváltoztató tabindex okoz
- F85: A 2.4.3 teljesítési feltételhez tartozó hiba, amelyet a navigációs rendben nem egymással szomszédosan elhelyezkedo párbeszéd ablakok vagy menük és az oket aktiváló vezérlok okoznak
Ellenőrzések
Folyamat
-
Elenőrizze a tabindex használatát.
- Tabindex használata esetén ellenőrizze, hogy a tabindex attribútum által meghatározott táblázati rend megfelelő kapcsolatban van-e a tartalommal.
Elvárható eredmények
-
A 2. számú ellenőrzés igaz.