Understanding WCAG 2.0

Skip to Content (Press Enter)

F24: Az 1.4.3, 1.4.6, és 1.4.8 teljesítési feltételekhez tartozó hiba, amelyet a háttérszínek hiányában meghatározott előtérszínek (vagy fordítva) okoznak

Alkalmazás

Minden olyan technológia, amely személyes stíluslapok vagy más lehetőségek segítségével lehetővé teszik a felhasználói programnak a háttér-és előtérszínek beállítását.

Ez a hiba az alábbiakra vonatkozik:

Leírás

A látássérült, illetve értelmi, nyelvi vagy tanulási nehézségekkel küzdő felhasználók gyakran előnybe részesítik a specifikus elő-és háttérszín kombinációkat. Bizonyos esetekben a gyengén látó felhasználók könnyebben boldogulnak a fekete háttéren megjelenő fehér szövegekkel és ennek megfelelően állítják be a böngészőjük kontrasztját. Számos felhasználói program lehetővé teszi az elő-és háttérszínek megváltoztatását anélkül, hogy a többi szerkesztő által meghatározott stílus felülírásra kerülne. Ez lehetővé teszi a felhasználóknak azt, hogy a szerkesztő által nem meghatározott színű lapokat a nekik legmegfelelőbb színkombinációban tekinthessék meg.

Amennyiben a szerkesztő nem határozza meg egyértelműen az elő-és háttérszíneket, a továbbiakban nem tudja azt garantálni, hogy a felhasználó a neki megfelelő kontrasztban fogja látni a tartalmat. Ebben az esetben előfordulhat, hogy a szerkesztő által szürke szövegszínnel megadott tartalom felülbírálja a felhasználói program beállításait és a szerkesztő által meghatározott szürke színű szöveg a felhasználó által beállított világosszürke háttéren fog megjelenni. Ez az alapelv fordítva is működik. Ha a szerkesztő fehér hátteret állít be és ez hasonló a felhasználó által a saját felhasználói programában beállított szövegszínhez, akkor a lap használhatatlanná válik. Mivel a szerkesztő nem tudja megjósolni a felhasználó felhasználói programának beállításait, ezért szövegszín meghatározása esetén tanácsos egy olyan háttérszínt is beállítani, ami biztosítja a megfelelő kontrasztot.

Az elő-és háttérszíneket nem feltétlenül szükséges ugyanazon CSS szabály alatt meghatározni. Mivel a CSS színbeállítások öröklődnek az előd elemektől ezért az elő-és háttérszínek közvetlenül, vagy az adott elem színének továbbörökítésével is megadhatók.

Megjegyzés: A legjobb megoldás az, ha a szöveg minden lehetséges állapota szerkesztésre kerül. Ilyen lehet például a szöveg, hivatkozás szövege, meglátogatott hivatkozás szövege, az egér vagy billentyűzet fókuszával kijelölt hivatkozás szövege, stb.

Példák

1. hiba példa: A háttérszín meghatározása a HTML bgcolor tulajdonságával.

Az alábbi példában a háttérszín a body elemben kerül meghatározásra, míg az előtérszín nem kerül definiálásra. Emiatt a példa nem felel meg a teljesítési feltétel követelményeinek.

Példa kód:

   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
      <html>
          <head>
              <title>A study of population dynamics</title>
          </head>
          <body bgcolor="white">
              <p> ... document body...</p>
          </body>
  </html>
2. hiba példa: Előtérszín meghatározása csak a HTML színek segítségével.

Az alábbi példában az előtérszín a body elemben kerül meghatározásra, míg a háttérszín nem kerül definiálásra. Emiatt a példa nem felel meg a teljesítési feltétel követelményeinek.

Példa kód:


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>A study of population dynamics</title>
</head>
<body color="white">
  <p>... document body...</p>
</body>
</html>
3. hiba példa: Csak háttérszín megadása CSS segítségével.

Az alábbi példában a háttérszín a CSS stíluslapon kerül meghatározásra, míg az előtérszín nem kerül definiálásra. Emiatt a példa nem felel meg a teljesítési feltétel követelményeinek.

Példa kód:


  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>Setting the canvas background</title>
    <style type="text/css">
       body {background-color:white}
    </style>
  </head>
  <body>
    <p>My background is white.</p>
  </body>
</html>
4. hiba példa : Csak előtérszín megadása CSS segítségével.

Az alábbi példában az előtérszín a CSS stíluslapon kerül meghatározásra, míg a háttérszín nem kerül definiálásra. Emiatt a példa nem felel meg a teljesítési feltétel követelményeinek.

Példa kód:


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>Setting the canvas background</title>
    <style type="text/css">
       body {color:white}
    </style>
  </head>
  <body>
    <p>My foreground is white.</p>
  </body>
</html>
5. hiba példa: Hivatkozás szöveg előtérszínének meghatározása CSS-el.

Az alábbi példában a a hivatkozás szövege (előtér) a body elemben kerül meghatározásra, míg a háttérszín nem kerül definiálásra. Emiatt a példa nem felel meg a teljesítési feltétel követelményeinek.

Példa kód:


  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>A study of population dynamics</TITLE>
 <style type="text/css">
  a:link { color: red }
  a:visited { color: maroon }
  a:active { color: fuchsia }
 </style>
</head>
<body>
  <p>... document body... <a href="foo.htm">Foo</a></p>
</body>
</html>

Források

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

Ellenőrzések

Folyamat

  1. Ellenőrizze a weboldal kódját.

  2. Ellenőrizze, hogy az előtérszínt a szerkesztő határozta-e meg.

  3. Ellenőrizze, hogy a háttérszínt a szerkesztő határozta-e meg.

1. megjegyzés: A színek és a háttérszínek a megelőző szelektorok bármelyik szintjén beállíthatók, illetve a külső stíluslapok vagy öröklődési szabályokon keresztül is meghatározhatók.

2. megjegyzés: A háttérszín a CSS "háttérkép" vagy a CSS "háttér" tulajdonságokkal is beállíthatók (a kép URI-jával, pl. 'background: url("images/bg.gif")'). A háttérszíneket a háttérképek alkalmazása esetén is ajánlatos beállítani, mivel a felhasználók letilthatják a képek megjelenítését a böngészőjükben. A háttérkép és a háttérszín azonban ellenőrzésre szorul.

Elvárható eredmények

Amennyiben a 2. pont, VAGY a 3. pont igaz, de a 2. pont hamis, akkor a hiba bekövetkezik és a tartalom nem felel meg a teljesítési feltétel követelményeinek.

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.