Egy táblázat vizuálisan rendezett lehet úgy is, hogy a cellák kapcsolatát a segítő technológia nehezen értelmezi. Ha az olvasó egy számhoz ér, tudnia kell, melyik sorhoz, melyik oszlophoz és milyen mértékegységhez tartozik. Ez különösen fontos mobilon és nagy adattábláknál.
A HTML-táblázat generátor kiindulási szerkezetet adhat, a végeredményt azonban a saját tartalommal kell ellenőrizni. A cikk egy semleges díjtáblán mutatja be a feladatot; az összegek nem valamely szolgáltató valós díjai.
Egy szám önmagában kevés
Legyen két csomagméret és két kézbesítési mód. A kisméretű csomag átvételi pontra 1490 Ft, házhoz 1990 Ft. A nagyméretű csomaghoz 2490 és 2990 Ft tartozik.
| Csomagméret | Átvételi pont, Ft | Házhoz, Ft |
|---|---|---|
| Kicsi | 1490 | 1990 |
| Nagy | 2490 | 2990 |
Az 1990-es cella értelme a „Kicsi” sor és a „Házhoz, Ft” oszlop együttese. A két dimenzió kapcsolata a tartalom része. Ha a fejléceket csak vastag betűs normál cellaként jelölöd, a látvány megmaradhat, a programozott kapcsolat viszont hiányozhat.
Táblázatcím és megfelelő fejlécek
A W3C útmutatója alapján az adattáblázatnak célszerű azonosítható címet adni, a fejléccellákat pedig a megfelelő HTML-szerkezettel összekapcsolni az adatokkal. Egyszerű sor- és oszlopfejléces táblánál a th és a scope jelölés segít kifejezni a viszonyokat.
A példához olyan cím illik, mint „Szemléltető szállítási díjak csomagméret és kézbesítés szerint”. Ez elárulja a tartalom két szempontját és azt is, hogy példaszámok következnek. A „Táblázat 1” önmagában kevés támpontot adna.
A mértékegységet nem szükséges minden számban megismételni, ha az összetartozó oszlop fejlécében egyértelmű. Eltérő pénznemek vagy időegységek viszont külön megjelölést igényelnek.
Mobilos elrendezés
Négy oszlop még elférhet, tizenöt oszlop már könnyen túl széles egy telefonon. A megoldást a feladatból érdemes megválasztani. Lehet vízszintes görgetés, egyszerűbb résztáblákra bontás vagy egy jól megtervezett kártyanézet, amely megőrzi az adat–fejléc kapcsolatokat.
A görgethető régióhoz felismerhető név és billentyűzetes hozzáférés kellhet. A felhasználónak látnia kell, hogy további oszlopok vannak jobbra. A teljes oldal akaratlan széthúzása rosszabb élményt ad, mint a táblázat saját, jól jelzett görgetési területe.
Kártyás átalakításnál az oszlopfejléc ne tűnjön el a szám mellől. A „1990” felirat önmagában kevés, a „Házhoz: 1990 Ft” már értelmezhető. A DOM és a vizuális elrendezés együttes ellenőrzése szükséges.
Üres cella, nulla és nem elérhető érték
Egy üres díjmező jelentheti, hogy nincs adat, nem választható a szolgáltatás vagy még számítás alatt áll. A nulla ezzel szemben valódi szám. A kettőt nem szabad automatikusan felcserélni.
Ha a nagyméretű csomag egy adott módon nem szállítható, írj egyértelmű állapotot, például „Nem választható”. A szín önmagában ne hordozza az információt. A piros háttérhez ugyanúgy szöveges jelentés kell, mint egy zölddel jelzett kedvezményhez.
Egyszerű, megismételhető teszt
Próbáld végig a táblát billentyűzettel, keskeny kijelzőn és nagyított betűmérettel. Válassz ki véletlenszerű adatcellákat, és kérdezd meg: a hozzá tartozó két fejléc és mértékegység egyértelműen megtalálható? Az üres és hosszú szöveges cellákat is teszteld.
Az automatizált ellenőrző találhat hiányzó szerkezeti jelölést, de az adatok érthetőségét nem dönti el teljesen. A generált HTML érvényessége és a használható felhasználói élmény külön vizsgálat marad.
Gyakori kérdések
Jó táblázattal kialakítani az egész oldal elrendezését?
Az itt bemutatott szerkezet összetartozó adatokhoz való. A puszta oldalelrendezést más HTML- és CSS-eszközökkel érdemes megoldani.
Minden táblához szükséges összetett fejléc?
Az egyszerű adathoz egyszerű fejlécrendszer célszerű. Többszintű fejléc csak indokolt tartalmi szerkezetnél segít.
Egy sikeres automatizált teszt elég?
A kézi használati próba és az adatok jelentésének ellenőrzése is szükséges. A technikai megfelelés önmagában nem teljes használhatósági vizsgálat.