C27: A dokumentum objektum modell (DOM) egyeztetése a vizuális sorrenddel
Alkalmazás
A HTML-el és XHTML-el alkalmazott CSS.
Ez a technika az alábbiakra vonatkozik:
Leírás
A technika alkalmazása azt biztosítja, hogy a tartalom rendszere mind a forrás kódban mind pedig a vizuális megjelenítés során ugyanolyan marad. A tartalmi rendet a forráskódban, a CSS-el megvalósított vizuális prezentációk segítségével, a szerkesztő tudja megváltoztatni. A rendszer önmagában is hordozhat bizonyos jelentést, de ez zavart okozhat a segítő technológiát alkalmazó felhasználó számára. Ezt okozhatja maga a felhasználóis, abban az esetben, ha kikapcsolja a szerkesztő által meghatározott megjelenítést, ha közvetlenül a forráskódból fér hozzá a tartalomhoz (például egy képernyőolvasóval), illetve ha a billentyűzettel navigál a tartalomban. Egy vak felhasználó - akinek a képernyőolvasója a forráskód rendjét követi - és egy látó felhasználó - aki a lap vizuális rendjét érzékeli - együttműködésében zavart okozhatnak a különböző olvasási rendet követő információk. A képernyőnagyítót és képernyőolvasót alkalmazó gyengén látó felhasználót megzavarhatja az, hogy ha az olvasási sorrend látszólag körbeugrik a képernyőn. A forráskód és a vizuális rend eltérése pedig a billentyűzetet használóknak okozhat gondot a fókusz következő megjelenésének a megítélésében.
Előfordulhatnak olyan szituációk, amikor a vizuális rend szükséges a lap teljes értelmezéséhez. Eltérő forráskód rend esetén azonban ez meglehetősen nehézzé válhat.
Abban az esetben, ha a forráskód rendje megegyezik a vizuális renddel, mindenki ugyanúgy (helyesen) fogja értelmezni és használni a rendet.
Megjegyzés: A HTML kódban
szereplő tabindex attribútumnak két
funkciója van. Az egyik fókuszálhatóvá teszi az adott
elemet, míg a másik pozícionálja az elemet a fókusz
rendjében. A 0 értékkel rendelkező
tabindex az elem fókuszálását teszi
lehetővé, de forrás elemek rendjében hozzárendeli a
fókuszálási rendhez is. A fókuszálási rend a
tabindex pozitív értékeinek növekvő
sorrendjét követi. A tabindex értékének
olyan jellegű beállítása, amely különbözik a dokumentum
objektum modellben (DOM) szereplő elemek rendjétől, azt
jelentheti, hogy a rend nem megfelelő a segítő
technológiát alkalmazó felhasználók részére. Ennek
elsősorban az az oka, hogy a tabindex
tulajdonság a HTML-ben és XHTML-ben kerül
meghatározásra és nem a CSS-ben. Ez a jövőbeni
specifikációkban megváltozhat, és különbözhet a
vizuális megjelenítési rendtől is.
Példák
-
Egy online újság honlapján a navigációs eszköz vizuálisan a lap bal felső sarkában, közvetlenül a logo alá kerül elhelyezésre. A forráskódban a navigációs elem a logo kódját követően jelenik meg.
Források
A források csak információs célokat szolgálnak, és csak angolul elérhetőek.
-
Microsoft Internet Explorer Developer Toolbar. A szkripttel generált DOM vizsgálata a Microsoft Internet Explorerben.
-
Firebug. A szkripttel generált DOM vizsgálata a Firefoxban.
Kapcsolódó technikák
Ellenőrzések
Folyamat
-
Vizsgálja meg a weblap tartalmát úgy, ahogyan az a felhasználó felé megjelenítésre kerül.
-
Vizsgálja meg a DOM elemeit az erre alkalmas eszközzel.
-
Bizonyosodjon meg arról, hogy a tartalom rendje mind a forrás kódban mind a vizuális megjelenítés során ugyanaz. (Pl. egy angol nyelvű lap esetén a rend felülről lefelé és balról jobbra halad.)
Elvárható eredmények
-
A 3. pont igaz.