Homepage » Coding » A HTML táblázathoz való hozzáférhetőség javítása a jelölővel
A HTML táblázathoz való hozzáférhetőség javítása a jelölővel
A webes hozzáférhetőség olyan webes alkalmazások tervezésére vonatkozik, amelyek segítségével a látássérültek könnyen használhatják őket. Néhány ilyen felhasználó támaszkodik képernyőolvasók a weblapok tartalmának elolvasásához. A képernyőolvasók értelmezze az oldalon található kódot és olvassa el a tartalmát a felhasználónak.
egy széles körben használt HTML elem, amely strukturált módon megjeleníti az adatokat a weboldalakon. Tervezése egyszerű és összetett helyzetek között változik, sorfejlécekkel, egyesített fejlécekkel stb.
Ha egy táblát nem terveztek hozzáférhetővé, nehéz lesz, hogy a képernyőolvasók az adatokat összetett táblázatokban lefordítsák a felhasználók számára. Ezért, hogy a komplex HTML táblákat könnyebben érthetővé tegyük, a hozzáférhetőség érdekében győződjön meg arról, hogy a fejlécek, az oszlopcsoportok, a sorcsoportok stb. Az alábbiakban látni fogjuk, hogyan van ez elért értéket.
A hatókör attribútum
Még egy egyszerű asztalhoz is
A címkéket, amelyek egyértelműen meghatározzák a fejléceket, a terület attribútum, és nem adnak utat a zavarokhoz, amelyek a hasonló típusú adatokból erednek a sejtekben.
Alkalmazott Neve
Munkavállalói kód
Projekt kód
Munkavállalói jelölés
gipsz Jakab
32456
456789
Rendező
Miriam Luther
78902
456789
Igazgatóhelyettes
Mit tesz a hatókör attribútum? A W3C szerint:
Más szavakkal, segít az adatcellák társításában a megfelelő fejléccellákkal.
Kérjük, vegye figyelembe, hogy a fenti példában válthat
mert
. Mindaddig, amíg az terület értéke van col, a megfelelő oszlop fejlécként értelmezendő.
A terület az attribútum ezen négy érték bármelyikével rendelkezik; col, sor, rowgroup, colgroup az oszlop fejlécére, egy sor fejlécére, az oszlopok fejlécének csoportjára és egy sorcsoport fejlécére.
Komplex táblázatok
Most lépjünk át egy összetettebb asztalra.
A fenti táblázat egy osztályba sorolt diákokat és azok osztályait tartalmazza a gyakorlati és elméleti három témakörben.
Itt van a HTML-kód. A táblázat használt rowspan és colspan egyesített fejlécek létrehozásához az adatcellákhoz.
Tanuló név
Biológia
Kémia
Fizika
Gyakorlati
Elmélet
Gyakorlati
Elmélet
Gyakorlati
Elmélet
gipsz Jakab
A
A+
B
A
A
A-
Miriam Luther
A
A
C
C+
A
A-
A fenti táblázatban minden egyes adatcellát, azaz a táblázatos cellákat a fokozat megjelenítése, három információhoz kapcsolódik:
Melyik hallgató tartozik ehhez a fokozathoz??
Melyik tárgyhoz tartozik ez a besorolás?
Ez a gyakorlat a gyakorlati vagy elméleti szakaszhoz tartozik?
Ezeket a három információt strukturálisan és vizuálisan három fejléccellában határozzák meg:
Tanuló név
Tárgy neve
Gyakorlati vagy elméleti
Határozzuk meg ugyanezt a hozzáférhetőség esetében.
Tanuló név
Biológia
Kémia
Fizika
Gyakorlati
Elmélet
Gyakorlati
Elmélet
Gyakorlati
Elmélet
gipsz Jakab
A
A+
B
A
A
A-
Miriam Luther
A
A
C
C+
A
A-
A fenti jelölésben hozzáadtuk terület olyan cellákhoz, amelyek az adatcellákról információt tartalmaznak.
Oszlopcsoport
A biológia, a kémia és a fizika sejteket két oszlop egy csoportjával (Theory & Practical) kell társítani. Csak hozzá colspan = "2" nem hozza létre az oszlopcsoportokat, csak azt jelzi, hogy az adott cellának két cellás helyet kell foglalnia.
Az oszlopcsoport létrehozásához használnia kell colgroup majd adja hozzá a arasz hozzárendelje, hogy hány oszlopot tartalmaz az oszlopcsoport.
A
Tanuló név
jelölés scope = "col" segít abban, hogy a segítő technológia azonosítsa, hogy az ugyanabban az oszlopban követendő cellák a diákok nevei.
Hasonlóképpen, mint a sejtek
Biológia
tartalmazó scope = "colgroup" segít abban, hogy a felhasználók azonosítsák, hogy az adott oszlopban lévő cellákban lévő adatok az adott témához kapcsolódnak.
Aztán ott van a
gipsz Jakab
jelölés scope = "sorban" amely meghatározza, hogy az ugyanabban a sorban követõ cellák a “fokozat” az adott hallgató nevére vonatkozó információk.
Sorcsoportok
Most költözzünk egy másik példára, ez a példa majdnem ugyanolyan táblázatot tartalmaz, mint a fenti, kivéve, ha a sort és az oszlopfejléceket cseréljük, így soros csoportokkal tudunk dolgozni.
Tantárgy
gipsz Jakab
Miriam Luther
Biológia
Gyakorlati
A
A
Elmélet
A+
A
Kémia
Gyakorlati
B
C
Elmélet
A
C+
Fizika
Gyakorlati
A
A
Elmélet
A-
A-
Most, hogy megvan a minta, hogy együtt dolgozzunk, kezdjünk úgy, hogy olyan sorcsoportokat hozunk létre, mint az előző példány oszlopcsoportjaira.
A sorcsoportok azonban nem hozhatók létre olyan címkével, mint például colgroup mert nincs rowgroup elem.
A HTML sorok általában csoportosítva vannak , és elemekkel. Egyetlen HTML
elem lehet , egy és többszörös . Többször használjuk tbody táblázatunkban a sorcsoportok létrehozásához, és hozzáadjuk a megfelelő területet a fejléc cellákhoz.
Tantárgy
gipsz Jakab
Miriam Luther
Biológia
Gyakorlati
A
A
Elmélet
A+
A
Kémia
Gyakorlati
B
C
Elmélet
A
C+
Fizika
Gyakorlati
A
A
Elmélet
A-
A-
Hozzáadtuk a sorokat “Gyakorlati” és “Elmélet” az összesben tbody sorcsoportok létrehozása két sorral. Mi is hozzáadtuk a scope = "rowgroup" azoknak a celláknak, amelyek tartalmazzák a két sor címinformációját (ami az adott esetben a besorolási fokozathoz tartozó besorolás).
