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:
- 1.1.1 teljesítési feltétel (Nem-szöveges tartalom)
- 2.4.4 teljesítési feltétel (A hivatkozás célja (Kontextusban))
- 2.4.9 teljesítési feltétel (A hivatkozás célja (csak hivatkozásnak))
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.
Kapcsolódó technikák
- G91: Olyan hivatkozási szöveg biztosítása, amely leírja a hivatkozás célját
- G94: A nem-szöveges tartalomhoz olyan szöveges változat biztosítása, amely ugyanazt a célt szolgálja és ugyanazt az információt jeleníti meg, mint a nem-szöveges tartalom
- H30: A hivatkozás vagy horgony-elemek szerepét bemutató szöveges hivatkozás megadása
- C9: Using CSS to include decorative images
- F89: A 2.4.4, 2.4.9 és 4.1.2 teljesítési feltételekhez tartozó hiba, amelyet a hivatkozásként szereplo kép 0 értéku alt attribútuma okoz
Ellenőrzések
Folyamat
A tartalom minden képi elemet tartalmazó hivatkozáseleméhez.
-
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:
-
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.