Understanding WCAG 2.0

Skip to Content (Press Enter)

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

Alkalmazás

Minden CSS-t támogató technológia.

Ez a technika az alábbiakra vonatkozik:

Leírás

A technika azt kívánja bemutatni, hogyan lehet a stíluslapokkal fokozni a vizuális megjelenítés hatásait, illetve azt, hogyan lehet a stíluslapok nélkül is megtartani a kifejező megjelenítést. A CSS2 pozícionáló eszközeinek használatával a tartalom a felhasználó látóterének bármelyik pontjában megjeleníthető. A strukturáló elemek használata biztosítja azt, hogy a tartalom a stílus hiányában is meghatározott maradjon.

Példák

1. példa

Az alábbi példában szereplő tartalomban strukturális megjelölés (definíciós lista) került felhasználásra. A CSS a tartalom oszlopos formátumú stílusának kialakítására került alkalmazásra. Minden egyes osztály tökéletesen oszlopba rendezi a tartalmat, míg a margók értéke "0" lesz. Ez utóbbi művelet a felhasználói programok azon alapértelmezett beállításait bírálja felül, amely a behúzott DD elemekkel kombinált HTML definíciós listák megjelenítését szabályozzák.

Az alábbiakban a megjelenítendő tartalom kerül szemléltetésre:

Példa kód:


 <div class="box">
  <dl>
    <dt class="menu1">Products</dt>
    <dd class="item1">Telephones</dd>
    <dd class="item2">Computers</dd>
    <dd class="item3">Portable MP3 Players</dd>
    <dt class="menu2">Locations</dt>
    <dd class="item4">Idaho</dd>
    <dd class="item5">Wisconsin</dd>
    </dt>
  </dl>
 </div>

Az alábbiakban a fenti elemeket pozícionáló és formázó CSS kód látható:

Példa kód:


 .item1 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 7em;
 }
 .item2 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 8em;
 }
 .item3 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 9em;
 }
 .item4 {
   left: 14em;
   margin: 0;
   position: absolute;
   top: 7em;
 }
 .item5 {
   left: 14em;
   margin: 0;
   position: absolute;
   top: 8em;
 }
 .menu1 {
   background-color: #FFFFFF;
   color: #FF0000;
   font-family: sans-serif;
   font-size: 120%;
   left: 0;
   margin: 0;
   position: absolute;
   top: 3em;
 }
 .menu2 {
   background-color: #FFFFFF;
   color: #FF0000;
   font-family: sans-serif;
   font-size: 120%;
   left: 10em;
   margin: 0;
   position: absolute;
   top: 3em;
 }
 #box {
   left: 5em;
   position: absolute;
   top: 5em;
 }

Stíluslapok alkalmazása esetén az adatok a "Termékek" és "Helyszínek" oszlopokban kerülnek megjelenítésre. Stíluslapok hiányában, a szöveg a struktúrát és olvasási rendet meghatározó definíciós listában jelenik meg.

Források

A források csak információs célokat szolgálnak, és csak angolul elérhetőek.

Ellenőrzések

Folyamat

CSS kód segítségével pozícionált tartalmak esetében

  1. Távolítsa el a dokumentumból a stílusra vonatkozó információkat, vagy kapcsolja ki a felhasználói program stíluslapokat kezelő funkcióit.

  2. Ellenőrizze, hogy a strukturális kapcsolatok és a tartalom jelentése változatlanok maradtak-e.

Elvárható eredmények
  • A 2. pont igaz.


Teljesítési feltételek: