Understanding WCAG 2.0

Skip to Content (Press Enter)

H2: Egymással határos képek és szöveges linkek egyesítése ugyanazon forrás számára

Alkalmazás

Hivatkozásokat tartalmazó H TML és XHTML dokumentumok.

Ez a technika az alábbiakra vonatkozik:

Leírás

A technika célja a dokumentumban előforduló egymással határos szöveges és grafikus hivatkozások okozta szükségtelen duplikációk kiküszöbölése.

Számos hivatkozás szöveges és grafikus formában is előfordulhat közvetlenül egymás mellett. Az észlelhető különbségek megteremtése érdekében a szöveges és grafikus hivatkozásokat gyakran különböző hiperlinkek jelölik. Látszólag ugyanazon hivatkozásról van szó, amelyet azonban sok felhasználó két egymással megegyező hivatkozásként értelmez. Ez meglehetősen zavaró lehet számukra. A zavar elkerülése céljából sok fejlesztő inkább elhagyja a szöveges hivatkozást, ami viszont nem felel meg az 1.1.1 teljesítési feltételnek, mivel a szövegalternatíva nem ugyanazt a célt szolgálja, mint a grafikus hivatkozás. A probléma javasolt megoldása a szöveges és grafikus hivatkozás egy hivatkozásban történő megszerkesztése, illetve a szöveg duplikációjának elkerülése érdekében a grafika szövegalternatívájának elhagyása.

Az oldalkép jobb elrendezése érdekében bizonyos esetekben a szöveges és grafikus hivatkozásokat egymással szomszédos táblázat cellákban helyezik el. Habár a WCAG 2 nem tiltja a táblázatok használatát, a HTML táblázati elemek szemantikus jelentésének megtartása, illetve a képet a tartalomtól elválasztó kódolási technika megfelelősségének biztosítása érdekében a CSS alapú oldalak használata a javasolt. CSS használata esetén ez a technika alkalmazható a hivatkozások kombinálására.

Példák

1. példa

A grafika és a szöveg ugyanabban az elemben található.

Példa kód:

 <a href="products.html">
   <img src="icon.gif" alt="" />
   Products page
 </a>      
2. példa

A hivatkozás grafikát és szöveget is tartalmaz, a honlap súgója pedig a grafikus alakra hivatkozik. A kép szövegalternatívával is rendelkezik, amely a súgóban található hivatkozásnak a neve. Ez utóbbi a weblap ikonra való kattintáskor jelenik meg.

Példa kód:

<a href="foo.htm">
  <img src="house.gif" alt="home page icon"/>
  Go to the home page
</a>     
3. példa (hiba)

Ez a példa a technika hibás alkalmazását mutatja be. A példa szerint egy szöveges és grafikus hivatkozás egymás mellett áll. A grafika szövegalternatívája ugyanaz, mint a mellette álló szöveges hivatkozás, amely "dadogó" hatást kelt a hivatkozás ismétlődő kiolvasásakor.

Példa kód:

<a href="products.html">
   <img src="icon.gif" alt="Products page" />
 </a>
 <a href="products.html">
   Products page
 </a>  
4. példa (hiba)

Ez a példa a technika hibás alkalmazását mutatja be. A példa szerint egy szöveges és grafikus hivatkozás áll egymás mellett. A "dadogó" hatás kiküszöbölése érdekében a grafikának nincs szövegalternatívája. Ennek következtében az egyik hivatkozás célja ismeretlen, amely a link saját szövegének a hibája.

Példa kód :

<a href="products.html">
   <img src="icon.gif" alt="" />
 </a>
 <a href="products.html">
   Products page
 </a>     
5. példa (hiba)

Ez a példa a technika hibás alkalmazását mutatja be. A grafika és a szöveg ugyanazon az elemen belül található. Ugyanakkor a kép szövegalternatívája duplikálja a szöveges hivatkozást, ami a "dadogó" effektushoz vezet a felirat kétszeres kiolvasásakor.

Példa kód:

<a href="products.html">
  <img src="products.gif" alt="Products page"/>
  Products page
</a>    
            

Források:

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

Ellenőrzések

Folyamat

A tartalom minden képi elemet tartalmazó hivatkozáseleméhez.

  1. Ellenőrizze, hogy a szomszédos hivatkozáselemeknek nem ugyanaz a "href" attribútuma és leírása.

A tartalom minden táblázatba foglalt hivatkozáseleméhez:

  1. Ellenőrizze, hogy a szomszédos táblázat cellákban nincs ugyanolyan href attribútummal és leírással rendelkező hivatkozáselem.

Elvárható eredmények
  • Minden fenti ellenőrzés igaz.

Teljesítési feltételek: