Understanding WCAG 2.0

Skip to Content (Press Enter)

F3: Az 1.1.1 teljesítési feltételhez tartozó hiba, amelyet a CSS segítségével beillesztett fontos információt közvetítő kép okoz

Alkalmazás

Az összes CSS-t támogató technológia.

Ez a hiba az alábbiakra vonatkozik:

Leírás

A CSS háttérkép tulajdonsága lehetővé teszi azt, hogy egy kép a HTML kód teljes kihagyásával beilleszthető legyen a tartalomba. A CSS háttérkép tulajdonság csak dekoratív célokat szolgál és ezekhez a CSS-en keresztül nem társítható szövegalternatíva. A szövegalternatívák azoknak a felhasználóknak jelentenek fontos segítséget, akik nem láthatják a képek által közvetített fontos információt. Ennélfogva a fontos információkat közvetítő képek beillesztése szempontjából ennek a tulajdonságnak a használata hibát jelent.

Megjegyzés: A háttérképbe ágyazott információk azoknak a felhasználóknak is gondot jelenthetnek, akik az olvashatóság érdekében alternatív hátteret használnak, illetve azoknak is, akik bizonyos operációs rendszerek nagy kontrasztú üzemmódját alkalmazzák. Ezek a felhasználók a szövegalternatíva hiányában elesnek a háttérképbe ágyazott információtól.

Példák

1. hiba példa:

Az alábbi példában szereplő tartalom egy része csak egy CSS-el megjelenített képben szerepel. A 180 x 200 pixel méretű TopRate.png a "19.3% APR Typical Variable" szöveget tartalmazza.

Példa kód:

 The CSS contains: 
p#bestinterest {
  padding-left: 200px;
  background: transparent url(/images/TopRate.png) no-repeat top left;
}

Ez került alkalmazásra az alábbi kódrészletben is:

Példa kód:

 
<p id="bestinterest">
  Where else would you find a better interest rate?
</p>
1. hiba példa:

Egy könyvkereskedő a könyvlista mellett álló háttérképekkel tünteti fel, hogy a könyvek újak, korlátozott számúak, illetve megtalálhatók-e a készletben, avagy nem.

A CSS tartalma:

Példa kód:


ul#booklist li {
  padding-left: 20px;
}
ul#booklist li.new {
  background: transparent url(new.png) no-repeat top left; 
}
                            
ul#booklist li.limited {
  background: transparent url(limited.png) no-repeat top left; 
}
                            
ul#booklist li.instock {
  background: transparent url(instock.png) no-repeat top left; 
}
ul#booklist li.outstock {
  background: transparent url(outstock.png) no-repeat top left; 
}

Ez került alkalmazásra az alábbi kódrészletben is:

Példa kód:


<ul id="booklist">
  <li class="new">Some book</li>
  <li class="instock">Some other book</li>
  <li class="limited">A book we desperately want to get rid of</li>
  ...
  <li class="outstock">A book you actually want </li>
</ul>

Források

Ehhez a technikához nincsenek elérhető források.

Ellenőrzések

Folyamat

  1. Vizsgálja meg az összes CSS-el hozzáadott képet.

  2. Ellenőrizze, hogy a képek nem közvetítenek fontos információt.

  3. A fontos információt közvetítő képet a segítő technológiák is képesek megjeleníteni, illetve a CSS kép hiányában is hozzáférhetők.

Elvárható eredmények

  • Abban az esetben, ha a 2. és 3. pontok hamisak, akkor a hiba teljesül és a tartalom nem felel meg a teljesítési feltételnek.

Ez a weboldal A Technikák és Gyakori Hibák a Web Akadálymentesítési Útmutató 2.0-hoz része. Ez a dokumentum elérhető egy HTML fájlban is. Nézze meg a A WCAG 2.0 dokumentumait ezen dokumentum és a WCAG 2.0 egyéb dokumentumai között fennálló kapcsolatok áttekintéséhez.

Copyright © 2008 W3C® ( MIT, ERCIM, Keio), Minden jog fenntartva. Alkalmazandók a W3C felelősségi, védjegyoltalmi és dokumentumhasználati előírásai.